html中的用户输入url修饰符

Question

I am creating a site for a city and am going to add a phone number lookup box on it. I would like it to be pure html and simple. I need somekind of user input boxes so in one box they could type the first name, then next box the last name, then a city box, then a state box. So when they push submit it fits it in this url: http://www.yellowpages.com/whitepages?first=FIRSTNAMEHERE&last=LASTNAMEHERE&zip=ZIPCODEHERE&state=STATEHERE

I have tried jQuery and it sort of worked but want to move on to pure html.

The code I have tried is:

 <input id="input" name="url" onfocus="this.value='';" style="border: 1px solid 
#A4A4A4; font-size: 0.9em; padding: 5px; width: 350px;" type="text" value="Type url here..">
<input onclick="window.open('http://www.yellowpages.com/whitepages?first=&last=&zip=&state=' + 

window.document.getElementById('input').value.replace(/^https?:\/\//,''))" style="font-family: Arial, sans-serif; font-size: 0.9em; margin: 2px 0; padding: 

4px; width: 100px;" type="button" value="Surf">

I know I am making the mistake somewhere in the "onclick" value.

Answer 1

Sounds like you need just a simple GET request for your form. A GET request means it passes data to a page via URL parameters. This code takes every submitted input name and puts the data it contains after your yellowpages URL.

<form method="get" action="http://www.yellowpages.com/whitepages">
    <input name="first" type="text">
    <input name="last" type="text">
    <input name="zip" type="text">
    <input name="state" type="text">
    <input type="submit" value="Submit">
</form>