False value being passed in ajax call

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'>

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.

 

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?

 

The closing curly bracket for the for statement is in the wrong place but I'm not able to edit my post.

 

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]

 

Nice, that you were able to solve this on your own.

 

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.

 

Wow ,probably i know now to who i will show this and it will help ! Thanks so much!