CODEWITHSUNDEEP
javascripthtmlhref
Steven Combs
Steven Combs

Reputation: 1939

How do I set my HREF to text from an input field and a select list?

I am trying to set my HREF of my button to the text that was in the input field and the selected option from my select list, when the user clicks the Search button.

<div>
  <div>
    <input type="text" value="Keywords" style="width:206px" />
  </div>
  <div style="clear:both">
    <select>
      <option value="Test">Test</option>
    </select>
  </div>
  <div>
    <button><a href="">Search</a></button>
  </div>
</div>

How do I set the href from the value of the input box and the selected value of the select list? I might need to create a form for this but I thought I could get away with something a little simpler. I just need to compile the search string and redirect the user to the appropriate page, since the search engine is already built.

Thanks!

Edit 1

Sorry guys I am using php to load the select list but I am not able to provide the code for how the select list gets populated since it has company sensitive information in it. I shouldn't have included that.

Upvotes: 0

Views: 4187

Answers (2)

michi
michi

Reputation: 6625

With PHP only (no jQuery, no Javascript) you would use a submit-button in your form and work with $_POST:

1st your form (stripped down to basics):

<form method="post">    
    <input name="keywords" type="text" value="Keywords" style="width:206px" />
    <select name="options">
        <option value="Test">Test</option>
    </select>
    <input type="submit" name="ok" value="ok" />
</form>

2nd, on the beginning of your php-page that holds that form:

if (isset($_POST['ok'])) { // submit has been clicked...

    if (isset($_POST[keywords])) { // there's input in keywords

        $keywords = $_POST['keywords'];
        // sanitize $keywords to prevent sql-injection

        // go to the page you want to call...
        // assuming there's no output before header ...
        // and $keywords is in the right format ...
        // and you retrieved $_POST['options'] to do sth with that, too

        header('Location: http://www.url.com/page.php?key=$keywords');
    } else exit('no keywords entered!');  
}

Upvotes: 1

Wanderson Silva
Wanderson Silva

Reputation: 1199

Using javascript, you can retrieve and value of a form field and handle it to what you need.

Suppose the select ID's select and the link ID's is link:

var value = document.getElementById('select').value;
document.getElementById('link').setAttribute('href', value);

Upvotes: 1

Related Questions