drop down menu that changes the name of a form field - javascript

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>

Related

How can I disable submit button after required html5 return true on the javascript?

My html code like this :
<form>
<label for="name">* Name</label>
<input type="text" id="name" required><br>
<label for="name">* Address</label>
<input type="text" id="address" required><br>
<input type="submit" value="Submit">
</form>
I'm using required HTML5 attribute to validate fields.
If user does not input text, it will display HTML5 error.
I want to disable the submit button if any of the required fields are left empty.
How can I do it?
You can disable the pointer events on the button with CSS.
form:invalid>#submit {
pointer-events: none;
}
<form>
<label for="name">* Name</label>
<input type="text" id="name" required><br>
<label for="name">* Address</label>
<input type="text" id="address" required><br>
<input type="submit" value="Submit" id="submit">
</form>
You could also disable the button using Javascript.
function disableField() {
const invalidForm = document.querySelector('form:invalid');
const submitBtn = document.getElementById('submit');
if (invalidForm) {
submitBtn.setAttribute('disabled', true);
} else {
submitBtn.disabled = false;
}
}
disableField();
const inputs = document.getElementsByTagName("input");
for (let input of inputs) {
input.addEventListener('change', disableField);
}
<form>
<label for="name">* Name</label>
<input type="text" id="name" required><br>
<label for="name">* Address</label>
<input type="text" id="address" required><br>
<input type="submit" value="Submit" id="submit">
</form>
you can do it after true
$("#button").prop("disabled", true);
You can try something like this:
$(function() {
$("#input-text").keyup(function () {
if($("#input-text")[0].checkValidity()){
$('#submit-button').attr('disabled', 'disabled');
}else{
$('#submit-button').removeAttr('disabled');
}
});
})($);
<form id="newRecord">
<input type="text" required id="input-text"/>
<button form="newRecord" type="submit" id="submit-
button">Submit</button>
</form>
An more generic solution for multiple forms and supporting multiple inputs and buttons.
It detects the change event directly on forms individually, and then change the disabled attribute for all submit types
function disableFormSubmit(form) {
const buttons = form.querySelectorAll(
'button[type="submit"], input[type="submit"]'
);
const disableButtons = () =>
buttons.forEach(el => (el.disabled = form.matches(":invalid")));
form.addEventListener("change", disableButtons);
disableButtons();
}
document.querySelectorAll("form").forEach(disableFormSubmit);
<form action="/">
<legend>First form</legend>
<input type="text" required> <br>
<input type="Checkbox" required> required checkbox <br>
<input type="submit">
<button type="submit">Button submit</button>
</form>
<hr>
<form action="/">
<legend>Second form</legend>
<select required>
<option value="" disabled selected>Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select> <br>
<input type="radio" required name="radio"> required radio <br>
<input type="submit">
<button type="submit">Button submit</button>
</form>
Personally i would go on an solution using only CSS as a visual cue, unless you need the disabled attribute

Pass form data to redirected page - javascript - jQuery

<div class="box-wrapper">
<form method="POST" action="/cgi-bin/formmail/FormMail.pl">
<input type="hidden" name="recipient" value="mail123#gmail.com">
<input type="hidden" name="subject" value="Contact Form">
<input type="hidden" name="redirect" value="http://127.0.0.1/contact.html?formsubmit=success">
<input type="text" name="name" placeholder="Name" required="">
<input type="email" name="email" placeholder="Email Id" required="">
<input type="text" name="mobile" maxlength="10" placeholder="Mobile Number" id="number" required="">
<input name="service" list="services" placeholder="What service you need?" required>
<datalist id="services">
<option value="Web Design">Web Design</option>
<option value="Graphic Design">Graphic Design</option>
<option value="UI/UX Design">UI/UX Design</option>
<option value="Digita Marketing">Digital Mareketing</option>
<option value="Others">Others</option>
</datalist>
<textarea placeholder="Additonal detail" name="details" required=""></textarea>
<button type="submit" name="submit" id="submit-btn" onclick="thanksMsg()"><i class="fa fa-send"></i></button>
</form>
<div id="thanksmsg"></div>
</div>
This is my html code.I'm passing form data to my mail after submit. and redirecting to "http://127.0.0.1/contact.html?formsubmit=success". On this page i display thanks msg using jQuery.
<script type="text/javascript">
$(document).ready(function(){
var url = window.location.href;
var text = $('#form').find('input[name="name"]').val();
if(url == 'http://127.0.0.1:8887/contact.html?formsubmit=success'){
var name = $('#form').find('input[name="name"]').val();
$('#thanksmsg').append('<p>Hi'+text+', Thanks for reaching us out. <br>We will get back to you shortly 😉</p><div><a class="cta-btn">Back to home</a><a class="cta-btn">View our Portfolio<a></div>');
$('form').css('display', 'none');
}
});
</script>
here in thanks msg i wanted to show the name entered in input field. but as it gets redirected it doesn't appear. how to display the name?
Try to use cookies. At the form submit, write something like $.cookie('name', name). To recover you call $.cookie('name').
I'm not sure if it'll work, because in some cases the cookies are erased, but is easy to try.

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>

