jquery to goto a url on form submit with field values added to the url string

Question

Hi All,

I'm fairly new to jquery and I think this is simple but I'm struggling and google doesn't seem to be helping....

What I have is a basic form...

<form>
First Name: < input type="text" name="firstName" id="firstName" />
Surname: < input type="text" name="surname" id="surname" />
<input type="submit" id="submit" value="submit"/>
</form>

Now when submit is clicked I want to goto a url but then add the froms values to the url string (but not using the form method=get) basicly I want this to happen

on click of submit goto http://myurl.com/index.html?params=firstNamevalue*surnamevalue

I've been hacking about with the jquery but where I'm upto is something like this...

< script src="http://www.google.com/jsapi" type="text/javascript">< /script>
< script type="text/javascript">
    google.load("jquery", "1.3.1");
</script>

< script type="text/javascript">

var = firstName $("#firstName").val();
var = surname $("#surname").val();


$('#submit').click(function(){
  window.location = ???;
}); 
< /script>

hopefully I've been farily clear - I'd greatly appreciate any help!

Andy

Answer 1

You have it right, almost.

var firstName = $("#firstName").val();
var surname = $("#surname").val();

location.href = "index.html?firstName=" + firstName + "&surname=" + surname

Of course, you could make a function that accepts a list of key/value pairs in an object and make this generic, but you get the idea.

$('#submit').click( function() { 
location.href = "";
return false;
} );

Answer 2

jQuery serialize might help in a simple case like the one you describe:

$('#form').submit(
  location.href = 'index.html'+$(this).serialize();
);

Answer 3

Hi Gent's, thank you both for your help on this...

I'm not sure if I was doing something wrong with your methods or if I hadn't described what I needed to do well enough...

The solution in the end for me was this...

first file contains a a form with method="get"

< form method="get" action="getParams.html"> First Name: < input type="text" name="firstName" id="firstName" /> Surname: < input type="text" name="surname" id="surname" /> < input type="submit" id="submit" value="submit"/> < /form>

this directs to get params and as the method=get the url ends with getParams.html?firstname=""&surname=""

Then in the getParams.html page this is simply used for the formatting (as i need it to be) from the url and redirect...

I used attached jquery followed by this plugin http : // projects.allmarkedup.com/jquery_url_parser/

with the js:

var firstName = jQuery.url.param("firstName"); var surname = jQuery.url.param("surname"); location.href = 'http://myOnlineMag/issue01.html?params=' + firstName + '*' + surname;

pulls the values I want form the url as vars then attaches them to the end of my url. (I needed these in this specific format - can't share a link until the projects live but I can post next week if you would like.)

I am sure there should be an easier way for this but it does the job for now, thanks for the help it is appreciated and certainly helped me on my way!

Andy