Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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

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!

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

$('#form').submit(function(){
  location.href = 'index.html'+$(this).serialize();
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;
                Thanks for the responses guys been trying this afternoon and still can't quiet get it right... this is what I have   var firstName = $("#firstName").val(); var surname = $("#surname").val(); $('#submit').click(location.href = "public.edition-on.net/352online/issue01.html?params=" + firstName + "*" + surname);  but it forwards on page load rather than on click??  I'm gonna keep trying but obvo any futher pointers would be appreciated...  Andy
– user194919
                Oct 23, 2009 at 16:35

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