Hide input boxes based on drop down selection

Hide input boxes based on drop down selection - javascript

I want a drop down menu at the top of the page to determine how many boxes are then showing on the page.
If the user selects 1, only 1 table shows
If the user selects 2, 2 tables show
I have added the code so hopefully it makes more sense
<body>
<p>Please select number of puppies:</p>
<p>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td>
<input name="PuppyMicrochipNum2" type="text"
id="PuppyMicrochipNum2" />
</td>
</tr>
</table>

jsFiddle: http://jsfiddle.net/h3XLP/
very common to get jQuery answers but it's really not that comprehensive with standalone JavaScript
note: add the attribute style="display:none;" to the second table
var select = document.getElementsByTagName("select")[0];
select.onchange=function(){
if(select.value=="2"){
document.getElementsByTagName("table")[1].style.display="inline";
}else{
document.getElementsByTagName("table")[1].style.display="none";
}
}
however you should alternatively use below, as you may have more select and table elements in your document
http://jsfiddle.net/h3XLP/1/
var select = document.getElementById("selectnopuppies");
select.onchange=function(){
if(select.value=="2"){
document.getElementById("secondpuppytable").style.display="inline";
}else{
document.getElementById("secondpuppytable").style.display="none";
}
}
<p>Please select number of puppies:</p>
<p>
<select id="selectnopuppies">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1:</p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName1" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour1" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td> </td>
</tr>
</table>
<div id="secondpuppytable" style="display:none;">
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName2" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour2" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td>
<input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" />
</td>
</tr>
</table>
</div>

Given that option 1 should show table 1, option 2 show table 1 and 2, and so on.
Try this:
$('#dropdown').change(function(){
var dropdown = $(this);
var tables = $('.tableSelector');
tables.hide();
tables.slice(0,dropdown.val()).show();
});
Working jsfiddle: http://jsfiddle.net/v5TTz/
I have tagged all tables with a css class "tableSelector", then everytime the dropdown changes value, I show the number of tables corresponding to the current value of the dropdownlist. This solution requires the tables to be positioned in the correct order in the DOM.
However, in my ears, this sounds like a case for templates, like jQuery templates or Hoganjs.

I have modified your code... It's working now... try this...
<html>
<head>
<title>Sample</title>
<script type="text/javascript">
function go()
{
var Count = document.getElementById("selCount").options[document.getElementById("selCount").selectedIndex].value;
if(Count==1)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = 'none';
}
if(Count==2)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = '';
}
}
</script>
</head>
<body>
<p>Please select number of puppies:</p>
<p>
<select onchange = "go()" id="selCount">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0" id="Puppy1">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0" id="Puppy2">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td><input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" /></td>
</tr>
</table>
</body>
</html>

You can do something like this:
When you select 1st option, it will show you firSt table and for 2nd it will show you both tables.
$("table").hide();
$("select option").change(function(){
Val = $(this).val();
If(Val ==1) {
$("table")[0].show();
$("table")[1].hide();
} else {
$("table").show();
}
});

A little bit of javascript:
<script>
function showtable(o){
if(o.value==2){document.getElementById('table2').style.display='block';}
else{document.getElementById('table2').style.display='none';}
}
</script>
<p>Please select number of puppies:</p>
<p>
<select onchange="showtable(this)">
<option selected value="1">1</option>
<option value="2">2</option>
</select>
<table id='table2' width="330" border="0" style="display:none">

HTML Changes
<select onchange="showForm(this.options[this.selectedIndex]);">
Why it's needed ?
For listening the select box value change .
<table width="330" border="0" class="puppy">
Added class=puppy attribute for readability . For hiding table element will be generic and error prone.
Javascript Changes
function showForm(option){
//option user has selected.
var val = parseInt(option.value);
//form elements in a document.
var forms = document.getElementsByClassName("puppy");
for(var i=0,total=forms.length;i<total;i++){
var form = forms[i];
var display = form.style.display;
if(i<val && display == "none"){
form.style.display = "block";
}else if(i >= val && display != "none"){
form.style.display = "none";
}
}
}
Live Demo # http://jsfiddle.net/A3eFz/31/

