getelementbyid Multiple ID display [duplicate]

getelementbyid Multiple ID display [duplicate] - javascript

This question already has answers here:
How to select next sibling of a certain type with JS?
(3 answers)
Closed 4 years ago.
I have a drop down where once a subject is clicked it opens selected fields on a list. Is it possible to display two or multiple div's from one click?
Here is my current code;
<script type="text/javascript">
function showfield(name){
if(name=='Hijacking')document.getElementById('div1').innerHTML='Registration:
<input type="text" name="reg" />' +
'Make: <input type="text" name="make" /> ' + 'Model: <input
type="text" name="model" />';
else document.getElementById('div1').innerHTML='';
if document.getElementById('div2').innerHTML='Name: <input type="text
="name" />';
else document.getElementById('div2').innerHTML='';
}
</script>
<select name="travel_arriveVia" id="travel_arriveVia" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="Hijacking">Hijacking</option>
<option value="Theft">Theft</option>
<option value="Overdue Rental">Overdue Rental</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>
<div id="div2"></div>
So I have tried this;
if(name=='Hijacking')document.getElementById('div1' 'div2').innerHTML='Registration: <input type="text" name="reg" />' +
'Make: <input type="text" name="make" /> ' + 'Model: <input type="text" name="model" />';
else document.getElementById('div1').innerHTML='';
What my aim is is to have div1 and div2 show when lets say hijacking is selected, the reason is that lets say div 2 has common fields in other selections in my dropdown
Second Attempt:
<script type="text/javascript">
$('select[name="travel_arriveVia"]').change(function(){
if ($(this).val() == "Hijacking"){
$("#div1, #div2).show();
}
});
</script>
<select name="travel_arriveVia" id="travel_arriveVia" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="Hijacking">Hijacking</option>
<option value="Theft">Theft</option>
<option value="Overdue Rental">Overdue Rental</option>
<option value="Other">Other</option>
</select>
<div class="Hijacking" id="div1" style="display:none;">
Registration: <input type="text" name="reg" /> Make: <input type="text" name="make" /> Model: <input type="text" name="model" />
</div>
<div class="Hijacking" id="div2" style="display:none;">
More html
</div>

Using jQuery
As a reference: https://jquery.com/
You could change your code using jQuery.
Here is a working example: https://jsfiddle.net/8a20rkwt/
In your head section include jquery like so:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
Then use it like so to show multiple elements by id with one click:
<script>
$(function() {
$('#travel_arriveVia').change(function(){
$(".Hijacking").hide();
if ($(this).val() == "Hijacking"){
$("#div1, #div2").show();
}
});
});
</script>
In your html:
<select name="travel_arriveVia" id="travel_arriveVia">
<option selected="selected">Please select ...</option>
<option value="Hijacking">Hijacking</option>
<option value="Theft">Theft</option>
<option value="Overdue Rental">Overdue Rental</option>
<option value="Other">Other</option>
</select>
<div class="Hijacking" id="div1" style="display:none;">
Registration: <input type="text" name="reg" /> Make: <input type="text" name="make" /> Model: <input type="text" name="model" />
</div>
<div class="Hijacking" id="div2" style="display:none;">
More html
</div>
More details about the jQuery change event handler are here: https://api.jquery.com/change/

Related

Show or hide a div on selection of dropdown and radio buttion

I am trying to write a jQuery where a div is to be shown if a specific option is chosen from dropdown and a specific radio button is clicked. But I am unable to do so.
Html
<pre><code>
<html>
</body>
<select name="Location of positive event" id="dropdown">
<option value="home">At home</option>
<option value="commute">On my commute</option>
<option value="work">At work</option>
<option value="outside">On the street</option>
<option value="other">Other</option>
</select>
<label>
Morning
<input name="time-radio" type="radio" value="1">
</label>
<label>
Evening
<input name="time-radio" type="radio" value="2">
</label>
<div id="test">
<label>
<input name="test1" value="test!" type="checkbox">
Test1
</label>
<label>
<input name="test1" value="test#" type="checkbox">
Test1
</label>
</div>
</body>
</html>
</code></pre>

Can you please check the below code? Hope it will work for you. We are creating a jquery code for hiding and show a div which is having id = test, we are adding a class name div and hide it on default. It will be shown when the “AT Work” option is selected from the dropdown and also shown when you click the “Evening” radio button. You can adjust it according to your requirement.
Please refer to this link: https://jsfiddle.net/yudizsolutions/xayb9h1p/
$(document).ready(function() {
$("select").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
}
});
}).change();
});
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box2").not(targetBox).hide();
$(targetBox).show();
});
});
.box,
.box2 {
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<pre><code>
<html>
<body>
<select name="Location of positive event" id="dropdown">
<option>Select</option>
<option value="home">At home</option>
<option value="commute">On my commute</option>
<option value="work">At work</option>
<option value="outside">On the street</option>
<option value="other">Other</option>
</select>
<label>
Morning
<input name="time-radio" type="radio" value="1">
</label>
<label>
Evening
<input name="time-radio" type="radio" value="2">
</label>
<div id="test" class="box work ">
<h2>for Dropdown</h2>
<label>
<input name="test1" value="test!" type="checkbox">
Test1
</label>
<label>
<input name="test1" value="test#" type="checkbox">
Test2
</label>
</div>
<div id="test1" class="box2 2">
<h2>for Radio Button</h2>
<label>
<input name="test3" value="test!" type="checkbox">
Test3
</label>
<label>
<input name="test4" value="test#" type="checkbox">
Test4
</label>
</div>
</body>
</html>

I need to show different inputs with every different choices and need to the others to remain hidden

I need to show a combo box and hide other inputs and show them only when I select one of the options.
I tried this, but they don't show at all when I select something.
Tried all the thing I saw online, but they didn't solve my problem at all, I don't know why;
function showDiv() {
getSelectValue = document.getElementById("hidden").value;
if (getSelectValue == "1") {
document.getElementById("hidden").style.display = "block";
} else {
document.getElementById("hidden").style.display = "none";
}
}
<select id="select-styled">
<option selected value="">Nessuna selezione</option>
<option value="ds">Disposizioni semplici</option>
<option value="dr">Disposizioni ripetizione</option>
<option value="cs">Combinazoni semplici</option>
<option value="cr">Combinazoni ripetizione</option>
<option value="ps">Permutazioni semplici</option>
<option value="pr">Permutazioni ripetizione</option>
<option value="gs">Gestione stringa</option>
</select>
</div>
<br>
<div id="hidden" style="width:200px;" onchange="showDiv()">
<label for="nTextField">Inserire n</label><br>
<input type="text" name="textField" class="textField" id="nTextField"><br><br>
<label for="kTextField">Inserire k</label><br>
<input type="text" name="textField" class="textField" id="kTextField"><br><br>
<label for="answerTextField">Ecco la risposta</label><br>
<input type="text" name="textField" class="textField" id="answerTextField"><br><br>
<input type="text" name="textField" class="stringManagement" id="stringManagement">
</div>

You need to add onchange function on the select tag, not the div
function showDiv() {
var x = document.getElementById("select-styled").value;
if(x != "") {
document.getElementById("myDiv").style.display = "block";
// or any desired code...
}
}
<select id="select-styled" onchange="showDiv()">
<option selected value="">Nessuna selezione</option>
<option value="ds">Disposizioni semplici</option>
<option value="dr">Disposizioni ripetizione</option>
<option value="cs">Combinazoni semplici</option>
<option value="cr">Combinazoni ripetizione</option>
<option value="ps">Permutazioni semplici</option>
<option value="pr">Permutazioni ripetizione</option>
<option value="gs">Gestione stringa</option>
</select>
<br>
<div class="hidden" id="myDiv" style="width:200px; display:none">
<label for="nTextField">Inserire n</label><br>
<input type="text" name="textField" class="textField" id="nTextField" ><br><br>
<label for="kTextField">Inserire k</label><br>
<input type="text" name="textField" class="textField" id="kTextField" ><br><br>
<label for="answerTextField">Ecco la risposta</label><br>
<input type="text" name="textField" class="textField" id="answerTextField" ><br><br>
<input type="text" name="textField" class="stringManagement" id="stringManagement">
</div>

<select id="select-styled" onchange="showDiv()">
<option selected value="">Nessuna selezione</option>
<option value="ds">Disposizioni semplici</option>
<option value="dr">Disposizioni ripetizione</option>
<option value="cs">Combinazoni semplici</option>
<option value="cr">Combinazoni ripetizione</option>
<option value="ps">Permutazioni semplici</option>
<option value="pr">Permutazioni ripetizione</option>
<option value="gs">Gestione stringa</option>
</select>
<br>
<div id="hidden" style="width:200px; display:none" >
<label for="nTextField">Inserire n</label><br>
<input type="text" name="textField" class="textField" id="nTextField" ><br><br>
<label for="kTextField">Inserire k</label><br>
<input type="text" name="textField" class="textField" id="kTextField" ><br><br>
<label for="answerTextField">Ecco la risposta</label><br>
<input type="text" name="textField" class="textField" id="answerTextField" ><br><br>
<input type="text" name="textField" class="stringManagement" id="stringManagement">
</div>
<script>
function showDiv() {
document.getElementById("hidden").style.display = "block";;
}
</script>

how to enable /disable form field based on selection using php

I am create the form with for online course. if the existing student refer the student means they will get the money.
My form contain Name,Mobile No,Email Id
Give your referral details as drop down.
Eg: i select 2 in the drop-down means it show the 2 rows form data again
Referral form value contain Name,Mobile No,City,Course Name.
Based on the selection i need to show and hide multiple form fields and
I need put validation and Mobile,City and Course is mandatory field.
Then,I need to capture the refers name and assign the students are created by referrer.
When i select refer as 2 it shows the field value two times how to do it. How to put validation
$(document).ready(function(){
$('select#select_btn').change(function(){
var sel_value = $('option:selected').val();
if(sel_value==0)
{
//Resetting Form
//$("#form_submit").empty();
//$("#form1").css({'display':'none'});
}
else{
//Resetting Form
//$("#form_submit").empty();
//Below Function Creates Input Fields Dynamically
create(sel_value);
//appending submit button to form
$("#form_submit").append(
$("<input/>",{type:'submit', value:'Sumbit'})
)
}
});
function create(sel_value){
for(var i=1;i<=sel_value;i++)
{
$("div#form1").slideDown('slow');
$("div#form1").append(
$("#form_submit").append(
$("<div/>",{id:'head'}).append(
$("<h3/>").text("Refer Form"+i)),
$("<h7/>").text("Name: "),
$("<input/>", {type:'text', placeholder:'Name', name:'name_'+i}),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("Mobile No: "),
$("<input/>", {type:'text', placeholder:'Mobile', name:'mobile'+i}),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("Email: "),
$("<input/>", {type:'email', placeholder:'Email', name:'email_'+i}),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("City: "),
$("<select>").append('<option val="0">--Select--</option>','<option val="1">One</option>','<option val="2">Two</option>','<option val="3">Three</option>','<option val="4">Four</option>','<option val="5">Five</option>'),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("Course: "),
$("<select>").append('<option val="0">--Select--</option>','<option val="1">One</option>','<option val="2">Two</option>','<option val="3">Three</option>','<option val="4">Four</option>','<option val="5">Five</option>'),
$("<hr/>"),
$("<br/>")
))
}
}
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class ="container">
<div id="form1">
<form id="form_submit" action="#" method="post">
<p>Name:
<input type="text" name="Name" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p> Refer:
<div id="selected_form_code">
<select id="select_btn">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
<!-- dynamic Registration Form Fields Creates here-->
</form>
</div>
<!------ right side advertisement div ----------------->
</div>
<?Php
print_r($_REQUEST);
?>
when i select the refer as 2 and then it shows refer form fields 2 times.... i change refer field from 2 to 1 it shows one times of refer field.But,Now its show 3 times(2+1). How to do it....Where i did wrong????

$(document).ready(function(e) {
$("#select_btn").val('0');
$('#select_btn').change(function(e) {
var selno = $(this).val();
$('#input').empty();
for(i=0; i < selno; i++ ){
$('#input').append('<div class="input'+i+'"><h2>'+(i+1)+'</h2><p> Name: <input type="text" name="name" /> </p> <p> Mobile:<input type="text" name="mob" /></p><p>Email:<input type="text" name="email" /></p><p>City: <select id="city" name="City"><option value="Mumbai">Mumbai</option><option value="Chennai">Chennai</option><option value="Delhi">Delhi</option><option value="Jammu">Jammu</option><option value="Ooty">Ooty</option></select></p><p>Course: <select id="course" name="Course"><option value="B.com">B.com</option><option value="B.A">B.A</option><option value="MBA">MBA</option><option value="B.Sc">B.Sc</option><option value="BCA">BCA</option></select></p></div>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Toggle fields based on form values</h1>
<p>Change the age field and see what happens</p>
<div id="form1">
<form id="form_submit" action="#" method="post">
<p>Name:
<input type="text" name="Name" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Refer:
<select id="select_btn" name="refer" value="0">
<option value="0">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<div id="input">
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>
</div>

$(document).ready(function(e) {
$('#select_btn').change(function(e) {
var selno = $(this).val();
$('.input').remove();
for(i=0; i < selno; i++ ){
$('#input').append('<div class="input'+i+'"><p> Name: <input type="text" name="name" /> </p> <p> Mobile:<input type="text" name="mob" /></p><p>Email:<input type="text" name="email" /></p><p>City: <select id="city" name="City"><option value="Mumbai">Mumbai</option><option value="Chennai">Chennai</option><option value="Delhi">Delhi</option><option value="Jammu">Jammu</option><option value="Ooty">Ooty</option></select></p><p>Course: <select id="course" name="Course"><option value="B.com">B.com</option><option value="B.A">B.A</option><option value="MBA">MBA</option><option value="B.Sc">B.Sc</option><option value="BCA">BCA</option></select></p></div>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Toggle fields based on form values</h1>
<p>Change the age field and see what happens</p>
<div id="form1">
<form id="form_submit" action="#" method="post">
<p>Name:
<input type="text" name="Name" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Refer:
<select id="select_btn" name="refer">
<option >select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<div id="input">
<div class="input">
<p> Name:
<input type="text" name="name" />
</p>
<p> Mobile:
<input type="text" name="mob" />
</p>
<p>Email:
<input type="text" name="email" />
</p>
<p>City:
<select id="city" name="City">
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Jammu">Jammu</option>
<option value="Ooty">Ooty</option>
</select>
</p>
<p>Course:
<select id="course" name="Course">
<option value="B.com">B.com</option>
<option value="B.A">B.A</option>
<option value="MBA">MBA</option>
<option value="B.Sc">B.Sc</option>
<option value="BCA">BCA</option>
</select>
</p>
</div>
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>
</div>

Multi page webform validation

Problem:
I have created a webform in Business Catalyst which I have customized so that I have multiple instances of it on a static page.
First I created several divs that will contain parts of the form:
<form name="catwebformform23079" method="post" onsubmit="return checkWholeForm23079(this)" enctype="multipart/form-data" action="/FormProcessv2.aspx?WebFormID=446040&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}"> <span class="req">*</span> Required
{module_ccsecurity}
<div class="web1"><label for="CAT_Custom_1433316">ARRIVAL <span class="req">*</span>
</label>
<br />
<input type="text" name="CAT_Custom_1433316" id="dpd1" class="cat_textbox" readonly="readonly" onfocus="displayDatePicker('CAT_Custom_1433316');return false;" />
<label for="CAT_Custom_1433317">DEPARTURE <span class="req">*</span>
</label>
<br />
<input type="text" name="CAT_Custom_1433317" id="dpd2" class="cat_textbox" readonly="readonly" onfocus="displayDatePicker('CAT_Custom_1433317');return false;" />
<label for="CAT_Custom_1433318">Bedrooms: <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433318" id="CAT_Custom_1433318" style="width:100%;" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<label for="CAT_Custom_1433319">Adults <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433319" id="CAT_Custom_1433319" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></div>
<div class="web2"> <label for="CAT_Custom_1433320">Children <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433320" id="CAT_Custom_1433320" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<label for="CAT_Custom_1433321">Pets <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433321" id="CAT_Custom_1433321" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<label for="CAT_Custom_1433324">Parking <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433324" id="CAT_Custom_1433324" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="Yes">Yes</option>
<option selected="selected" value="No">No</option>
</select>
</div>
<div class="web3"><label for="CAT_Custom_1433322">Name <span class="req">*</span>
</label>
<br />
<input type="text" maxlength="4000" name="CAT_Custom_1433322" id="CAT_Custom_1433322" class="cat_textbox" />
<label for="CAT_Custom_1433323">Surname <span class="req">*</span>
</label>
<br />
<input type="text" maxlength="4000" name="CAT_Custom_1433323" id="CAT_Custom_1433323" class="cat_textbox" />
<label for="WorkPhone">Work Phone Number <span class="req">*</span>
</label>
<br />
<input type="text" name="WorkPhone" id="WorkPhone" class="cat_textbox" maxlength="255" />
<label for="EmailAddress">Email Address <span class="req">*</span>
</label>
<br />
<input type="text" name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" />
<input class="cat_button" type="submit" value="Submit" id="catwebformbutton" />
</div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js?vs=b1677.r461496-phase1"></script>
<script type="text/javascript" src="/CatalystScripts/Java_DatePicker.js?vs=b1677.r461496-phase1"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount23079 = 0;
function checkWholeForm23079(theForm) {
var why = "";
if (theForm.WorkPhone) why += isEmpty(theForm.WorkPhone.value, "Work Phone Number");
if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
if (theForm.CAT_Custom_1433316) why += checkDate(theForm.CAT_Custom_1433316.value, "ARRIVAL");
if (theForm.CAT_Custom_1433317) why += checkDate(theForm.CAT_Custom_1433317.value, "DEPARTURE");
if (theForm.CAT_Custom_1433318) why += checkDropdown(theForm.CAT_Custom_1433318.value, "Bedrooms:");
if (theForm.CAT_Custom_1433319) why += checkDropdown(theForm.CAT_Custom_1433319.value, "Adults");
if (theForm.CAT_Custom_1433320) why += checkDropdown(theForm.CAT_Custom_1433320.value, "Children");
if (theForm.CAT_Custom_1433321) why += checkDropdown(theForm.CAT_Custom_1433321.value, "Pets");
if (theForm.CAT_Custom_1433324) why += checkDropdown(theForm.CAT_Custom_1433324.value, "Parking");
if (theForm.CAT_Custom_1433322) why += isEmpty(theForm.CAT_Custom_1433322.value, "Name");
if (theForm.CAT_Custom_1433323) why += isEmpty(theForm.CAT_Custom_1433323.value, "Surname");
if (why != "") {
alert(why);
return false;
}
if (submitcount23079 == 0) {
submitcount23079++;
theForm.submit();
return false;
} else {orm.CAT_Custom_1433321) why
alert("Form submission is in progress.");
return false;
}
}
//]]>
</script>
As you can see the website is broken down into 3 parts: .web1 .web2 .web3
I also have buttons #hide1 #hide2 that hide and replace .web1 and .web2
// JavaScript Document
$('#hide').click(function(){
if($.trim($('.web1 :input').val()) == ''){
$.each().alert('PLEASE FILL IS ALL FIELDS.');
}
else {
$(".web1").hide();
$(".web2").show();
$("#hide").hide();
$("#hide2").show();
}
}
);
// JavaScript Document
$('#hide2').click(function(){
if($.trim($('.web2 :input').val()) == ''){
$.each().alert('PLEASE FILL IS ALL FIELDS.');
}
else {
$(".web2").hide();
$(".web3").show();
$("#hide2").hide();
}
}
);
$('.web2').hide();
$('.web3').hide();
$('#hide2').hide();
As you can tell with the code when you click the buttons they are suppose to validate the input values within the div before they proceed to the next div.
I tried this but it seems not validate all of the form inputs. Any help on how I can solve this problem?

How to clear user selected values with a reset button

I need help with a reset button that will clear all the values selected or entered by the user. My code example is below. I have used JS before to reset all the values from a form but in this case i only need to clear a section of the form. My code is below: So each Fieldset has either text box or drop down.
<div class="column">
<p class="label item-information-fields">New Item</p>
<div class="item-information-fields">
<fieldset class="input-section">
<label for="tItemNickname"><span class="required">*</span>Item Name</label>
<input type="text" class="input" name="tItemNickname" id="tItemNickname" maxlength="15" />
</fieldset>
<fieldset class="input-section">
<label for="sItemType"><span class="required">*</span>Item Type</label>
<select name="sItemType" id="sItemType">
<option value="">Select</option>
<option value="1">Cash/Certificate</option>
<option value="2">Jewelry</option>
<option value="3">Clothing/Home Products</option>
<option value="4">Arts/Crafts</option>
<option value="5">Media, Music/Video</option>
<option value="6">Electronics</option>
<option value="7">Computers</option>
<option value="8">Collectibles</option>
<option value="9">Sports Equipment</option>
<option value="10">Liquor/Wine</option>
<option value="11">Animals</option>
<option value="12">Document Reconstruction</option>
<option value="13">Firearm</option>
<option value="14">Hazardous Material</option>
<option value="16">Event Tickets</option>
<option value="15">Other</option>
</select>
</fieldset>
<fieldset class="input-section hide" id="otherItemType">
<label for="tOtherItem"><span class="required">*</span>Other Item Type</label>
<input type="text" class="input" name="tOtherItem" id="tOtherItem" maxlength="15" />
</fieldset>
<fieldset class="input-section">
<label for="tItemDescription"><span class="required">*</span>Item Description</label>
<textarea class="textarea counter" name="tItemDescription" id="tItemDescription" maxlength="120"></textarea>
</fieldset>
<fieldset class="input-section input-section-short">
<label for="tPurchaseDate"><span class="required">*</span>Purchase Date (mm/dd/yyyy)</label>
<input class="input hasDatePicker enable-sundays" name="tPurchaseDate" id="tPurchaseDate" type="text" />
</fieldset>
<p class="note">If there was no purchase date, use the date the item was shipped.</p>
<fieldset class="input-section borders">
<label for="tAmountRequested"><span class="required">*</span>Amount Requested</label>
<span class="dollarWrap">
<span class="input-dollar-sign">$</span>
<input class="input" name="tAmountRequested" id="tAmountRequested" type="text" />
</span>
</fieldset>
// Button to clear the form.
<input type="reset" value="Reset" />

Or something like this:
$(function(){
$("#ClearItems").click(function(){
$("#myForm")[0].reset();
});
});
Working fiddle: http://jsfiddle.net/oqcqwyy4/

Develop Reference

JavaScript is the programming language of the Web.

getelementbyid Multiple ID display [duplicate] - javascript

Related

Show or hide a div on selection of dropdown and radio buttion

I need to show different inputs with every different choices and need to the others to remain hidden

how to enable /disable form field based on selection using php

Multi page webform validation

How to clear user selected values with a reset button

Categories

Resources