I’m trying to change the value of a couple of hidden form elements when the form us submitted, but only if the values of qty_1 and qty_2 are greater than or equal to 2. Even though I can test with alert(), and the if statement seems to be doing it’s job, the value of amount_1 and amount_2 are always 12.5. They should not be 12.5 if the sum is less than 2.
What am I doing wrong?:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Changing Input Values With jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("input[name=submit]").click( function() {
if($("input[name=qty_1]").val() + $("input[name=qty_2]").val() >= 2)
{
$("input[name=amount_1]").val('12.5');
$("input[name=amount_2]").val('12.5');
}
});
});
</script>
</head>
<body>
<form action="examine-post.php" method="post">
<input type="text" name="qty_1" value="" />
<input type="hidden" name="amount_1" value="15" />
<input type="text" name="qty_2" value="" />
<input type="hidden" name="amount_2" value="15" />
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
I also think it is some wierd kind of caching, based on what I’m seeing. It works fine if I don’t go back and change the values, but is not reliable if I change the values.
Hey, sorry to be of no help but I had this issue. I did 800 different changes and eventually got it working. I thought at the end it seemed like some weird cacheing error. The other weird thing to look at is the native form value document.forms[0].element[0].value.
Also try setting value or trying setting .attr(‘value’, 1.25); I think that’s actaully what ended up working for me.
I would think that it’s because a form value is always a string. When you add together two strings, such as “3” + “5”, you end up with “35”, not 8.
If you want to add two numbers together, you should convert the strings to numbers.
if (Number($("input[name=qty_1]").val()) +
Number($("input[name=qty_2]").val()) >= 2) {
Paul, thanks for that info.
I ended up doing something in php, which works great. I was just trying to make something happen with javascript, as I am trying to learn more about it lately. Like php, I suppose javascript needs to be told when a value is (int), (float), etc.
Before you had suggested this, I found that moving the javascript down by the closing body tag was all it took to get the code to do what I wanted it to do. Don’t really know why…
Before you had suggested this, I found that moving the javascript down by the closing body tag was all it took to get the code to do what I wanted it to do. Don’t really know why…
Likely because then the script didn’t run until everything was loaded and the values were readable.
Though I thought this
$(document).ready(function() {
was supposed to wait for the whole page to load. Maybe it doesn’t? Though the browser will load and parse that JS first, just not execute it, when it’s in the head.
Right before the closing body tag, the browser has read, parsed and loaded the form before reading and parsing the script. Maybe that makes a difference here.
Not the whole page. It waits for the DOM to be ready, which is made up frm the source code. Things like images are still loading when the above triggers.
No, that wouldn’t have made any difference. Put up a test page with the non-working code and we’ll work out exactly why it fails, and what should be done for it to work as expected.