Javascript if select 'other' then populate input field - javascript

I have a simple select drop down. What I am trying to do is have... The user select a insurance company name. However, if the user does not see the company they're with then I would like to have an 'other' option which will populate a input so that the user can manually type the insurance company in.
Where am I going wrong?
<h3><b>Insurance Information</b></h3>
<style> #InsuranceCompanyOther{display:none;}</style>
<script>$('p select[name=InsuranceCompany]').change(function(e){
if ($('p select[name=InsuranceCompany]').val() == ''){
$('#InsuranceCompanyOther').show();
}else{
$('#InsuranceCompanyOther').hide();
}
});</script>
<div class="control-group">
<label class="control-label">Insurance Comapny</label>
<div class="controls">
<select class="form-control" name="InsuranceCompany">
<option value="<?php echo !empty($InsuranceCompany)?$InsuranceCompany:'';?>"><?php echo !empty($InsuranceCompany)?$InsuranceCompany:'-- Select One --';?></option>
<option value="Allstate">Allstate</option>
<option value="State Farm">State Farm</option>
<option value="Farmers">Farmers</option>
<option value="Travelers">Travelers</option>
<option value="Safeco">Safeco</option>
<option value="USAA">USAA</option>
<option value="MetLife">MetLife</option>
<option value="Farm Bureau">Farm Bureau</option>
<option value="Gem State">Gem State</option>
<option value="Amica">Amica</option>
<option value="American Family">American Family</option>
<option value="">Other</option>
</select>
<div id="InsuranceCompanyOther">
<p>Please Specify: <label id="InsuranceCompanyOther"><input name="InsuranceCompany" type="text" placeholder="Input Insurance Company" size="50" /></label></p>
</div>
</div>
</div>
P.S. I dont believe this is worthy to down vote...

