I just started learning jQuery and I got stuck on something. I have a form which ask for a name, adress, email and phonenumber. Now I would like to get all this info in just 1 variable when the submitbutton is pressed. Then I would like to show this variable in the next tab.
Can someone help me out?
Does the format matter? If not, this will get you the serialized form:
var value = JSON.stringify($('form').serializeArray());
alert(value);
Then you can pass around value however you like.
UPDATE
If you want something more user friendly you could try something like this. Since you havent provided your HTML, I'm making up a form.
<input id="fullname" type="text" />
<input id="email" type="text" />
<input id="phone" type="text" />
<input id="submitButton" type="button" />
<div id="results"></div>
And the jQuery would be something like:
$('#submitButton').click(function()
{
var value = $('#fullname').val() + '<br/>' + $('#email').val() +
'<br/>' + $('#phone').val();
$('#results').text(value);
});
UPDATE 2 If you are having trouble with the event handlers, you might want to try to stop the bubbling of the event. by adding the event parameter to the function and calling event.preventDefault()
$('#submitButton').click(function(event)
{
//do stuff
event.preventDefault();
});
<form> on your page to the string representation of an equivalent JSON object. It will not be very user friendly if you want to display it to an end user. What exactly are you trying to accomplish on the next tab?type="button" or type="submit"? type="submit" will post the form back to the server which will also cause the symptoms you explained. type="button" will not submit the form, but you will still get the button and the click event. If you don't need to send the form to the server at this point, then you should change the type to button.HTML
<form>
<input type="text" id="txtfirstname"/>
<input type="text" id="txtlastname"/>
<a href="#" id="submitForm">Submit</a>
</form>
javascript
$(function(){
var person = new Object();
$('#submitForm').click(function(event){
person = new Object();
person.FirstName = $('#txtfirstname').val();
person.LastName = $('#txtlastname').val();
//....
//hide current tab.
//initialize next tab with properties of person.
});
})
