Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Javascript remembering form values

    Hi All, i have a webpage that has multiple forms on a page and i have added some code that when a form is completed it connects to mysql via javascript/ajax and then updates a database.

    The problem i have is that the javascript remembers the first variables of the first form because everytime you click the button on another form it always inserts the original data to the database.

    I have the code below, is there away that i can clear the variables after every call. I am a newbie to javascript and so any suggestions would be appreciated.

    Thanks

    Code:
    $(document).ready(function(){
    	$("form#submit").submit(function() {
    	// we want to store the values from the form input box, then send via ajax below
    	var usern     = $('#usern').attr('value');
    	var joborder_id    = $('#joborder_id').attr('value');
    	var site_id    = $('#site_id').attr('value');
    		$.ajax({
    			type: "POST",
    			url: "ajax.php",
    			data: "usern="+ usern +"& joborder_id="+ joborder_id +"& site_id="+ site_id,
    			success: function(){
    				$('form#submit').hide(function(){$('div.success').fadeIn();});
    
    			}
    		});
    	return false;
    	});
    });

  • #2
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    There's no indication in your code that any values would be "remembered". Maybe those other forms are submitting values from the first form instead of their own — you would have to show your whole code.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, Ok below is my form, as you can see the form is populated by php variables (which i removed just for ease of posting, but they are just straight forward php variables) , however the variables are also echoed just before the form on the page and so they each show the correct and not the same value.

    Code:
        <form id="submit" method="post">
                                <fieldset>
                           <input type="hidden" name="usern" id="usern" value="php variable" />
                           <input type="hidden" name="joborder_id"  id ="joborder_id" value="php variable" />
                           <input type="hidden" name="site_id"  id ="site_id" value="Php Variable" />
                           <button class="button positive" value="Reload Page" onClick="window.location.reload()>">Apply for this vacancy</button>
                           </fieldset>
                           </form>
                           <div class="success" style="display: none;">Your Application has been sent.</div>
                                  &nbsp;
                                </form>
    The ajax php page is just a basic insert page which collects the variables using post.

    Thanks

  • #4
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    You said you have several forms on your page, and that the first form is submitted correctly, but those other forms are causing problems — yet in the code you posted there is no indication of several forms, only that one that's working alright anyway. Please show all your code, or link to a live example.

    Also, I don't quite understand the purpose of that form, since it only submits values to the server that are coming straight from the server anyway. And I don't see how the form can even be submitted, if that button only reloads the page.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #5
    New Coder
    Join Date
    Jul 2010
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the reply, A link to the page is below. from this page you need to click on the button in the three step search box and it will take you to the results page.

    Sorry yes there are multiple forms which are generated from results of a database, each new form is populated with different data taken from the database. However it only ever remembers the first form ever clicked, it never seems to enter something different in to the database, regardless of which form you click.

    Sorry for the confusion

  • #6
    New Coder
    Join Date
    Jul 2010
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts

  • #7
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    I see what you mean. Your problem is that you're using the same IDs for all the forms. IDs have to be unique. In your case, the form submission script will always fetch the values from the first form, because there's the first occurence of the ID you're requesting. You have to change all your non-unique IDs to classes, and make sure your code looks for the values in the form that has actually just been submitted, and not in the first one it finds in the DOM.

    So, after changing the IDs to classes, your code will have to look something like this:

    PHP Code:
    $('form.submit').submit(function () {
        var 
    usern = $(this).find('.usern').attr('value');
        var 
    joborder_id = $(this).find('.joborder_id').attr('value');
        var 
    site_id = $(this).find('.site_id').attr('value');
        
    // ...
    }); 
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #8
    New Coder
    Join Date
    Jul 2010
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, thats great, though i am confused now because that is php code, so does this now get placed on to the ajax.php page where the avriables are passed to?

  • #9
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    It's not PHP code, it's your (modified) Javascript code. I just put it into PHP tags, because that's the only way to get syntax highlighting in this forum.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #10
    New Coder
    Join Date
    Jul 2010
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks,

    That explains why i was confused. Thank you for your help much appreciated.

  • #11
    New Coder
    Join Date
    Jul 2010
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi,

    Ok i joined that snippet of code in to what i already had, However the same thing is happening, is it due to the way the data is being passed to the php page.

    PHP Code:
    $(document).ready(function(){
        $(
    'form.submit').submit(function () {
        var 
    usern = $(this).find('.usern').attr('value');
        var 
    joborder_id = $(this).find('.joborder_id').attr('value');
        var 
    site_id = $(this).find('.site_id').attr('value');
        
    // ...
            
    $.ajax({
                
    type"POST",
                
    url"ajax.php",
                
    data"usern="usern +"& joborder_id="joborder_id +"& site_id="site_id,
                
    success: function(){
                    $(
    'form#submit').hide(function(){$('div.success').fadeIn();});

                }
            });
        return 
    false;
        });
    }); 

  • #12
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Your actual code is
    Code:
    <script type"text/javascript">
    $(document).ready(function(){
    	$('form.submit').submit(function () {
        var usern = $(this).find('.usern').attr('value');
        var joborder_id = $(this).find('.joborder_id').attr('value');
        var site_id = $(this).find('.site_id').attr('value');
        // ...
    });
    		$.ajax({
    			type: "POST",
    			url: "ajax.php",
    			data: "usern="+ usern +"& joborder_id="+ joborder_id +"& site_id="+ site_id,
    			success: function(){
    				$('form#submit').hide(function(){$('div.success').fadeIn();});
    
    			}
    		});
    	return false;
    	});
    </script>
    which is wrong (use your error console!), and there are no more forms in the HTML. Please fix that, so I can have a look at the actual issue.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #13
    New Coder
    Join Date
    Jul 2010
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    sorry i changed the script but forgot to upload the page, so now it is the same as the code that i posted, i didn't get what you meant by remove the form.

    Sorry...

  • #14
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    I meant that there are no forms on that page. When I looked at your page before, they were there, but now they aren't, so I suppose you made a change to your PHP code. Obviously, I don't have an account to your site, but that didn't matter before.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #15
    New Coder
    Join Date
    Jul 2010
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry i uploaded a file that had the login requirement still in place, i have taken it off now as before, again thanks for your help, it's much appreciated.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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