JQuery error: Uncaught Error: Syntax error, unrecognized expression

Question

I Have this script below that suppose to get values from input fields and then add them in a href link. but i keep getting this error in console:

Uncaught Error: Syntax error, unrecognized expression: ?add-to-cart=7690&variation_id=8498&attribute_pa_color=gold

Here is the script:

    jQuery(document).on("click", ".variations_form.cart .variation_buttons_wrapper a", function(){
    // Get all the values needed for the URL
    var add_to_cart = jQuery(this).parent().parent().parent().parent().parent().parent().find( 'input[name="add-to-cart"]' ).val();
    var variation_id = jQuery(this).parent().parent().parent().parent().parent().parent().find( 'input[name="variation_id"]' ).val();    
    var pa_color = jQuery(this).attr("id");
    setTimeout(function(){
    // Craft the URL
    var link = jQuery("?add-to-cart=" + add_to_cart + "&variation_id=" + variation_id + "&attribute_pa_color=" + pa_color);
    alert(link);
    }, 500); 
   });

Any ideas??

Nir Tzezana · Accepted Answer · 2017-01-22 06:49:11Z

1

You are using the jQuery object the wrong way.
If you are trying to craft a link do it this way:

var link = "?add-to-cart=" + add_to_cart +
"&variation_id=" + variation_id +
"&attribute_pa_color=" + pa_color;

No need for the jQuery object here.

answered Jan 22, 2017 at 6:49

Nir Tzezana

2,3423 gold badges34 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mysticalghoul Over a year ago

I will but apparently i have to wait 5 more minutes.

Aayush Gupta · Accepted Answer · 2017-01-22 06:53:54Z

1

There is no need for the jQuery object when crafting the URL. Simply use it without the object.

var link = "?add-to-cart=" + add_to_cart + "&variation_id=" + variation_id + "&attribute_pa_color=" + pa_color;

answered Jan 22, 2017 at 6:53

Aayush Gupta

322 silver badges6 bronze badges

Comments

Sachin Singh · Accepted Answer · 2017-01-22 06:56:46Z

This is because you are passing querystring as jQuery selector. You need to create a valid selector for the same.

To add to href link, first select the link and get the URL

var link = $("#link").attr("href");

Then add the querystring to it

link += "?add-to-cart=" + add_to_cart + "&variation_id=" + variation_id + "&attribute_pa_color=" + pa_color;

Suggestion:

If you are using a form, a shortcut way to get all fields as querystring is using jQuery serialize method. Example:

var queryString = $("#form").serialize();

Make sure all your form fields have name attributes.

Few words of wisdom: Avoid to many parent() calls to reach the target element. You code will break if the DOM changes and nesting levels increases or decreases.

Ionuț Staicu · Accepted Answer · 2017-01-22 06:51:05Z

0

jQuery("?add-to-cart="...) is not a valid DOM selector, hence the error. You need to leave it as a string. Or even better, use jQuery.param:

var link = jQuery.param({
  'add-to-cart': add_to_cart,
  'variation_id': variation_id 
})

BTW, instead of doing this:

var add_to_cart = jQuery(this).parent().parent().parent().parent().parent().parent().find( 'input[name="add-to-cart"]' ).val();

You could do something like this:

jQuery(this).closest('.variations_form').find('input...')

(replace variations_form with whatever parent class name you have)

answered Jan 22, 2017 at 6:51

Ionuț Staicu

22.3k11 gold badges54 silver badges58 bronze badges

Collectives™ on Stack Overflow

JQuery error: Uncaught Error: Syntax error, unrecognized expression

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related