How to get values of a form using JavaScript - javascript

I'm trying to write a script to process form data within a simple offline HTML page. I lifted the first four variables I'm trying to pull through as an example. I can get a simple example to work like the one found here https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_elements_index but I'm struggling to expand it to multiple variables as below.
Am I approaching the two JavaScript functions wrong for this use?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript within HTML</title>
<script language = "JavaScript">
function get_dropdown (fieldname) {
Item = form.fieldname.selectedIndex;
Result = form.fieldname.options[Item].text;
return Result;
}
function getval (form) {
var Customer_Name = form.customer_name.value;
var Asset_Name = form.asset_name.value;
var Asset_Attribute = get_dropdown (asset_dropdown);
var Sub_Attribute = get_dropdown (sub_dropdown);
var Answer = Customer_Name + Asset_Name + Asset_Type + Sub_System;
document.getElementById("output1").innerHTML = Answer;
}
</script>
</head>
<body>
<form name = "agc_ira" method="get" action="" >
<fieldset>
<legend>Assessment Data</legend>
<table>
<tr>
<td>Customer Name:</td>
<td><input type="text" name="customer_name"></td>
</tr>
<tr>
<td>Asset Name:</td>
<td><input type = "text" name="asset_name"></td>
</tr>
<tr>
<td>Asset Attribute:</td>
<td><select name="asset_dropdown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>Sub-Attribute:</td>
<td><select name="sub_dropdown">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select></td>
</tr>
</table>
</fieldset>
<br><input type="button" name="runmodel" value="Run" onclick="getval()">
<br>
<p id="output1"></p>
</form>
</body>
</html>


There are a few problems with your code that I will do my best to explain. It seems like you are a little confused with the form object and how that works. Firstly, it is forms not form. The reason its plural is because it is an array that contains all of the <form> elements in the document. Secondly, you need to access it by prefixing it with document because the forms live inside the document object. So all your calls to form need to updated to use document.forms
Next is how you are dynamically reaching into the form object. The syntax for that would be document.forms[0][variablename]. Let's break that down piece by piece so you can understand better. document.forms is a reference to all the forms in the document. [0] is taking the first item in that array and because the form itself is another array we use [variableName] to pull out the value we want.
After that, there is just some small confusion over variable names which you should be able to see from the working example I've provided below.
function get_dropdown(fieldname) {
Item = document.forms[0][fieldname].selectedIndex;
Result = document.forms[0][fieldname].options[Item].text;
return Result;
}
function getval(form) {
var Customer_Name = document.forms[0].customer_name.value;
var Asset_Name = document.forms[0].asset_name.value;
var Asset_Attribute = get_dropdown('asset_dropdown');
var Sub_Attribute = get_dropdown('sub_dropdown');
var Answer = Customer_Name + '-' + Asset_Name + '-' + Asset_Attribute + '-' + Sub_Attribute;
document.getElementById("output1").innerHTML = Answer;
}
<form name="agc_ira" method="get" action="">
<fieldset>
<legend>Assessment Data</legend>
<table>
<tr>
<td>Customer Name:</td>
<td><input type="text" name="customer_name"></td>
</tr>
<tr>
<td>Asset Name:</td>
<td><input type="text" name="asset_name"></td>
</tr>
<tr>
<td>Asset Attribute:</td>
<td><select name="asset_dropdown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>Sub-Attribute:</td>
<td><select name="sub_dropdown">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select></td>
</tr>
</table>
</fieldset>
<br><input type="button" name="runmodel" value="Run" onclick="getval()">
<br>
<p id="output1"></p>
</form>
Please feel free to ask more follow up questions if I've missed something or you need more clarification.


