Javascript remembering form values

[stn003]

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

$(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;
	});
});

[venegal]

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.

[stn003]

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.

    <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

[venegal]

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.

[stn003]

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

[stn003]

http://www.security-vacancies.net

[venegal]

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');
    // ...
}); 


[stn003]

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?

[venegal]

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.

[stn003]

Thanks,

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

[stn003]

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;
    });
}); 


[venegal]

Your actual code is

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

[stn003]

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

[venegal]

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.

[stn003]

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.