Why won't this var change value

**fastsol1** · 04-19-2013, 12:39 PM

So I have this jquery code and it works except for one specific part. I am doing a quantity check for a shopping cart system and I need to prevent the default form submission of the submit button and check all the quantities with a $.post() and checking the database. I have confirmed that all aspects work for the checking and outputting to the screen when and where they need to. If I alert(bad) inside the else{} it shows me the value I expect but it does not seem to hold that value or something after the .each() runs which is where I check it's value and submit the form if it's still false in value. Any insight would be great.

Code:

    $('#paypal-submit-button').click(function(e){
            var bad = false;
            e.preventDefault();
            $('.qty-input').each(function(){
                var qty = parseInt($(this).val());
                var id = parseInt($(this).attr('prod_id'));
                var qty_id = String($(this).attr('qty-input-num'));
                
                $.post('check_avail_qty.php', {pid:id, quantity:qty}, function(data){
                    if(data == "good")
                    { }
                    else
                    {
                        $('#prod-qty-check'+qty_id).html('Oh No! It seems we have run out of this item. Please remove it from your cart to continue.');
                        var bad = true;
                        alert(bad);
                    }
                });
            })
            if(bad === false){ $('#cart-submit-form').submit(); }
        });

**jscheuer1** · 04-19-2013, 03:10 PM

I see two potential problems. The default action of the submit button might not technically be to submit the form. But it probably is, so let's not worry about that now.

The other problem is that since $.post() is asynchronous, it hasn't completed by the time you get here:

Code:

if(bad === false){ $('#cart-submit-form').submit(); }

So, the first thing I would try, is moving that into $.post() function itself, something like this:

Code:

    $('#paypal-submit-button').click(function(e){
            var bad = false, qtys = $('.qty-input').size();
            e.preventDefault();
            $('.qty-input').each(function(){
                var qty = parseInt($(this).val());
                var id = parseInt($(this).attr('prod_id'));
                var qty_id = String($(this).attr('qty-input-num'));
                
                $.post('check_avail_qty.php', {pid:id, quantity:qty}, function(data){
                    if(data == "good" && --qtys < 1)
                    {
                        $('#cart-submit-form').get(0).submit();
                    }
                    else
                    {
                        $('#prod-qty-check'+qty_id).html('Oh No! It seems we have run out of this item. Please remove it from your cart to continue.');
                        var bad = true;
                        alert(bad);
                    }
                });
            });
        });

Note: In the highlighted line I added a .get(0), as this is the way to submit a form via javascript. However, if your intent was to trigger a jQuery submit event previously assigned to the form, it would be better to use either what you had (without the .get(0)) or to use the formal jQuery .trigger() function:

Code:

                        $('#cart-submit-form').trigger('submit');

Also, data == "good" might be too narrow. There might be white space. If there's a problem with the form not submitting even when quantities are sufficient, I'd use data.indexOf('good') > -1 instead:

Code:

if(data.indexOf('good') > -1 && --qtys < 1)

**fastsol1** · 04-19-2013, 03:58 PM

Thanks for the help. I have tried your code and it seems to be getting closer I think. I fairly understand what you are trying to achieve in your code but sadly the result is not quite correct. I only want the else{} to run if the data response is not "good", otherwise it's throwing the Oh No! part for each item even if the data response was "good" cause the second part of the if() is not true yet.
So essentially the --qtys === 0 is making the else run each time

Code:

if(data == "good" && --qtys === 0)

**jscheuer1** · 04-19-2013, 04:10 PM

How about:

Code:

$('#paypal-submit-button').click(function(e){
            var bad = false, qtys = $('.qty-input').size();
            e.preventDefault();
            $('.qty-input').each(function(){
                var qty = parseInt($(this).val());
                var id = parseInt($(this).attr('prod_id'));
                var qty_id = String($(this).attr('qty-input-num'));
                
                $.post('check_avail_qty.php', {pid:id, quantity:qty}, function(data){
                    if(data.indexOf('good') > -1 && --qtys < 1 && !bad)
                    {
                        $('#cart-submit-form').get(0).submit();
                    }
                    else if (data.indexOf('good') < 0 && --qtys > -1)
                    {
                        $('#prod-qty-check'+qty_id).html('Oh No! It seems we have run out of this item. Please remove it from your cart to continue.');
                        var bad = true;
                        alert(bad);
                    }
                });
            });
        });

