Forums

JoeBrooks

I'm know how to navigate code, and once I learn how to code something I remember it forever. That being said I have never built a search form before with this functionality and I was wondering if someone here could lead me in the right direction with how to get started.

User chooses at least one option for any field. So he could choose to search for just Option 1 and not use option 2 / 3. Or he can select Option 1 , 2 and 3.

(brackets indicate an option the user choose)

Option 1 Dropdown - [test] - test2 - test3

Option 2 Dropdown - test - [test2] - test3

Option 3 Dropdown - test - test2 - [test3]

Option 4 Dropdown - test - test2 - test3

user hits submit button and the following page loads:

yoursite.com/?option1=test&option2=test2&option3=test3

The user didn't select anything for option 4 , thus it doesn't appear in the url.

JoeBrooks

In trying to google for answer, I keep searching 'build web form' and everything coming back thus far is about building comment forms, or email collection forms. That's not entirely what I'm doing here. If someone can give me a phrase of what I'm trying to do that would help me find a better google result that would be appreciated too :)

JoeBrooks

My test codepen

mcjohnst

If I'm not over simplifying what you're trying to do, I believe you are looking to pass the search criteria via Query Strings in the URL. If that's what you're after, you'll just have to create a separate file or section within the page that does the processing and have that as your action on the form submission.

JoeBrooks

I found some code to do what I want :D

function misMakeUrl() { var url='http://yoururl.com/'; var comma='?'; if(document.myWebForm.Option1.value!="") { url+=comma+"Option1="+document.myWebForm.Option1.value; comma='&'; } if(document.myWebForm.Option2.value!="") { url+=comma+"Option2="+document.myWebForm.Option2.value; comma='&'; } if(document.myWebForm.Option3.value!="") { url+=comma+"Option3="+document.myWebForm.Option3.value; comma='&'; } if(document.myWebForm.Option4.value!="") { url+=comma+"Option4="+document.myWebForm.Option4.value; comma='&'; } if(document.myWebForm.list_sqfeet.value!="") { url+=comma+"list_sqfeet="+document.myWebForm.list_sqfeet.value; comma='&'; } if(document.myWebForm.list_price.value!="") { url+=comma+"list_price="+document.myWebForm.list_price.value; comma='&'; } document.location.href=url; return false; }

  <form name="myWebForm" action="" method="get" onsubmit="return misMakeUrl();">
    <select name="Option1" id="Option1"> 
      <option value="" ></option>
      <option value="test" >Test</option>
      <option value="test2" >Test 2</option>
      <option value="test3" >Test 3</option>
    </select>
    <select name="Option2" id="Option2">
      <option value="" ></option>
      <option value="test" >Test</option>
      <option value="test2" >Test 2</option>
      <option value="test3" >Test 3</option>
    </select>
    <select name="Option3" id="Option3"> 
      <option value="" ></option>
      <option value="test" >Test</option>
      <option value="test2" >Test 2</option>
      <option value="test3" >Test 3</option>
    </select>
    <select name="Option4" id="Option4">
      <option value="" ></option>
      <option value="test" >Test</option>
      <option value="test2" >Test 2</option>
      <option value="test3" >Test 3</option>
    </select>
     <select name="list_sqfeet" id="list_sqfeet">
      <option value="" ></option>
      <option value="0-1500" >Less than 1,500</option>
      <option value="1500-2000" >1,500 - 2,000</option>
      <option value="2000-2500" >$2,000 - 2,500</option>
      <option value="2500-3000" >2,500 - 3,000</option>
      <option value="3000-0" >3,000+</option>
    </select>
    <select name="list_price" id="list_price">
      <option value="" ></option>
      <option value="0-100000" >Less than $100,000</option>
      <option value="100000-150000" >$100,000 - $150,000</option>
      <option value="150000-200000" >$150,000 - $200,000</option>
      <option value="200000-0" >$200,000+</option>
    </select>
    <input type="button" value="SUBMIT" onclick="misMakeUrl();"/>
  </form>

treehouse : what would you like to learn today?

Forums

[Solved] Building a search form