I am trying to hide/display label and textbox on the dropdown select.
So I No is selected, I dont want to display anything else
If 1 is selected, I want to display 1 label and 1 textbox
If 2 is selected, I want to display 2 label and 2 textbox
What am I doing incorrect?
<!DOCTYPE html>
<html>
<head>
<script>
function checkvalue(val)
{
if(val==="No")
{
document.getElementById('guest_label').style.display='none';
document.getElementById('guest_name1').style.display='none';
document.getElementById('guest_label').style.display='none';
document.getElementById('guest_name2').style.display='none';
}
else if(val==="1")
{
document.getElementById('guest_label').style.display='block';
document.getElementById('guest_name1').style.display='block';
}
else
{
document.getElementById('guest_label').style.display='block';
document.getElementById('guest_name1').style.display='block';
document.getElementById('guest_label').style.display='block';
document.getElementById('guest_name2').style.display='block';
}
}
</script>
</head>
<body>
<label for="guest_number">Any Guest: </label>
<select name="guest" onchange='checkvalue(this.value);'>
<option value="No" selected >No</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label for="guest_label" style='display:none'>Other Guest Name: </label>
<input type="text" name="guest_name" id="guest_name1" style='display:none'/>
<input type="text" name="guest_name" id="guest_name2" style='display:none'/>
</body>
</html>
Thanks
Change the second label tag from
<label for="guest_label" style='display:none'>Other Guest Name: </label>
to
<label id="guest_label" style='display:none'>Other Guest Name: </label>
Your JavaScript code will fail at document.getElementById('guest_label') .style.display='none'; when it it is not able to find element whose id is 'guest_label'.
document.getElementById('guest_label') will return null and we cannot call .style for null value.
Check the corrected one.
Unless the code you posted was incomplete, you have no element with id "guest_label". JS returned an error when it tried to reference a property of element with that id, which is a null.
You need to include IDs for guest_label1 and guest_label2, and then toggle guest_label2 of 1 is selected.
<script>
function checkvalue(val)
{
if(val=="No")
{
document.getElementById('guest_label1').style.display='none';
document.getElementById('guest_name1').style.display='none';
document.getElementById('guest_label2').style.display='none';
document.getElementById('guest_name2').style.display='none';
}
else if(val==="1")
{
document.getElementById('guest_label1').style.display='block';
document.getElementById('guest_name1').style.display='block';
document.getElementById('guest_label2').style.display='none';
document.getElementById('guest_name2').style.display='none';
}
else
{
document.getElementById('guest_label1').style.display='block';
document.getElementById('guest_name1').style.display='block';
document.getElementById('guest_label2').style.display='block';
document.getElementById('guest_name2').style.display='block';
}
}
</script>
</head>
<body>
<label for="guest_number">Any Guest: </label>
<select name="guest" onchange='checkvalue(this.value);'>
<option value="No" selected >No</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label id="guest_label1" for="guest_label" style='display:none'>Other Guest Name: </label>
<input type="text" name="guest_name" id="guest_name1" style='display:none'/>
<label id="guest_label2" for="guest_label" style='display:none'>Other Guest Name: </label>
<input type="text" name="guest_name" id="guest_name2" style='display:none'/>
</body>
</html>
Related
I have two input I need to show one of them based on the select box:
html code:
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div id="input_type1">
<input type="text" name="Numeric">
</div>
<div id="input_type2">
<input type="text" name="Percentage">
</div>
jQuery code:
$('#type-price').on('change',function(){
if($(this).val()=== "numeric"){
$("#input_type1").show();
$("#input_type2").hide();
}else if ($(this).val()=== "percentage"){
$("#input_type1").hide();
$("#input_type2").show();
}
});
Now it's totally fine like that but my issue I have php request when I show input_type1 then hide input_type2 the request pick up second one which is null so I need to delete the hide one at all form Dom tree!
You can empty the div which contain the input and you will have only one input in your DOM. On each change of select, it will fill the concerne div by the input html.
Also you'd used wrong selector, the # selector is for id and you have used an class in your HTML code.
The JQuery class selector is ..
function removeAll() {
$("#input_type1").html('');
$("#input_type2").html('');
}
removeAll();
$('#type-price').on('change',function(){
removeAll();
if ($(this).val() === "numeric"){
$("#input_type1").append('<input type="text" value="numeric">');
} else if ($(this).val() === "percentage"){
$("#input_type2").append('<input type="text" value="percentage">');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type-price">
<option value="" disabled selected>Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div id="input_type1">
<input type="text" value="numeric">
</div>
<div id="input_type2">
<input type="text" value="percentage">
</div>
Here is an example with one field.
$(function() {
$("#type-price").change(function(e) {
$(".input-type").fadeIn("slow").find("input").attr("name", $(this).val().toLowerCase());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div class="input-type" style="display: none;">
<input type="text">
</div>
Besides some syntax problem in your jQuery class selector, Thinking about performance, It's simply better to prevent the (non-visible) input from being sent.
Shorter coding and less dom manipulation.
$('#type-price').on('change',function(){
$('.input_type1').toggle($(this).val()=="numeric");
$('.input_type2').toggle($(this).val()=="percentage");
});
//To prevent the non-visible from being posted
//Eithr we check the form using submit handler or the button and prevent the
//from being sent do our stuff then send it...
$('#myForm').submit(function() {
$('input:hidden').attr('name', '');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div class="input_type1">
<input name="inp1" type="text" placeholder="1">
</div>
<div class="input_type2">
<input name="inp2" type="text" placeholder="2">
</div>
<input type="submit" value="Send">
</form>
I'm fairly new to JavaScript and I cant figure out why this won't work. My friend said to try use .click or .select to test for a click on the option but nether of them worked.
My html:
<body>
<form>General
<hr>Full Name:
<br>
<input Type="text" name="name">
<br>Gender:
<br>
<input type="radio" Name="gender" value="Male">Male
<input Type="radio" name="gender" value="female">Female
<br>Birthday:
<br>
<input type="text" name="bday" placeholder="mm/dd/yy">
<br>Email Adress:
<br>
<input type="text" name="email">
<br>PayPal address:
<br>
<input type="text" name="PayPal" placeholder="for when we start paying staff">
<br>Short Biography:
<br>
<textarea rows="4" cols="50"></textarea>
<br>
<br>Apply:
<hr>Username:
<br>
<input type="text" name="nick" placeholder="Your Ingame Name">
<br>What Rank Are You Applying For:
<br>
<select>
<option id="Dev" value="Developer">Developer</option>
<option id="Headadmin" value="HeadAdmin">Head Admin</option>
<option id="Headmod" value="HeadMod">Head Modetator</option>
<option id="Headbuilder" value="HeadBuilder">Head Builder</option>
<option id="admin" value="Admin">Admin</option>
<option id="mod" value="Moderator">Moderator</option>
<option id="builder" value="Builder">Builder</option>
</select>
<br>Why do WE want you (Rank you picked above):
<br>
<textarea rows="4" cols="50"></textarea>
<br>How Many Hours Can You Be On a day:
<br>
<input type="text" name="day">
<br>how many days can you be on a week:
<br>
<input type="text" name="week">
<br>have you been staff before?
<br>
<select>
<option value="yes">yes
<option value="no">no</select>
<br>Test:
<hr>
<div id="DevTest">Devtest</div>
<div id="admintest">admin test</div>
<div id="modtest">mod test</div>
<div id="HAtest">head admin test</div>
<div id="HMtest">head mod test</div>
<div id="HBtest">headbuilder test</div>
<div id="buildertest">buildertest</div>
<br>
<hr>
<textarea readonly rows="5" cols="30">Staff Contract: ---------------- 1. As a staff member, YOU, are represent the "Piggalot Gaming Network" both online and offline. this means; A. If WE, The "Piggalot Gaming Network" Community,</textarea>
<hr>
<input type="checkbox" value="test" required>by clicking this you agree to the staff contract
<br>
<input type="reset">
<input type="submit" value="Send Application">
</form>
My JavaScript:
$(document).ready(function(){
$("#Dev").Click(function(){
$("#DevTest").show();
$("#HAtest").hide();
$("#HMtest").hide();
$("#HBtest").hide();
$("#admintest").hide();
$("#modtest").hide();
$("#buildertest").hide();
});
$("#Headadmin").Click(function(){
$("#HAtest").show();
$("#DevTest").hide();
$("#HMtest").hide();
$("#HBtest").hide();
$("#admintest").hide();
$("#modtest").hide();
$("#buildertest").hide();
});
});
Here the link to a Fiddle of it: http://jsfiddle.net/a2nw2sus/1/
<option> does not work that way. Listen for a change in <select> instead:
$('#id_for_your_select').change(function () {
var selected_value = $(this).val();
switch (selected_value) {
case 'Developer': {
// do something
break;
}
case 'HeadAdmin': {
// do something else
break;
}
}
});
In http://jsfiddle.net/a2nw2sus/2/ I fixed the spelling error (click() vs Click()), and lo: it does not work in Chrome. In Firefox it works, but you must not take this for granted!
You don't select options like you have. You're meant to give your select menu a reference (ID/class/name) and select that instead.
<select id="mySelectMenu">
<option value="Developer">Developer</option>
<option value="HeadAdmin">Head Admin</option>
<option value="HeadMod">Head Modetator</option>
<option value="HeadBuilder">Head Builder</option>
<option value="Admin">Admin</option>
<option value="Moderator">Moderator</option>
<option value="Builder">Builder</option>
</select>
If you just want to detect a click on the select:
$('#mySelectMenu').click(function() {
var currentValue = $(this).find(":selected").val();
console.log("The current selected option is "+ currentValue +".");
});
or maybe you want to get value of the select after a change was detected:
$('#mySelectMenu').on('change', function() {
var selectedValue = $(this).val();
if (selectedValue === "Dev") {
$("#DevTest").show();
$("#HAtest, #HMtest, #HBtest, #adminTest, #modtest, #buildertest").hide();
} else if (selectedValue === "HeadAdmin") {
$("#HAtest").show();
$("#DevTest, #HMtest, #HBtest, #adminTest, #modtest, #buildertest").hide();
}
});
I doing a form for a small project, and having a trouble trying to validate the select option
hope someone can help
THanks in advance
HTML:
<form method="post" name="vehicleform" action=" " onSubmit="return (validateForm())">
First Name: <input type="text" name="fname"><br>
Last Name: <input type="text" name="lname"><br>
Phone Number <font size="1px">(ex. 123-456-7890)</font>: <input type="text" name="phonenumber"><br>
Location
<select name="location">
<option value="-1">Select one..</option>
<option value="lota">Lot A</option>
<option value="lotb">Lot B</option>
<option value="lotc">Lot C</option>
</select><br>
JS:
function validateForm(){
var d = document.forms['vehicleform']['location'].value;
if( document.vehicleform.location.value == "-1" )
{
alert("Please select your location");
return false;
}
}
There is no need for grouping in the listener, and passing this gives immediate access to the form:
<form ... onsubmit="return validateForm(this)">
You only need to check the selected index to see if something other than the first option (or no option all) is selected:
function validateForm(form) {
if (form.location.selectedIndex < 1) {
alert("Please select your location");
return false;
}
}
And as suggested in the comments, make the first option selected by default:
<select name="location">
<option value="-1" selected>Select one..
<option value="lota">Lot A
as browsers may not make any option selected by default and users won't see "Select one...". That should be a label anyway to assist with accessiblity.
http://jsfiddle.net/LVBSZ/1/
You have no submit button in your code and close tag for form. The other works for me
<script>
function validateForm() {
if (document.forms['vehicleform'].location.value == "-1") {
alert("Please select your location");
return false;
}
}
</script>
<form method="post" name="vehicleform" onSubmit="return validateForm()">
First Name:
<input type="text" name="fname">
<br>Last Name:
<input type="text" name="lname">
<br>Phone Number <font size="1px">(ex. 123-456-7890)</font>:
<input type="text" name="phonenumber">
<br>Location
<select name="location">
<option value="-1">Select one..</option>
<option value="lota">Lot A</option>
<option value="lotb">Lot B</option>
<option value="lotc">Lot C</option>
</select>
<br>
<input type="submit" value="Submit">
</form>
The problem is that when I close the browser and test it again it does show the value, but when I refresh the page it doesn't show to the user the values already chosen previously,but the localStorage have the data stored.
<form id="suspendedProperties">
<label for="stationDropdown">Select Station:</label>
<select name="stationDropdown" id="stationDropdown" onChange="storeLocalContent(this.id,this.value)" >
<option value="50028000">Tanama River</option>
<option value="50010500">Rio Guajataca, Lares</option>
<option value="60008002">Example River2</option>
<option value="60008003">Example River3</option>
<option value="60008004">Example River4</option>
</select>
<label for="sampleMediumDropdown">Select Sample Medium:</label>
<select name="sampleMediumDropdown" id="sampleMediumDropdown" onChange="storeLocalContent(this.id,this.value)">
<option value="WS">WS(Surface Water)</option>
<option value="WSQ">WSQ(Surface Water QC)</option>
</select>
<label for="date">Begin Date:</label>
<input naem="date" id="beginDate" type="date" onChange="storeLocalContent(this.id,this.value)" />
<label for="hydroEvent">Hydrologic Event:</label> <select name="hydroEvent" id="hydroEvent" onChange="storeLocalContent(this.id,this.value)" >
<option value="4">4- stable, low stage</option>
<option value="5">5- falling stage</option>
<option value="6">6- stable, high stage</option>
<option value="7">7- peakstage</option>
<option value="8">8- rising state</option>
<option value="9" selected>9- stable, normal stage</option>
<option value="A">A- Not Determined</option>
<option value="X">X- Not applicable</option>
</select>
<label for="containerCuantity">Add: </label><input type="number" min="1" value="1" id="containerCuantity"onChange="storeLocalContent(this.id,this.value)"/>
<select id="singleMultiContainer"name="singleMultiContainer" onChange="storeLocalContent(this.id,this.value)">
<option value="single">Single container sample</option>
<option value="multi">Multiple sets container</option>
</select>
<h4 >Analyses Requested:(Applies to all samples)</h4>
<label for="analysesC">Concentration</label><input type="checkbox" name="analysis" id="analysesC" value="C" onChange="isChecked(this.id,this.value)"/>
<label for="analysesSF">Sand-Fine break**</label><input type="checkbox" name="analysis" id="analysesSF" value="SF"onChange="isChecked(this.id,this.value)"/>
<label for="analysesSA">Sand Analysis**</label><input type="checkbox" name="analysis" id="analysesSA"value="SA" onChange="isChecked(this.id,this.value)"/>
<label for="analysesT">Turbidity</label><input type="checkbox" name="analysis" id="analysesT" value="T" onChange="isChecked(this.id,this.value)"/>
<label for="analysesLOI">Loss-on-ignition**</label><input type="checkbox" name="analysis" id="analysesLOI" value="LOI" onChange="isChecked(this.id,this.value)"/>
<label for="analysesDS">Dissolved Solids</label><input type="checkbox" name="analysis" id="analysesDS"value="DS" onChange="isChecked(this.id,this.value)"/>
<label for="analysesSC">Specific Conductance</label> <input type="checkbox" name="analysis" id="analysesSC" value="SC" onChange="isChecked(this.id,this.value)"/>
<label for="analysesZ">Full-size fractions**</label><input type="checkbox" name="analysis" id="analysesZ"value="Z" on onChange="isChecked(this.id,this.value)"/>
</form>
This is my localStrg.js:
var ls = window.localStorage;
function initialize(){
//Check if browser supports localStorage
if(!Modernizr.localstorage){
alert("Your browser will not store data, please change or update your current browser");
return false;
}
if(ls.length!= 0){
for(i=0;i<ls.length;i++){
getData(ls.key(i));
alert(ls.key(i));
}
}
}
function storeData(id,value){
ls.setItem('#'+id,value);
alert("Item saved"+' '+'#'+id);
}
function getData(id){
$(id).val(ls.getItem(id));
$(id).selectmenu('refresh');
}
$(document).ready(function(e) {
initialize();
});
All I want to do is to show the user the values he have chosen previously in their respective fields.
Example, if he chose option 4 in the dropdown and he refresh the page he should see option 4 already in the dropdown not option 1.
The code it's OK, the mistake is when I initialize JQuery Mobile:
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="localStorage.js"></script>
That gives me all the defaults value from JQuery and then it loads my values from the localStorage. All I had to do is change the script of localStorage.js before initializing jquery mobile.
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="localStorage.js"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
You can find a more detailed explanation here
I am trying to add some form content depending on the option selected by a user.
For example if the user selects form 1 option the form is populated with different content that if the user selects option 2
<select>
<option>Form 1</option>
<option>Form 2</option>
</select>
<form>
Here we get either form 1 content or form 2 content depending on the select option selected by user.
</form>
//Form 1 content
<input type="text" value="something" />
<input type hidden="something here" />
//Form 2 content
<input type="text" value="something else here" />
<input type hidden="something else here" />
How can I do this using jquery?
Try this: http://jsfiddle.net/QUbEE/1/
$('select').change(function () {
if ($('option:selected', this).val() == 1) {
//$('form').hide();
$('#form-1').html($('<input />').attr({
'id': 'textBox1',
'value': 'Something is here'
}));
} else {
$('#form-1').html($('<input />').attr({
'id': 'textBox2',
'value': 'Something ELSE is here'
}));
}
});
Create elems depends on the change event and then just replace the html of the form with the new input with new values.
As you mentioned in your comment that the content can be hard-coded then you may write both the forms and place that forms in different divs and toggle the visibility of the div depending upon the selection made from the drop-down list
For example, say your form 1 is in div1
<div id="div1" class="formDiv">
<input type="text" id="form1" value="something" />
<input type hidden="something here" />
</div>
And your form2 is in div2
<div id="div2" class="formDiv">
<input type="text" id="form2" value="something" />
<input type hidden="something here" />
</div>
In your CSS hide both the div (using class -- as example)
.formDiv {
display: none;
}
Say your drop-down looks like this
<select id="selectForm">
<option value="div1">Form 1</option>
<option value="div2">Form 2</option>
</select>
Now when the user select from the drop-down list at that point change the visibility of the divs
$('#selectForm').on('change',function(){
$('.formDiv').hide();
var formID = $('#selectForm').val();
$(formID).css('display', 'block');
});
This is just an example, you can give your own IDs and CLASSes as per the feasibility and efficiency.
Hope this helps
I would suggest you to keep it with two separated forms. And leave them visible! So then with javascript you can hide both forms and show the relevant one. This way if the browser does not support javascript the forms will still be usable:
<select id="toggle-forms">
<option value="1">Form 1</option>
<option value="2">Form 2</option>
</select>
<form id="form-1" class="form-to-toggle" acvtion="" method="">
<input type="text" value="something" />
<input type hidden="something here" />
<input type="submit" value="submit form 1"/>
</form>
<form id="form-2" class="form-to-toggle" acvtion="" method="">
<input type="text" value="something" />
<input type hidden="something here" />
<input type="submit" value="submit form 2"/>
</form>
<script>
$('#toggle-forms').on('change', function() {
$('.form-to-toggle').hide();
$('#form-'+this.value).show();
}).change();
</script>
See it in action: http://jsbin.com/iwocid/1
Something like this? When you chose option form 2 you will add testing to the input in form 2
<select>
<option value="1">Form 1</option>
<option value="2">Form 2</option>
</select>
//Form 1 content
<input type="text" id="form1" value="something" />
<input type hidden="something here" />
$('select').on('change',function(){
$('input#form'+this.value).val('testing');
});
Add an id to form. THen use document.getElementById('idname').innerHTML to fill value
I would suggest this(as discussed with u)
<select id='this'>
<option value="Form_1">Form 1</option>
<option value="Form_2">Form 2</option>
</select>
<form id='Form_1' style='display:none'>
form1 content
</form>
<form id='Form_2' style='display:none'>
form2 content
</form>
and js
$(document).ready(function() {
$('#this').change(function () {
var form = $('#this').val();
$('#'+form).show();
});
});