Generic solution for multiple forms
With elements collection one can access all elements in a form. Loop through them and check the type of each element and make your stuff with it.
Example
function getSelected(formName, fieldName) {
var selected = document.forms[formName][fieldName].selectedIndex;
var res = document.forms[formName][fieldName].options[selected].text;
return res;
}
function getValuesOfForm(formName, outputId) {
var res = "";
var formElements = document.forms[formName].elements;
for (var i = 0; i < formElements.length; i += 1) {
if (formElements[i].type === "text") {
res += formElements[i].value + "-";
}
if (formElements[i].type === "select-one") {
res += getSelected(formName, formElements[i].name) + "-";
}
// Do your own stuff with other types
}
var output = document.getElementById(outputId);
output.innerHTML = res.slice(0, -1);
}
<!-- Form 1 -->
<form name="form1" method="get" action="">
<fieldset>
<legend>Assessment Data</legend>
<table>
<tr>
<td>Customer Name:</td>
<td><input type="text" name="customer_name"></td>
</tr>
<tr>
<td>Asset Name:</td>
<td><input type="text" name="asset_name"></td>
</tr>
<tr>
<td>Asset Attribute:</td>
<td>
<select name="asset_dropdown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>Sub-Attribute:</td>
<td>
<select name="sub_dropdown">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
</tr>
</table>
</fieldset>
<br><input type="button" name="runmodel" value="Run" onclick="getValuesOfForm('form1', 'output1')">
<br>
<p id="output1"></p>
</form>
<!-- Form 2 -->
<form name="form2" method="get" action="">
<fieldset>
<legend>Assessment Data</legend>
<table>
<tr>
<td>Customer Name:</td>
<td><input type="text" name="customer_name"></td>
</tr>
<tr>
<td>Another Text:</td>
<td><input type="text" name="another_text"></td>
</tr>
<tr>
<td>Asset Name:</td>
<td><input type="text" name="asset_name"></td>
</tr>
<tr>
<td>Asset Attribute:</td>
<td>
<select name="asset_dropdown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>Sub-Attribute:</td>
<td>
<select name="sub_dropdown">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
</tr>
<tr>
<td>Other attributes:</td>
<td>
<select name="other_attributes">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</td>
</tr>
</table>
</fieldset>
<br><input type="button" name="runmodel" value="Run" onclick="getValuesOfForm('form2', 'output2')">
<br>
<p id="output2"></p>
</form>

Related

Cannot disable the same option already selected

