We Keep Coding

drop down menu that changes the name of a form field

I am creating an advanced search form and wish to set the name of a text input field via a drop down menu.
Here is a simple search form with three separate fields:
<form method="get" action="/search_results_advanced/" id="keyword">
Search by name: <input type="text" name="name" value="" />
Search by address: <input type="text" name="address" value="">
Search by phone number: <input type="text" name="phone" value="">
<input type="submit" value="Go!" />
</form>
What I'd like to do is have a user select a single field from a drop down and then have a single text input box to enter a search term.
eg:
<form method="get" action="/search_results_advanced/" id="keyword">
Search by:
<select id="DropDownSelection">
<option>Name</option>
<option>Address</option>
<option>Phone</option>
</select>
<input type="text" name="?NAME_FROM_DROPDOWN_SELECTION?" value="" id="searchbar" size="25" />
<input type="submit" value="Go!" />
</form>
How can I name the text field using the dropdown selection? I tried modifying some javascript I found via google but I'm afraid I just don't know javascript at all and didn't get anywhere.
Thanks for any help.

Here is one example I made using jQuery:
$(document).ready(function(){
$('body').on('change','#DropDownSelection',function(){
var v = $('#DropDownSelection').val();
$('.search-by').html('Search by '+v+': <input type="text" name="'+v+'" value="">');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="get" action="/search_results_advanced/" id="keyword">
Search by:
<select id="DropDownSelection">
<option value="Name">Name</option>
<option value="Address">Address</option>
<option value="Phone">Phone</option>
</select>
<div class="search-by">Search by Name: <input type="text" name="Name" value=""></div>
<input type="submit" value="Go!" />
</form>

If you're using jquery, it's pretty simple:
<script>
$(function() {
$('#DropDownSelection').change(function() {
$('#searchbar').attr('name', $('#DropDownSelection').val());
});
});
</script>

You can set value for each option, and listen to change event on the dropdown:
var dd = document.getElementById('DropDownSelection');
var input = document.getElementById('searchbar');
input.setAttribute('name', 'name'); // default value
dd.addEventListener('change', function(e) {
input.setAttribute('name', e.target.value); // set input.name equal to chosen select.value
console.log(input.getAttribute('name'))
})
<form method="get" action="/search_results_advanced/" id="keyword">
Search by:
<select id="DropDownSelection">
<option value="name">Name</option>
<option value="address">Address</option>
<option value="phone">Phone</option>
</select>
<input type="text" name="" value="" id="searchbar" size="25" />
<input type="submit" value="Go!" />
</form>

HTML5 show hidden form elements after submitting and showing the required tags

i have to hide some elements within a from a form. So these fields are required. This is only shown if you click on a specific button. How can I show the if the required-fields are not set after klick the submit button?
the form is sending via jquery
$("body").click(function(event) {
if($(event.target).is(".send")) {
alert("Have you entered all Information?");
$("#standardform").trigger("click");
}
});
the is following:
<div class="infos"></div>
<div class="infoform form">
<select name="test" required>
<option value="">Please select</option>
<option value="jubi">1</option>
<option value="geb">2</option>
<option value="bef">3r</option>
</select>
<input class="required" type="radio" id="indoor" name="ort" value="indoor" required /><label for="indoor"> Indoor</label>
<input type="radio" id="outdoor" name="ort" value="outdoor" /><label for="outdoor"> Outdoor</label>
</section>
<textarea id="text"></textarea>
Name: <input type="text" id="name" required /><br />
E-Mail:<input type="email" id="email" required /><br /><br />
</div>
</div>
so the class infos is shown alwas, and if you click on it the class infoform is shown. I want to make infoform visible if a field is not set and the message "You have to fill out this field" should be shown there.
Thanks and best regards

You can use html required attribute to do this work. When button clicked, select every element that has required attribute. You can use css :required selector to select required element(input, textarea, select). After selecting elements, check value of selected element and if value is empty, alert displaying.
$("button").click(function(){
var hasEmpty = false;
$("*:required").each(function(index, element){
value = $(element).val();
if (value == "")
hasEmpty = true;
});
if (hasEmpty)
alert("Form is incomplete.");
else {
$(".infoform").hide();
alert("Form is complete.");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="infoform">
<div>
<label>Name</label>
<input type="text" name="name" required />
</div>
<br />
<div>
<label>Email</label>
<input type="email" name="email" required />
</div>
<br />
<div>
<label>Other info</label>
<textarea name="info" required></textarea>
</div>
<br />
<div>
<label>Age</label>
<select name="age" required>
<option value="">Please select</option>
<option value="age1">10-20</option>
<option value="age2">21-30</option>
<option value="age2">31-40</option>
</select>
</div>
<br />
<div>
<button>Check values</button>
</div>
</div>

Field only required if certain dropdown is selected in a HTML form

I was wondering how a certain field is required only if a certain dropdown is selected. In my form, the person would select "Canada" and two fields underneath will appear(province and postal code), which are required before person submits the form. And if the person selected "United States", the state and zip code will appear instead.
The trouble i am having is that if i choose either country, the fields that are not associated with that country are still required even though they are hidden. I need it so that if i choose United States, then province nor postal code would be required, and the same the other way around.
Any help is greatly appreciated:) Here is the form
<script type='text/javascript'>//<![CDATA[
$('select[name=country]').change(function () {
if ($(this).val() == 'Canada') {
$('#provinceselect').show();
$('#province').prop('required',true);
} else {
$('#provinceselect').prop('required',false);
$('#provinceselect').hide();
$('#province').prop('required',false);
}
});
$('select[name=country]').change(function () {
if ($(this).val() == 'Canada') {
$('#postalselect').show();
$('#postal').prop('required',true);
} else {
$('#postalselect').prop('required',false);
$('#postalselect').hide();
$('#postal').prop('required',false);
}
});
</script>
<!--HTML Form-->
<form action="PPPaymentForm/PPPaymentForm.php" method="post" name="topchoiceform" id="topchoiceform">
<input placeholder="Company Name" type="text" name="companyname">
<input placeholder="First Name" type="text" name="first_name" required>
<input placeholder="Last Name" type="text" name="last_name" required>
<input placeholder="Email" type="email" name="email" id="email" required>
<!--Country select-->
<select class="countrycss" id="country" name="country" required>
<option value="" selected="selected">Please Select Country</option>
<option value="Canada" id="Canada">Canada</option>
<option value="United States" id="United States">United States</option>
</select>
<!--Province select-->
<div id="provinceselect" style="display:none;">
<select class="provincecss" id="province" name="province" required>
<option value="" selected="selected">Please Select Province</option>
<option value="Alberta" id="Alberta">Alberta</option>
<option value="British Coloumbia" id="British Coloumbia">British Coloumbia</option>
</select>
</div>
<!--State select-->
<div id="stateselect" style="display:none;">
<select class="statecss" id="state" name="state">
<option value="" selected="selected">Please Select State</option>
<option value="Arkansas" id="Arkansas">Alaska</option>
<option value="Hawalli" id="Hawalli">Hawalli</option>
</select>
</div>
<!--Postal select-->
<div id="postalselect" style="display:none;">
<input placeholder="Postal Code" type="text" name="postal" required>
</div>
<!--Zip select-->
<div id="zipselect" style="display:none;">
<input placeholder="ZipCode" type="text" name="zip" required>
</div>
<input placeholder="City" type="text" name="city" required>
<input placeholder="Address" type="text" name="address1" required>
<input name="shipping" class="shipping" type="radio" id="shipping" checked/>
<label class="shippingcheck">$19.99 Shipping – DATABASE SENT ON CD ROM </label>
<br>
<input name="shipping" class="shipping" type="radio" id="noshipping" />
<label class="shippingcheck">FREE SHIPPING – DATABASE SENT VIA EMAIL</label>
<br>
<button name="submit" type="submit" id="submit">Pay Now</button>

You could use the .prop() method, so for each of your .change you will have something like
$('select[name=country]').change(function () {
if ($(this).val() == 'Canada') {
$('#provinceselect').show();
$('#provinceselect').prop('required',true);
} else {
$('#provinceselect').prop('required',false);
$('#provinceselect').hide();
}
});
I'm curious as to why you have four different instances of .change() I would have put them all under the same instance of change() since they are all reacting to the same thing.

Yeah, remove the required field from the optional fields and add them by using prop() method.

I want to validate a form field using a red border when field is empty or wrong field is entered

I want to validate this form using red border when the field is empty or if the user entered the wrong field.
I'd also like to disable the submit button when fields are invalid.
Note that there are other fields that are not mandatory like MOBILE and EMAIL (they can be submitted later in "edit user details"). Although if the wrong email is entered, I'd like to validate it also.
<form action="" method="POST">
<input type="date" name="date" placeholder="Registration Date" /></br>
<input name="full_names" type="text" placeholder="Full names" /></br>
<input name="mobile" type="text" placeholder="Mobile" /></br>
<span>Select status </span>
<select name="status">
<option value="Paid">Paid</option>
<option value="Unpaid">Unpaid</option>
</select></br>
<span>Select Chapter </span>
<select name="chapter">
<option value="Known">Known</option>
<option value="Unknown">Unknown</option>
</select></br>
<span>Select Gender </span>
<select name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></br>
<input type="text" name="email" placeholder="Email Address" /></br>
<textarea type="text" placeholder="Any Remarks" rows="2" name="remarks"></textarea></br>
<button type="submit">Submit </button>
</form>

HTML5 has a lot of this built in, with required attributes and the ability to provide a regex pattern attribute to validate against. Some is even built in, like when you use type="email" attribute instead of type="text".
Using HTML5 validation + CSS3, you can pick up on the :invalid state and apply styles to the elements in that state.
Although this does not apply the disabled state to the submit button, it does not submit the form if validation fails.
input,
textarea {
margin: 5px 0;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
input:invalid,
select:invalid,
textarea:invalid {
border-color: red;
}
<form action="" method="POST">
<input type="date" name="date" placeholder="Registration Date" required />
<br/>
<input name="full_names" type="text" placeholder="Full names" required />
<br/>
<input name="mobile" type="tel" pattern='[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}' placeholder="Mobile" title="+99(99)9999-9999" />
<!-- Pattern from: http://www.htmlgoodies.com/html5/tutorials/whats-new-in-html5-forms-email-url-and-telephone-input-types.html#fbid=UQp7PiVwsX2 -->
<br/>
<span>Select status </span>
<select name="status" required>
<option value="Paid">Paid</option>
<option value="Unpaid">Unpaid</option>
</select>
<br/>
<span>Select Chapter </span>
<select name="chapter" required>
<option value="Known">Known</option>
<option value="Unknown">Unknown</option>
</select>
<br/>
<span>Select Gender </span>
<select name="gender" required>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<br/>
<input type="email" name="email" placeholder="Email Address" />
<br/>
<textarea type="text" placeholder="Any Remarks" rows="2" name="remarks" required></textarea>
<br/>
<button type="submit">Submit</button>
</form>

javascript Form Submitting location

After the user submits a form, how do I make it so that the user will get a form back on their browser?
I know I need to use location.search
<form id="survey" name="survey">
First Name
<input type="text" id="first" name="first" required/><br><br>
Last Name
<input type="text" id="last" name ="last" required /><br><br>
# of Attendees
<input type="number" id="attend" name="attend" required /><br><br>
Email Address
<input type="email" id="email" name="email" required /><br><br>
Time of Arrival
<input type="text" id="time" name="time" required /> <br><br>
Spend the Night
<select id="night" name="night">
<option value=" "> </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<input type="submit" onclick="enter()"/>
</form>