Coreections you need to do in your code are:
You javascript code should be in document.ready, as script is
getting loaded before html and in this it is attaching events to
element that is not on DOM yet.
The tag select[name=InsuranceCompany] is not within p tag
therefore remove p from jQuery selector.
Working Snippet:
$('document').ready(function() {
$('select[name=InsuranceCompany]').change(function(e) {
if ($('select[name=InsuranceCompany]').val() == '') {
$('#InsuranceCompanyOther').show();
} else {
$('#InsuranceCompanyOther').hide();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3><b>Insurance Information</b></h3>
<style>
#InsuranceCompanyOther {
display: none;
}
</style>
<div class="control-group">
<label class="control-label">Insurance Comapny</label>
<div class="controls">
<select class="form-control" name="InsuranceCompany">
<option value="<?php echo !empty($InsuranceCompany)?$InsuranceCompany:'';?>">
<?php echo !empty($InsuranceCompany)?$InsuranceCompany: '-- Select One --';?>
</option>
<option value="Allstate">Allstate</option>
<option value="State Farm">State Farm</option>
<option value="Farmers">Farmers</option>
<option value="Travelers">Travelers</option>
<option value="Safeco">Safeco</option>
<option value="USAA">USAA</option>
<option value="MetLife">MetLife</option>
<option value="Farm Bureau">Farm Bureau</option>
<option value="Gem State">Gem State</option>
<option value="Amica">Amica</option>
<option value="American Family">American Family</option>
<option value="">Other</option>
</select>
<div id="InsuranceCompanyOther">
<p>Please Specify:
<label>
<input name="InsuranceCompany" type="text" placeholder="Input Insurance Company" size="50" />
</label>
</p>
</div>
</div>
</div>
EDIT:
Include jQuery library in you code, example CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Related

Validate select with javascript before form submit

Am trying to check if a user has not selected any option from the select options list and then pass the error message to the user via a span id...else submit the form...I want javascript code that can check for empty selected index options for two select. Here is my code for that..
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post">
<label for="exampleInputSelect1">Select Your Stage</label>
<select class="form-control" name="course" id="course">
<option value=""></option>
<option value="Education">Education</option>
<option value="Information Technology">Information Technology</option>
<option value=" Computer Science">Computer Science</option>
</select>
<span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="course_err"></span>
</div><br/>
<div class="form-group">
<label for="exampleInputSelect2">Select Your Stage</label>
<select type="password" class="form-control" name="stage" id="stage">
<option value="Y1S1">Y1S1</option>
<option value="Y1S2">Y1S2</option>
<option value="Y2S1">Y2S1</option>
<option value="Y2S2">Y2S2</option>
<option value="Y3S1">Y3S1</option>
<option value="Y3S2">Y3S2</option>
<option value="Y4S1">Y4S1</option>
<option value="Y4S2">Y4S2</option>
</select>
<span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="stage_err"></span>
</div>
</form>
<button onclick="Check()" class="btn btn-info">Submit</button>
<script>
function Check(){
var c=document.getElementById("course");
var s=document.getElementById("stage");
if(c.options[c.selectedIndex].text==""){
document.getElementById("course_err").innerHTML="You have to select a course";
}else{
alert("form is ready to submit");
}
}
Am trying to check for empty selects and pevent submission until the user selects something from the option list..I need code to do that simultaneously for two selects, Thank you
There is a wrong variable x, to be changed to c:
function Check(){
var c=document.getElementById("course");
var s=document.getElementById("stage");
if(c.options[c.selectedIndex].text==""){
document.getElementById("course_err").innerHTML="You have to select a course";
}else if(s.options[s.selectedIndex].text==""){
document.getElementById("stage_err").innerHTML="You have to select a semester";
} else {
alert("form is ready to submit");
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post">
<label for="exampleInputSelect1">Select Your Stage</label>
<select class="form-control" name="course" id="course">
<option value=""></option>
<option value="Education">Education</option>
<option value="Information Technology">Information Technology</option>
<option value=" Computer Science">Computer Science</option>
</select>
<span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="course_err"></span>
</div><br/>
<div class="form-group">
<label for="exampleInputSelect2">Select Your Stage</label>
<select type="password" class="form-control" name="stage" id="stage">
<option value="Y1S1">Y1S1</option>
<option value="Y1S2">Y1S2</option>
<option value="Y2S1">Y2S1</option>
<option value="Y2S2">Y2S2</option>
<option value="Y3S1">Y3S1</option>
<option value="Y3S2">Y3S2</option>
<option value="Y4S1">Y4S1</option>
<option value="Y4S2">Y4S2</option>
</select>
<span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="stage_err"></span>
</div>
</form>
<button onclick="Check()" class="btn btn-info">Submit</button>

HTML form validation - check if at least one dropdown is selected

I'm struggling with the following issue - I have an HTML form in which there are three select fields. Before submitting values, I want to make a form validation in which at least ONE of the four dropdowns should be selected. I have the following code but it keeps requiring all the dropdowns.
Link to the code: jsfiddle
Code - HTML
<div class="container">
<div class="row">
<div class="col-lg-12">
<form method="post" id="myform">
<div class="form-group ">
<label class="control-label " for="select">
Select a Choice
</label>
<select class="select form-control" id="select1" name="select1" required>
<option value="">---</option>
<option value="First Choice">1</option>
<option value="Second Choice">2</option>
<option value="Third Choice">3</option>
</select>
<select class="select form-control" id="select2" name="select2" required>
<option value="">---</option>
<option value="First Choice">a</option>
<option value="Second Choice">b</option>
<option value="Third Choice">c</option>
</select>
<select class="select form-control" id="select3" name="select3" required>
<option value="">---</option>
<option value="First Choice">X</option>
<option value="Second Choice">Y</option>
<option value="Third Choice">Z</option>
</select>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" id="sub" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
Code - JS:
$(document).ready(function () {
$('#sub').click(function() {
check = $(".select option:selected").length;
if(!check) {
alert("You must select an option from at least one dropdown");
return false;
}
});
});
Where I make a mistake in the code?
Take a look at this
jsfiddle example
You need to remove the "required" attribute and manage required values using JS because if you set all combobox to required you'll be forced to fill all of them.
<div class="container">
<div class="row">
<div class="col-lg-12">
<form method="post" id="myform">
<div class="form-group ">
<label class="control-label " for="select">
Select a Choice
</label>
<select class="select form-control" id="select1" name="select1">
<option selected disabled value="">---</option>
<option value="First Choice">1</option>
<option value="Second Choice">2</option>
<option value="Third Choice">3</option>
</select>
<select class="select form-control" id="select2" name="select2">
<option selected disabled value="">---</option>
<option value="First Choice">a</option>
<option value="Second Choice">b</option>
<option value="Third Choice">c</option>
</select>
<select class="select form-control" id="select3" name="select3">
<option selected disabled value="">---</option>
<option value="First Choice">X</option>
<option value="Second Choice">Y</option>
<option value="Third Choice">Z</option>
</select>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" id="sub" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
JS code
$(document).ready(function () {
$('#sub').click(function() {
check = $('option[disabled]:selected').length;
if(check == 3) {
alert("You must select an option from at least one dropdown");
return false;
}
});
});
Hope it helps you
First, you must delete the required on your select tags. Then, use something like this in the jquery part:
$(document).ready(function () {
$('#sub').click(function() {
var anySelected = false;
$(".select option:selected").each(function(){
if(!$(this).val() == ""){
anySelected = true;
}
});
if(!anySelected) {
alert("You must select an option from at least one dropdown");
return false;
}
});
});
Here is a working fiddle.
Hope it helps!

Display a required text input when Other is selected

I need to add a text input that displayed only when the other is selected. And make this input required if it is shown. One thing more, I need to enter that input to the same table in the database. Can anyone help? Please!
<form action="" method="post">
<div class="row">`enter code here`
<div class="col-sm-8 col-sm-offs et-2">
<select class="form-control" name="country" id="country" required>
<option value="">Please select your country</option>
<option value="A">Country A</option>
<option value="B">Country B</option>
<option value="C">Country C</option>
<option value="Other">Other</option>
</select>
<button type="submit" class="btn btn-gpsingh">Next</a>
</div>
</div>
</form>
Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="row">
<div class="col-sm-8 col-sm-offs et-2">
<select class="form-control" name="country" id="country" required >
<option value="">Please select your country</option>
<option value="A">Country A</option>
<option value="B">Country B</option>
<option value="C">Country C</option>
<option value="Other">Other</option>
</select>
<input type ="text" id="country_other" style="display:none">
<button type="submit" class="btn btn-gpsingh">Next</a>
</div>
</div>
</form>
<script>
$("#country").change(function(){
var value = this.value;
if(value =='Other')
{
$("#country_other").show();
$("#country_other").prop('required',true);
$("#country_other").val('');
}
else
{
$("#country_other").hide();
$("#country_other").prop('required',false);
$("#country_other").val('');
}
});
</script>

2 Select with same options, alerting when it is already selected at the first Select

I'm having a hard time with this, basically I have 2 Select with same options. The 2 Select Inputs named as registrationdiscounttype1 and registrationdiscounttype2
So First I choose a discount for registrationdiscounttype1 then if I will add a discount for registrationdiscounttype2 if the option is already selected in discount number 1 it will show an error that will say the discount is already selected.
I've already made a javascript based on what I've search so far, but I can't make it work, can you help me what is wrong with my code, or what should I use?
This is the sample photo
// Change in Discount 2
$("#registrationdiscounttype2").unbind('change').bind('change', function()
if ($('#registrationdiscounttype2').closest('table').find('option[value=' + $('#registrationdiscounttype1').val() + ']:selected').length > 1)
{
alert('Discount is already selected, Please choose another one');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="form-group">
<label for="registrationdiscounttype1" class="col-sm-4 control-label">Discount 1: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype1" id="registrationdiscounttype1">
<option value="">Select Discount </option>
<?php foreach ($discounttypeData as $discounttype)
{
?>
<option value="<?php echo $discounttype['discounttype_id']; ?>"> <?php echo $discounttype['discounttype_name']; ?> </option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="registrationdiscounttype2" class="col-sm-4 control-label">Discount 2: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype2" id="registrationdiscounttype2">
<option value="">Select Discount </option>
<?php foreach ($discounttypeData as $discounttype)
{
?>
<option value="<?php echo $discounttype['discounttype_id']; ?>"> <?php echo $discounttype['discounttype_name']; ?> </option>
<?php
}
?>
</select>
</div>
</div>
u can try
$(document).ready(function(){
$("#registrationdiscounttype2").unbind('change').bind('change', function() {
if ($('#registrationdiscounttype2').val() == $('#registrationdiscounttype1').val())
{
alert('Discount is already selected, Please choose another one');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="registrationdiscounttype1" class="col-sm-4 control-label">Discount 1: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype1" id="registrationdiscounttype1">
<option value="">Select Discount </option>
<option value="1">1 </option>
<option value="2">2 </option>
</select>
</div>
</div>
<div class="form-group">
<label for="registrationdiscounttype2" class="col-sm-4 control-label">Discount 2: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype2" id="registrationdiscounttype2">
<option value="">Select Discount </option>
<option value="1">1 </option>
<option value="2">2 </option>
</select>
</div>
<div class="form-group" id="result">
</div>
Here you go with an example solution (if select element are siblings) https://jsfiddle.net/pvchxyup/1/
$('select').change(function(){
if($(this).val() === $(this).siblings('select').val() ){
console.log("Same value!!!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test5">Test 5</option>
</select>
<select>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test7">Test 7</option>
</select>
If your element are not siblings, then follow https://jsfiddle.net/pvchxyup/2/
$('select').change(function(){
if($('#select1').val() === $('#select2').val() ){
console.log("Same value!!!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="select1">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test5">Test 5</option>
</select>
</div>
<div>
<select id="select2">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test7">Test 7</option>
</select>
</div>
No need to use bind, simple and easy way to do that.
Try this:
$("#registrationdiscounttype2").change(function(){
if($(this).val()==$('#registrationdiscounttype1').val()){
alert("Already Selected");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="registrationdiscounttype1" class="col-sm-4 control-label">Discount 1: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype1" id="registrationdiscounttype1">
<option value="">Select Discount </option>
<option value="sel1">sel1</option>
<option value="sel2">sel2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="registrationdiscounttype2" class="col-sm-4 control-label">Discount 2: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype2" id="registrationdiscounttype2">
<option value="">Select Discount </option>
<option value="sel1">sel1</option>
<option value="sel2">sel2</option>
</select>
</div>

Chaining an input option after a select?

I'm wondering how I can chain an input box after chaining a selection in my form.
I'm using http://www.appelsiini.net/projects/chained to chain my selects and it works. However, I need to adjust this to also allow for the chaining of an input. In the below example it would be someone would choose an option such has an item has Strength on it then the select menu of value options then input the value. I'm trying to also incorporate into this where after those 3 options of item, controller, value are inputed the user has the option to filter more so another box appear with the same options of strength, agility, etc. http://jsfiddle.net/isherwood/XMx4Q/ is an example of work I used to incorporate this into my own work.
<form id="myform" name="myform" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<div>
<label for="searchterm">Name:</label>
<input type="text" name="searchterm">
</div>
<div>
<div class="chainedSelectFilter">
<select name="specificFilter" class="attribute">
<option value="" selected>Select a Filter</option>
<option value="strength">Has Strength</option>
<option value="agility">Has Agility</option>
<option value="spirit">Has Spirit</option>
<option value="stamina">Has Stamina</option>
</select>
<select name="specificFilter" class="valueController">
<option value=">" selected>></option>
<option value=">=">>=</option>
<option value="=">=</option>
<option value="<="><=</option>
<option value="<"><</option>
</select>
</div>
</div>
</div>
<div>
<label for="submit"></label>
<input type="submit" name="submit" value="Filter">
</div>
Code reference below shows how to accomplish this. Here is jsFiddle that shows it's working.
HTML
<form id="myform">
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="Type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value=""/>
</div>
</form>
JS
$('select').change(function () {
$(this).next('input').fadeIn();
});
$('body').on('keyup','input.chain',function () {
$(this).parent().next('div').fadeIn();
});

Categories

Resources