Note: In the highlighted line I added a .get(0), as this is the way to submit a form via javascript. However, if your intent was to trigger a jQuery submit event previously assigned to the form, it would be better to use either what you had (without the .get(0)) or to use the formal jQuery .trigger() function:

Code:

                        $('#cart-submit-form').trigger('submit');

Also, data == "good" might be too narrow. There might be white space. If there's a problem with the form not submitting even when quantities are sufficient, I'd use data.indexOf('good') instead (and have done so in the above)

**fastsol1** · 04-19-2013, 04:34 PM

Ok getting closer still. I now have it where it gives me the conditions I want per item and I have verified through an alert() that when all responses are "good" it runs the if() for that but it still won't submit the form no matter the combination of triggers I used. Here is what I have now.

Code:

$('#paypal-submit-button').click(function(e){
        var bad = false, qtys = $('.qty-input').size();
        e.preventDefault();
        $('.qty-input').each(function(){
            var qty = parseInt($(this).val());
            var id = parseInt($(this).attr('prod_id'));
            var qty_id = String($(this).attr('qty-input-num'));
            
            $.post('check_avail_qty.php', {pid:id, quantity:qty}, function(data){
                if(data == "good" && --qtys < 1)
                {
                    $('#cart-submit-form').get(0).trigger('submit');
                }
                else
                {
                	if(data == "good"){  }
                	else
                	{
                    	$('#prod-qty-check'+qty_id).html('Oh No! It seems we have run out of this item. Please remove it from your cart to continue.');
                    	var bad = true;
                    	alert(bad);
                    }
                }
            });
        });
    });

Here is a sample of the form too, taken from the browser source code. Also the qty inputs are not part of this form cause they are part of a update form on the same page. So essentially I am checking data of the update form and then submitting the form below if those conditions are good. I don't think should really make any difference though.

HTML Code:

<form id="cart-submit-form" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
		<input type="hidden" name="cmd" value="_cart"/>
		<input type="hidden" name="business" value="jd10172000@yahoo.com"/>
<input type="hidden" name="item_number_1" value="6"/>
<input type="hidden" name="item_name_1" value="Leather Dress"/>
<input type="hidden" name="amount_1" value="99.99"/>
<input type="hidden" name="shipping_1" value="1.95"/>
<input type="hidden" name="shipping2_1" value="0.00"/>
<input type="hidden" name="quantity_1" value="1"/>
<input type="hidden" name="on0_1" value="sizing"/>
<input type="hidden" name="os0_1" value="3X (24-26)"/>

<input type="hidden" name="item_number_2" value="6"/>
<input type="hidden" name="item_name_2" value="Leather Dress"/>
<input type="hidden" name="amount_2" value="99.99"/>
<input type="hidden" name="shipping_2" value="0.00"/>
<input type="hidden" name="shipping2_2" value="0.00"/>
<input type="hidden" name="quantity_2" value="3"/>
<input type="hidden" name="on0_2" value="sizing"/>
<input type="hidden" name="os0_2" value="2X (20-22)"/>

<input type="hidden" name="item_number_3" value="8"/>
<input type="hidden" name="item_name_3" value="Black Cloth Dress"/>
<input type="hidden" name="amount_3" value="42.99"/>
<input type="hidden" name="shipping_3" value="0.00"/>
<input type="hidden" name="shipping2_3" value="0.00"/>
<input type="hidden" name="quantity_3" value="3"/>
<input type="hidden" name="on0_3" value="sizing"/>
<input type="hidden" name="os0_3" value="XS (0-2)"/>

