Search code examples
searchbar

How to create a search bar with 2 inputs


I'm still kind of new to this and although I've searched the web (a lot) I can't seem to find any info on how to code a double input search bar. My example being; one search bar for 'location' and the second for the 'product' they are looking for displayed inline with a single button to search.

Something like this: https://www.gumtree.com/

If anyone could point me in the right direction or supply any information I would be very grateful,

Thank you


Solution

  • It seems you're learning the bases of interactions with users.
    Basically, you need two things:

    • a form in your HTML page: <form method="GET|POST" action="YOUR_URL">, including text input fields: <input type="text" name="YOUR_NAME"> and a submit button: <input type="submit">

    • a script server-side, at URL "YOUR_URL", which will be called when a user submits the form. This is where you define appropriate actions to be taken with user entered data.
      Assuming you'll be scripting in PHP (but there are other languages available, see what's installed on your server), your script has access to the returned form fields values in following arrays:
      . $_POST (if sent from a method="POST"form),
      . $_GET (if method="GET") and
      . $_REQUEST (forget it for now).
      For example, if your form method is POST, you'll get the value of <input type="test" name="email"> in your PHP script like this: $userMail = $_POST['email'];

    It wouldn't make much sense to give further explanation here, there are plenty of tutorials and documentation on the web, now that you know what you're looking for ;-)
    For example:
    http://php.net/manual/en/tutorial.forms.php (official php doc, short but efficient) http://www.w3schools.com/php/php_forms.asp and following chapters (easy start point).

    Once you've got it working, pay special attention to unawaited characters that user could type and that could interfere in your code (especially quotes and special characters like "<>&"...).
    Keywords: escape string, addslashes, htmlspecialchars, mysql_real_escape_string, etc... depending of what you then do with this data.

    And if you're data is used in database queries, you should also check for keywords: sql injection, prepared statements.