Please try with following example, hope this helps.
<label for ="amount">Please select number of parameter</label><br/>
<select name="amount" id="amount" title="amount">
<option value="00">0</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
</select>
<form name = "AddQuery" id = "AddQuery" method = "POST" action = "submit.php">
<div id="groups">
</div>
<div id="other">
</div>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#amount').change(function(){
$('#groups').empty();
var group = '';
var number = parseInt($(this).val());
for(var i=0;i<number;i++){
group += '<div id="group">' +
'<label for="name['+i+']">Name'+i+'</label> '+
'<input name="name'+i+'" type="text" id="name'+i+'" value="">' +
'<label for="type['+i+']">Type'+i+'</label> '+
'<input name="type'+i+'" type="text" id="type'+i+'" value="">' +
'</div>';
}
$('#groups').append(group);
$('#other').empty();
var other = '';
other +='<div id="other"><input type="hidden" name="n" id ="n" value="'+number+'"/></div>';
$('#other').append(other);
});
});
</script>

Related

How to remove table row if the form any of the input or select was empty?

I have a form as below, Here i am looking to remove tr row if the input text and select option was empty. and the show the table row if any of the input was not empty
As you can see the input was not empty, it was removing the entire row, it is possible check both are not empty then remove
By using Jquery
Note: table rows are dynamically adding
$(function(){
$("table#my_form tr td").each(function(){
$(this).find('input, select').each(function(){
if($(this).val()==""){
$(this).closest('tr.table_row').remove();
}
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="">
<table id="my_form">
<tr class="table_row">
<td>
<input type="text" name="company" value="TCS" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms" selected>Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="Deloite" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="GOOGLE" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess" selected>Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
</table>
</form>

To check all inputs, you could try something like this. As you mentioned, you are adding rows dynamically, so you would want some other event handler to check again for more bad rows. This code would run once on page load, and then again any time the '#removeBadRows' button is clicked.
$(function () {
removeBadRows();
$(document).on('click', '#removeBadRows', function () {
removeBadRows();
});
});
function removeBadRows() {
$("table#my_form tr").each(function () {
var badCount = 0;
var inputLength = $(this).find('input, select').length;
$(this).find('input, select').each(function () {
if ($(this).val() == "") {
badCount++;
}
});
if (badCount == inputLength) {
$(this).remove();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="">
<table id="my_form">
<tr class="table_row">
<td>
<input type="text" name="company" value="test" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms" selected>Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="" selected>Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="GOOGLE" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby" selected>Ruby</option>
</select>
</td>
</tr>
</table>
</form>

This could be the most simple method
$(function(){
$(document).on('change', '.table_row input', function(e) {
if($(this).val()==""){
$(this).closest('.table_row').remove();
}
});
});

validating all the html rows when the form is submitted

I am working on the html table where user can enter the details and click on submit button to submit the data to the backend.
I have 3 mandatory columns (Spring,Role,Project) which are mandatory to enter by the user before sending to the backend when clicked on submit button.
If user enters the data in first two rows and click on submit button, i want to validate if user has entered data in mandatory fields Sprint,Role and Project for each row and
if user has missed to enter data in mandatory fields then i want to show error message near that row saying "Please enter the mandatory fields". I am confused as how to show error message for each row if user has not entered data in the
madatory fields when user click on submit button after entering data in first 3 rows. Any inputs would be helpful.
I have total of 6 rows where user can enter details in all or few of them and click on submit button. Only i need to validate the rows and show error message near each row which has missing data in the mandatory fields.
Demo link : https://plnkr.co/edit/QbiuE8jOIwd2t40akBwe?p=preview
Sample html code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function submitData(){
alert("submit");
}
</script>
</head>
<body>
<table id="productTable" border="1">
<tr>
<th>SID</th>
<th>Sprint <span style="color:red;">*</span></th>
<th>Role<span style="color:red;">*</span></th>
<th>Comments</th>
<th>Project<span style="color:red;">*</span></th>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
</table> <br>
<input type="submit" value="submit" onclick="submitData()">

check if all data entered or not then the rest data is entered partially
if (sprint && role && project) {.....}
else if (!sprint && !role && !project) {} // do nothing
else {....}
Demo:
function submitData() {
var dataPassed = false,
dataCount = 0,
hasEnteredData = false;
$('#productTable tr:not(:first)').each(function(index) {
var sprint = $(this).find('.sprint :selected').text(),
role = $(this).find('input[name="role"]').val(),
project = $(this).find('.project :selected').text();
if (sprint && role && project) {
dataPassed = true
dataCount++;
}
else if (!sprint && !role && !project) {
// all empty, skip
}
else {
alert('Required data missing in row: ' +
(index + 1) + '\nfill: Sprint, Role, Project')
dataPassed = false;
hasEnteredData = true;
return false;
}
})
if (dataPassed) {
alert('Success, Data count: ' +
dataCount + ' rows, submit?');
// do submit
}
else if (!hasEnteredData) {
alert('No data entered')
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="productTable" border="1">
<tr>
<th>SID</th>
<th>Sprint <span style="color:red;">*</span></th>
<th>Role<span style="color:red;">*</span></th>
<th>Comments</th>
<th>Project<span style="color:red;">*</span></th>
</tr>
<tr>
<td>
<input type="text" name="sid" value="">
</td>
<td>
<select class="sprint">
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project">
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" name="sid" value="">
</td>
<td>
<select class="sprint">
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project">
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" name="sid" value="">
</td>
<td>
<select class="sprint">
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project">
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
</table>
<br>
<input type="submit" value="submit" onclick="submitData()">

how to select values in the dropdown box

this is my code .
if i select tamilnadu , i must get chennai.
if i select kerla i must get kochi.
how to get the values if i submit.
enter code here
<td align='center' >STATE:</td>
<td> <select name ='state' onchange="showData()">
<option value="0">Select</option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</td>
</tr>
<tr> <td> </td> </tr>
<tr>
<td align='center' name ='city'>city:</td>
<td> <select>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore<option>
</tr>

You can go with the correct tag formation like this:
jQuery
$('#state').change(function() {
$('#res').html($('#city option').eq($('#state option:selected').index()).val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tr>
<td align='center'>STATE:</td>
<td>
<select name='state' id='state'>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align='center' name='city'>city:</td>
<td>
<select name='city' id='city'>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore
<option>
</select>
</tr>
<br>
<br>RESULT : <span id='res'></span>
Javascript:
function listResult() {
var e = document.getElementById("state");
document.getElementById("res").innerHTML = document.getElementById("city").options[e.selectedIndex].value
}
<tr>
<td align='center'>STATE:</td>
<td>
<select name='state' id='state' onchange='listResult()'>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align='center' name='city'>city:</td>
<td>
<select name='city' id='city'>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore
<option>
</select>
</tr>
<br>
<br>RESULT : <span id='res'></span>

how to get value in textboxes selecting dropdown list value?

hi i want to display value in textbox selected by dropdown value. suppose i selected sql
i got the value like jdbc:mysql://localhost/lportal?useUnicode=true&characterEncoding=UTF-8&useFastDateParsing=falsein jdbc url textbox.com.mysql.jdbc.Driver driver name in driver class textbox.
this type of code i want
<form>
<table>
<tr>
<td>Database Type</td>
</tr>
<tr>
<td><select name="Database Type" onclick="fillData()" id="sel_value">
<option value="DB2">DB2</option>
<option value="Derby">Derby</option>
<option value="Hypersonic">Hypersonic</option>
<option value="Ingres">Ingres</option>
<option value="MySQL">MySQL</option>
<option value="Oracle">Oracle</option>
<option value="P6Spy">P6Spy</option>
<option value="PostgreSQL">PostgreSQL</option>
<option value="SQL Server">SQL Server</option>
<option value="Sybase">Sybase</option>
</select>
</tr>
<tr>
<td>JDBC URL(required)</td>
</tr>
<tr>
<td><input type="text" name="jdbcUrl" style="width: 550px;" id="jdbcUrl"></td>
</tr>
<tr>
<td>JDBC Driver Class Name(Required)</td>
</tr>
<tr>
<td><input type="text" name="text" style="width: 550px;"></td>
</tr>
<tr>
<td>username</td>
</tr>
<tr>
<td><input type="text" name="text" style="width: 550px;"></td>
</tr>
<tr>
<td>password</td>
</tr>
<tr>
<td><input type="password" name="text" style="width: 550px;"></td>
</tr>
</table>
</form>

Replace the onclick with onchange. Here try this code:
<select name="Database Type" onchange="fillData()" id="sel_value">
<option value="DB2">DB2</option>
<option value="Derby">Derby</option>
<option value="Hypersonic">Hypersonic</option>
<option value="Ingres">Ingres</option>
<option value="MySQL">MySQL</option>
<option value="Oracle">Oracle</option>
<option value="P6Spy">P6Spy</option>
<option value="PostgreSQL">PostgreSQL</option>
<option value="SQL Server">SQL Server</option>
<option value="Sybase">Sybase</option>
</select>
Javascript:
function fillData(){
alert($('#sel_value').val());
}

Access and Display post values on a html page using JQuery

I am trying to display values in table cells in a form after they are posted by another form. Below is my code for that. Here I am trying to add the value of Select box in unbound_AdultVal hidden field using JQuery.
<form enctype="multipart/form-data" method="post" action="summary.html" name="form">
<input id="unbound_CurrentStepID" type="hidden" value="Step_Two" name="unbound_CurrentStepID">
<input id="Unbound_AdultVal" type="hidden" value="" name="Unbound_AdultVal">
Ages 10+:
<select id="Unbound_Ticket" name="Unbound_Ticket">
<option selected="selected" 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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<input type="submit" value="Continue" name="submit">
</form>
<script type="text/javascript">
$(document).ready(function() {
var numDAdult = $("#Unbound_Ticket").val();
$("#Unbound_Ticket").change( function(){
numDAdult = $("#Unbound_Ticket").val();
$('input[name=Unbound_AdultVal]').val(numDAdult);
});
});
</script>
Below is Summary.html code where I want to display the hidden field value.
<form enctype="multipart/form-data" method="post" action="summary.html" name="form">
<input id="unbound_CurrentStepID" type="hidden" value="Form_Three" name="unbound_CurrentStepID">
<table width="800" border="1" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="381"><strong>Quantity</strong></td>
<td width="242"><strong>Ticket Price</strong></td>
<td width="139"><strong>Total Price</strong></td>
</tr>
<tr>
<td><span id="postAdultvalue"></span>
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3" align="right"><strong>Current Amount Due: $0</strong></td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
$("#postAdultvalue").text($("#Unbound_AdultVal").val());
});
</script>
I am having a hard time displaying posted values in table using JQuery. As I am very new to JQuery please pardon my ignorance.

<input id="Unbound_AdultVal" type="hidden" **value=""** name="Unbound_AdultVal">
The value needs to be set to the POST variable (ex. PHP: $_POST["name"], ColdFusion: #form.name#).

Develop Reference

JavaScript is the programming language of the Web.

Hide input boxes based on drop down selection - javascript

You can do something like this: When you select 1st option, it will show you firSt table and for 2nd it will show you both tables. $("table").hide(); $("select option").change(function(){ Val = $(this).val(); If(Val ==1) { $("table")[0].show(); $("table")[1].hide(); } else { $("table").show(); } });

Related

How to remove table row if the form any of the input or select was empty?

validating all the html rows when the form is submitted

how to select values in the dropdown box

how to get value in textboxes selecting dropdown list value?

Access and Display post values on a html page using JQuery

Categories

Resources