SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change form element value on submit

    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?:

    Code:
    <!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>

  2. #2
    SitePoint Addict
    Join Date
    Jul 2007
    Location
    San Jose, California
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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.

    Code javascript:
    if (Number($("input[name=qty_1]").val()) +
        Number($("input[name=qty_2]").val()) >= 2) {
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Though I thought this
    $(document).ready(function() {
    was supposed to wait for the whole page to load.
    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.

    Quote Originally Posted by Stomme poes View Post
    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.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •