1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

False value being passed in ajax call

Discussion in 'JavaScript' started by makamo66, Oct 19, 2019.

  1. #1
    I have an Ajax call that loops through a json file with the following code:

    <input class='num' type='text' name='quantity_" + element.id + "' id='numb' value='0'>
    SEMrush
    It calls a function in the form tag as follows:

    <form method='POST' action='cart.php' id='cartForm' onsubmit='return myFunction();'>
    Code (javascript):
    When I try to validate the quantity to make sure that it's a positive number less than ten, I use the following javascript:

    function myFunction() {
    var x;
    x = document.getElementById('numb').value;
    alert(x);//this prints 0 every time
    if ( isNaN(x) || (x < 0) || (x > 10)) {
    alert("Quantity must be a positive number less than 10.");
    event.preventDefault();
    return false;
    } else {
    alert("Input OK");
    }
    }
    Code (javascript):
    The problem is that it doesn't get the $_POST value of the textbox, it gets the value of zero like how the textbox is initialized every time.
     
    Last edited by a moderator: Oct 20, 2019
    makamo66, Oct 19, 2019 IP
    SEMrush
  2. makamo66

    makamo66 Active Member

    Messages:
    118
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #2
    A programming friend of mine pointed out that it's iterating through a loop of ids and the id is the same for every text input so I changed it to:

    <input class='num' type='text' name='quantity_" + element.id + "' id='numb_" + element.id + "' value='0'>

    and I changed my function to:


    function myFunction() {
      var x, i, y;
      for (i = 1; i < 7; i++) {
        y = 'numb_' + i;
        x = document.getElementById(y).value;
        //alert(y);
    
        if ( isNaN(x) || (x < 0) || (x > 10)) {
        alert("Quantity must be a positive number less than 10.");
        event.preventDefault();
        return false;
      } else {
        alert("Input OK");
      }
    }
    }
    Code (javascript):
    alert(y); prints out numb_1 every time so it's not looping properly. How can I improve my loop?
     
    Last edited by a moderator: Oct 20, 2019
    makamo66, Oct 19, 2019 IP
  3. makamo66

    makamo66 Active Member

    Messages:
    118
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    The closing curly bracket for the for statement is in the wrong place but I'm not able to edit my post.
     
    makamo66, Oct 20, 2019 IP
  4. makamo66

    makamo66 Active Member

    Messages:
    118
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #4
    With the help of a participant at another forum, I was able to find a solution. It looks like this:

    function myFunction() {
    var x, y;
    var elements = document.querySelectorAll('[id^="numb_"]');
    
    for (var i = 1; i < elements.length; i++) {
      
        y = elements[I].id;
       
        x = document.getElementById(y).value; 
    
        if ( isNaN(x) || (x < 1) || (x > 10)) {
        alert("Quantity must be a positive number less than 10.");
        event.preventDefault(); 
        return false;
      } else {
        return true;
    }
    }
    }
    Code (javascript):
    [/I]
     
    Last edited by a moderator: Oct 20, 2019
    makamo66, Oct 20, 2019 IP
  5. bountysite

    bountysite Active Member Premium Member

    Messages:
    56
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    68
    #5
    Nice, that you were able to solve this on your own.
     
    bountysite, Oct 23, 2019 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,009
    Likes Received:
    1,653
    Best Answers:
    235
    Trophy Points:
    515
    #6
    The code of your "solution" doesn't make any sense, as it would NEVER loop. As you have a return on else, it stops there so if there's more than one element, it just stops before it can even get that far.

    PROPER formatting reveals this:

    function myFunction() {
    	var x, y;
    	var elements = document.querySelectorAll('[id^="numb_"]');
    
    	for (var i = 1; i < elements.length; i++) {
    		y = elements[I].id;
    		x = document.getElementById(y).value; 
    		if ( isNaN(x) || (x < 1) || (x > 10)) {
    			alert("Quantity must be a positive number less than 10.");
    			event.preventDefault(); 
    			return false; // exits function
    		} else {
    			return true; // exits function
    		}
    	}
    }
    Code (markup):
    See the problem? It's impossible for it to loop.

    The code also has the issue of variables for nothing, and the loop itself could be done tighter, and lack of passing the event, that you're using the outmoded 'onsubmit' attribute instead of hooking the element like a good little dooby. I think this is what you meant to do:

    First let's fix your FORM tag.
    <form method="POST" action="cart.php" id="cartForm">
    Code (markup):
    Side note, the use of single quotes in markup is usually an indication your server-side code is a steaming pile.

    then for the scripting:

    
    document.getElementById('cartForm').addEventListener('submit', function(e) {
    	var elements = document.querySelectorAll('[id^="numb_"]');
    	for (var i = 1, id; id = elements[i]; i++) {
    		var value = d.getElementById(id).value;
    		if ( isNaN(value) || (value < 1) || (value > 10)) {
    			alert("Quantity must be a positive number less than 10.");
    			event.preventDefault(); // is 'event' global?
    			return;
    		}
    	}
    }, false);
    Code (markup):
    THOUGH I'd have to see the markup as I suspect there would be a more efficient / faster way of doing this than querySelectorAll, such as walking the DOM. Any of the searching functions --querySelector, querySelectorAll, getElementsByXXX , etc, etc, -- are painfully slow and would/should be bypassed when possible.

    NOT that any of this is JavaScript's flipping job anymore unless you really need that IE9/earlier support... since we have:

    <input type="number" min="1" max="10" required>

    To take care of what you're trying to do here. Hell you can even set step="1" to force it to integer.
     
    deathshadow, Oct 27, 2019 IP
  7. YoshimotoTo

    YoshimotoTo Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    Wow ,probably i know now to who i will show this and it will help ! Thanks so much!
     
    YoshimotoTo, Oct 28, 2019 IP