Prefilled HTML forms FROM buttons

I hope this question has an obvious answer to anyone who knows his way around JS and HTML :)

I have a very specific problem. I am trying to add to the header on a site buttons that will function like 'quick searches' which will basically on click send pre-filled form values to my search page and have the search page also populate these values in the ajax form inside.

Here is a sample search page that's outside of the results page: http://www.thediamondsexperts.com/index.php?route=product/diamondsearch/jewelry

You'll notice that when you change the values there and click Search, the values also appear in the ajax form on the sidebar of the search results page.

What I simply want to do is create different variations for pre-set searches, and put them as buttons in the header.

When I try to put a few invisible forms in it won't work because of the multiple form values with the same ids but in general I think there must be a simple way to do this server side.

For instance, copy the current function that accepts the search, have it with pre-set values instead of populating the values from the form and then simply calling that function onClick. Does that make sense?

I need to create something simple enough though that would be easy for the admin to later change and customize more buttons so a client-side solution would be best.

Your help is much appre开发者_运维百科ciated!

All you need is a form with hidden inputs and a submit button:

<form>
<input type="hidden" name="param1" value="Predefined value 1" />
<input type="hidden" name="param2" value="Predefined value 2" />
<input type="hidden" name="param3" value="Predefined value 3" />
<button type="submit">Search!</button>
</form>

This will only show the button, but the values will still be sent to your form's action.

...there must be a simple way to do this server side

...a client-side solution would be best

...copy the current function that accepts the search, have it with pre-set values instead of populating the values from the form and then simply calling that function onClick. Does that make sense?

Not really, not to me at least. If you can clarify I'd be glad to help more.

When you say "multiple form values with the same ids", I fear you may be confused: There is no requirement for a form input to have an "id", I think you mean "name", and there's no need to have multiple inputs with the same name in a form unless you want to send an array of values.

I didn't want to go overboard and talk about how the ajax works on that site, because that's another thing altogether and all you seemed to be concerned about was the preset search buttons. Hopefully this helps you figure it out, GL.

EDIT: I'm having a tough time figuring out what you're really asking, if you are trying to duplicate the behavior on that site, please tell us what server side language is available to you, if you're using or open to using any javascript libraries, and what you have tried so far. A full fledged spoon-feeding tutorial is really out of scope, you will get better, clearer help if you share the code from your current attempts.

If you want to pass values from one page to another and handle it client-side, use "get" for the form submit method, and use the handy "gup()" function to grab the param values. You can get more info on gup() here:

function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

On your initial page, you can either use inputs with type="hidden" or just get the values from the visible inputs (as on your sample page). Then submit to your results page. Given an initial page with something like this...

<form method="get" action="results.html">
  <input type="text" name="caratFrom" value="0.7" />
  <input type="submit"/>
</form>

... here's sample usage for the results page:

var caratFrom = gup('caratFrom');
// etc.

Then simply assign those values to whatever elements you want, e.g. an input:

<!-- HTML -->
  <input type="text" name="caratFromResult" value="" />

// Javascript
  document.getElementById('caratFromResult').value = caratFrom;