<input type="hidden" name="currency_code" value="USD"/>
		<input type="hidden" name="amount" value="530.88"/>
		<input type="hidden" name="upload" value="1"/>
		<input type="hidden" name="custom" value="0::standard"/>
		<input id="paypal-submit-button" type="submit" value="submit" name="submit" alt="Make payments with PayPal - it's fast, free and secure!"/>
		</form>

**jscheuer1** · 04-19-2013, 05:27 PM

There might be other problems, the code looks tortured, but this:

Code:

$('#cart-submit-form').get(0).trigger('submit');

will never do anything. And this won't work because you have a form element named 'submit':

Code:

$('#cart-submit-form').get(0).submit();

So hopefully there's a jQuery submit event that was previously assigned to the form, and you can use:

Code:

$('#cart-submit-form').trigger('submit');

But, if it was submitting with:

Code:

$('#cart-submit-form').submit();

Try that. It should be the same as the trigger one but might be different.

I'll look more closely at it all later.

**fastsol1** · 04-19-2013, 06:12 PM

Not sure what you mean by tortured code, I did mods to the jquery and might not have some brackets positioned 100% right at this moment but the form code is pretty standard. Anyway I have/had tried all those variations on the submit and nothing has worked. I feel I am so close. I am sure there are better ways to go about this but I am just learning javascript/jquery so my knowledge is small but not infant. Any more help is appreciated greatly.

**jscheuer1** · 04-20-2013, 02:31 PM

OK, your example form has no elements with a class of .qty-input, it does have 3 inputs whose names begin with quantity_ followed by a number. Thise could be selected with:

Code:

$('input[name^="quantity_"]')

But none of those have the attributes looked for here in the code:

Code:

                var id = parseInt($(this).attr('prod_id'));
                var qty_id = String($(this).attr('qty-input-num'));

And with those values, though they might be available elsewhere in the form, it's unclear what you're after with them.
prod_id could be item_number_# (though you have that as 6 for the first two so that's probably a typo), and qty-input-num could be the # in quantity_#. If those are what those values are meant to be, they can be gotten without making separate attributes for them.

And there are no:

Code:

$('#prod-qty-check'+qty_id)

elements in that form to receive the out of stock messages.

I have a feeling though that you may have modified the form that you are showing in your post to have that class name and those attributes for the quantity_# inputs and those message elements. If so, I need to see that form and the rest of the javascript code if any. If not then we need to figure out how to get that information from the existing form. and the messages could be inserted into the DOM, but putting in the message elements might be better.

Oh, and from what you are showing me so far, there is no way to submit that form using either javascript or jQuery, but hopefully that can be worked out. The easiest way to do that would be to get rid of the name attribute of the submit button, then we could use:

Code:

$('#cart-submit-form').get(0).submit();

to submit it. But removing that name might make the form not get processed properly on the PayPal server. Generally though the submit button of a form needs no name. Giving it one provides a means of detecting on the receiving page whether or not it was submitted via javascript. That might be why it has that name. It cannot be submitted via javascript with that name. I'm not sure if it can be submitted at all other than in the normal manner, unless the submit button's name attribute is removed.

Another thing I noticed with that form is that all of its inputs, except the submit button are hidden, so there's no apparent way for the user to change quantities or to even know what items they are buying. So now I'm thinking there might be another form for that.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out. Or at least show me the actual form(s) used and all of the javascript as well.

**fastsol1** · 04-20-2013, 11:20 PM

John you're awesome. Getting rid of the name attribute did the trick and paypal seems to still take the form and process it. So you know, there is a whole other form on the page that has all those other attributes you asked about. That form is so that a customer can update the cart and the paypal form is just the needed form fields to submit to paypal which are all hidden. As I said before I am no pro at javascript by any stretch of the word, so I know I will be editing the code as I get better at it, but for now it works as I want thanks to you. I also that some of the techniques I used may not work in all browsers either and that's fine, the code I had issues with is used just as a last ditch effort to make sure a product hasn't sold out all the sudden before I send the customer to paypal where I don't have total control of all steps of the payment.

Thanks again, JD