Suppose I have two select. I'm trying to disable the options already selected in one of the select available with the class criterias, for achieve this I wrote the following code, but it didn't work, what I did wrong?
$('.criterias').on('change', function(event) {
var id = $(event.target).val();
$('#container').find('.criterias')
.siblings('.criterias')
.children('option[value=' + id + ']')
.attr('disabled', true)
.siblings().removeAttr('disabled');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<table>
<tr>
<td>
<select class="criterias form-control">
<option value="11">test1'</option>
<option value="12">test2</option>
<option value="13">test3</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="criterias form-control">
<option value="11">test1'</option>
<option value="12">test2</option>
<option value="13">test3</option>
</select>
</td>
</tr>
</table>

To achieve expected result, remove sibling method
$('.criterias').on('change', function(event) {
var id = $(event.target).val();
$('#container').find('.criterias')
.children('option[value=' + id + ']')
.attr('disabled', true)
.siblings().removeAttr('disabled');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="container">
<table>
<tr>
<td>
<select class="criterias form-control">
<option value="11">test1'</option>
<option value="12">test2</option>
<option value="13">test3</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="criterias form-control">
<option value="11">test1'</option>
<option value="12">test2</option>
<option value="13">test3</option>
</select>
</td>
</tr>
</table>
</div>
codepen - https://codepen.io/nagasai/pen/daXVLr

how to multiply and sum form values in real time using jquery/javascript

Hello Stackoverflow Coders. I downloaded this code online and now wish to add quantity to each product.
what I want is to be able to multiple each product price by the quantity that is whenever a user selects
quantity of products, it will be multiply by the price and displays results each and then sum all the calculations if
depending on the number of product item selected. thanks
source: http://viralpatel.net/blogs/sum-html-textbox-values-using-jquery-javascript/
<html>
<head>
<title>Sum Html Textbox Values using jQuery/JavaScript</title>
<style>
body {
font-family: sans-serif;
}
#summation {
font-size: 18px;
font-weight: bold;
color:#174C68;
}
.txt {
background-color: #FEFFB0;
font-weight: bold;
text-align: right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<th>no</th>
<th>product</th>
<th>price</th>
<th>quantity</th>
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" type="text" name="txt" value="500" /></td>
<td><select name="qty" class="txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>2</td>
<td>Cheese</td>
<td><input class="txt" type="text" name="txt" value="250"/></td>
<td><select name="qty" class="txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>3</td>
<td>Eggs</td>
<td><input class="txt" type="text" name="txt" value="400"/></td>
<td><select name="qty" class="txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>
<script>
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}
</script>
</body>
</html>

This requires some minor changes in your html and js like below
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<th>no</th>
<th>product</th>
<th>price</th>
<th>quantity</th>
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" type="text" name="txt" value="500" /></td>
<td>
<select name="qty" class="qty-txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td>Cheese</td>
<td><input class="txt" type="text" name="txt" value="250"/></td>
<td>
<select name="qty" class="qty-txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td>Eggs</td>
<td><input class="txt" type="text" name="txt" value="400"/></td>
<td>
<select name="qty" class="qty-txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>
JS Code:
$(document).ready(function() {
$(".txt").keyup(function() {
calculateSum();
});
$('.qty-txt').on('change', function() {
calculateSum();
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
//check cooresponding quantity
var qty = $(this).parents('tr').find('.qty-txt').val();
sum += (parseFloat(this.value) * parseInt(qty, 10));
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}
Link to fiddle.

It would look more like this:
Using the <select> id to find the associated price.
$("select").on("change",function(){
var sum = 0;
//iterate through each select and multiply the values
$("select").each(function(){
thisID = $(this).attr("id").replace("-qty","-price");
sum = sum + (parseInt($(this).val()) * parseInt($("#"+thisID).val()) );
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
});
With as few changes to the HTML:
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<th>no</th>
<th>product</th>
<th>price</th>
<th>quantity</th>
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input type="text" id="butter-price" class="txt" value="500"></td>
<td><select id="butter-qty" class="txt">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>2</td>
<td>Cheese</td>
<td><input type="text" id="cheese-price" class="txt" value="250"></td>
<td><select id="cheese-qty" class="txt">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>3</td>
<td>Eggs</td>
<td><input type="text" id="eggs-price" class="txt" value="400"></td>
<td><select id="eggs-qty" class="txt">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>
See in Fiddle : https://jsfiddle.net/Bes7weB/544vun0r/

Populating Drop-down Value using dynamic identifiers from Multiple Select tags

I was working to grab the drop down selected value dynamically using dynamic identifiers. I have done it in static way. Can anybody suggest how can I make 'id' dynamic for each 'button' and 'select' tags and On click of each GO button the value should be displaying from the same row's select drop down. Thanks in advance.
=================
$(".button").click(function() {
var dataItem = $(this).data('item'),
contentID = $('#'+dataItem);
$('#output').html(contentID.val())
});
=============
<table cellspacing="10" cellpading="10" border="0">
<tr>
<td>Application Name</td>
<td>
<select id="country">
<option>Select Any Country</option>
<option value="India">India</option>
<option value="Australia">Australia</option>
<option value="England">England</option>
<option value="Singapore">Singapore</option>
<option value="Canada">Canada</option>
</select>
</td>
<td><input type="button" data-item="country" class="button" value="Go" /></td>
</tr>
<tr>
<td>Application Name</td>
<td>
<select id="country1">
<option>Select Any Country</option>
<option>China</option>
<option>Russia</option>
<option>France</option>
<option>Paris</option>
<option>Germany</option>
</select>
</td>
<td><input type="button" data-item="country1" class="button" value="Go" /></td>
</tr>
<tr>
<td>Application Name</td>
<td>
<select id="country2">
<option>Select Any Country</option>
<option>Sri Lanka</option>
<option>South Africa</option>
<option>Ireland</option>
<option>Spain</option>
<option>Serbia</option>
</select>
</td>
<td><input type="button" data-item="country2" class="button" value="Go" /></td>
</tr>
</table>
<div id="output" style="color:red"></div>

Assign dynamic "id" for select and button
var n =1;
$("table tr input.button").each(function(n){
$(this).attr("id" , "button"+n);
$(this).parent().find("select").attr("id" , "country"+n);
});
Now on click
var y =1;
$("table tr input.button").each(function(y){
$("#button"+y).live('click', function(){
alert($("#country"+y+" option:selected").index());
});
});

I hope this is what u expecting ...try this
$("table tr td").each(function(n){
var id = $(this).find("select").attr("id");
if(id)
$("#output").append($("#"+id+" :selected").val()+"<br>");
});
}
check with fiddle:http://jsfiddle.net/tamilmani/QrbWy/

Hide input boxes based on drop down selection

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>

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#).

Categories

Resources