Clear all data and turn back to default settings

Goal:
When I clickon the clear all button and the data inside of the input box should be empthy and the dropdownlist should go back to default settings that is year 2009.
Problem:
I don't know how to do in order to make the dropdownlist to go back to default when you have pressed the button?
Info:
Please remember that I do not want to make any big changes in the current javascript/jquery sourcecode because it is used in production phase.
I would like to make a complementary to the current source code.
I tried using <input type="reset" value="Clear alll" name="clear_all"> but it doesn't work in long term with the current source code.
Thanks!
http://jsbin.com/qezesohake/edit?html,js,console,output
function df(data) {
$(data).find(':input').each(function () {
switch (this.type) {
case 'text':
case 'textarea':
$(this).val('');
break;
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action=""" method="post">
<fieldset>
<input id="aaa" type="text" value="" />
<input id="bbb" type="text" value="" />
<select id="year">
<option value="2010">2010</option>
<option value="2009" selected="selected">2009</option>
<option value="2008">2008</option>
</select>
</fieldset>
<input type="button" value="Clear alll" name="clear_all" onclick="df(this.form)" />
</form>
<form action="#" method="post">
<fieldset>
<input id="aaa" type="text" value="" />
<input id="bbb" type="text" value="" />
<select id="year">
<option value="2010">2010</option>
<option value="2009" selected="selected">2009</option>
<option value="2008">2008</option>
</select>
</fieldset>
<input type="reset" value="Clear alll" name="clear_all" onclick="doSomething()">
</form>
<script>
function doSomething(){
alert('Do something!');
}
</script>
You don't need any javascript to clear form instead just replace your input type to reset button
<input type="reset" value="Clear all" name="clear_all"/>
Reset button does not require any onClick event to be passed. It works automatically.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action=""" method="post">
<fieldset>
<input id="aaa" type="text" value="" />
<input id="bbb" type="text" value="" />
<select id="year">
<option value="2010">2010</option>
<option value="2009" selected="selected">2009</option>
<option value="2008">2008</option>
</select>
</fieldset>
<input type="reset" value="Clear alll" name="clear_all" />
</form>

Duplicate similar fields of the form on checked

I have a form in which I have a permanent address and correspondence address.
I want the user to enter the permanent address first and then give a checkbox stating if the correspondence address is the same as permanent address. I was able to fill the text boxes with javascript but not able to do it in selection i.e dropdown. How can I do that?
My code for form is:
<form action="" name="form1" >
<fieldset>
PERMANENT ADDRESS:<br />
<br/>
HOUSE/DOOR<input type="text" name="hno1" placeholder="HOUSE/DOOR NUM" required><br/>
STREET<input type="text" name="street1" placeholder="STREET" required><br/>
CITY<input type="text" name="city1" placeholder="CITY" required><br/>
DISTRICT<input type="text" name="district1" placeholder="DISTRICT" required> <br/>
STATE<select required name="state1">
<option>ANDHRA PRADESH</option>
<option>KARNATAKA</option>
</select><br />
COUNTRY<select name="country1" required>
<option>INDIA</option>
<option>USA</option>
</select><br />
PIN<input type="text" name="pin1" placeholder="PIN" required><br/><br />
CORRESPONDENT ADDRESS:<br />
<label for="adress same">Same as PERMANENT ADDRESS </label>
<input name="copy" type="checkbox" onclick="data_copy()"> <br />
<!--<select required>
<option>PERMANENT & CORRESPONDENT</option>
<option>RESPECTIVELY</option>
</select>-->
<br/>
HOUSE/DOOR <input type="text" name="hno11" placeholder="HOUSE/DOOR NUM" required><br/>
STREET<input type="text" name="street11" placeholder="STREET" required><br/>
CITY<input type="text" name="city11" placeholder="CITY" required><br/>
DISTRICT<input type="text" name="district11" placeholder="DISTRICT" required> <br/>
STATE<select name="state11" required>
<option>ANDHRA PRADESH</option>
<option>KARNATAKA</option>
</select><br/>
COUNTRY<select name="country11" required>
<option>INDIA</option>
<option>USA</option>
</select><br/>
PIN<input type="text" name="pin11" placeholder="PIN" required><br/><br />
</fieldset>
</form>
Is there a better way to assign this duplication of similar fields in form on checking the checkbox and I also want the fields to clear on deselecting the checkbox.
<select required>
<option>PERMANENT & CORRESPONDENT</option>
<option>RESPECTIVELY</option>
</select>
use onchange event for dropdown, like this,
<select required onChange="data_copy(this.value)">
<option value="1">PERMANENT & CORRESPONDENT</option>
<option value="2">RESPECTIVELY</option>
</select>
and then get the value of the selected option and perform action accordingly.
Here is the function to fill the value,
<script type="text/javascript">
function data_copy(str){
if(str=='1'){ // if this the case where both the addresses will be same
document.form1.hno11.value = document.form1.hno1.value;
document.form1.street11.value = document.form1.street1.value;
//.....
//... so on.. add fields this ways
}
}

Categories