HTML forms - preset to add text to the input

I’m wanting to make a search function in a limited way.

The following code sends the input text to a page where the script processes it, no problem

<form action="search.php">
  <input type="text" name="site_search" />
  <input type="submit" value="Search" />

I would like to have text automatically added to the input.

Example: I have a site I want to be only about things that are red.

Someone inputs “table” and the text “red+table” is sent to the search page.

If you want to avoid using javascript, one quick and dirty solution would be to add a hidden field that contains the keyword you need. Your server side script should then be written to concatenate whatever is in your hidden field with the value of the input field.

Another option is to replace your submit button with a regular button, and on click add the keyword you need to the value of the input field (yourfield.value = 'red '+ yourfield.value; ) before executing your submit() function.

Yet another option is to make an AJAX POST request, in which you have total control of the values being passed to the server side script.

Still trying to figure this out with html forms since I’m pretty much clueless in javascript.

I’m getting closer using the below. It pre-loads the form with Red, but would be better to keep that hidden if possible.

<form action="search.php">
<Input value = 'Red '+ Product Search.value type="text" name="site_search"; />
  <input type="submit" value="Red Search" />

I had given up on this and last night it came to me in a dream. No kidding!

Simple solution really. I just put the full search url in the form plus the added term in the input and it works.

<form action="">
<input type="text" name="site_search=red+" />
  <input type="submit" value="Search" />

And a search input for flowers shows results for red flowers.

Only thing is the url is a bit messy looking like this…

but it works.