I am new to JavaScript and I am trying to make an html page with JavaScript inside it.
The idea is that, when someone selects the value of option from the select, it should generate automatically the fields of firstName, lastName etc depending on the number which is selected. If one is selected then it should have one field of firstName, lastName and if two is selected then it should generate two fields dynamically.
<select id="noOfAuthor" multiple="multiple">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
If someone selects one then below there should be one code of
Title Name <input type="text" name="txtTitle1">
Author Name <input type="text" name="txtAuthor1" >
Copy right<input type="text" name="txtCopyrightYear1">
If we selects “2” then there should be two code asking
Title Name <input type="text" name="txtTitle1">
Author Name <input type="text" name="txtAuthor1" >
Copy right<input type="text" name="txtCopyrightYear1">
Title Name <input type="text" name="txtTitle2">
Author Name <input type="text" name="txtAuthor2" >
Copy right<input type="text" name="txtCopyrightYear2">
And so on and so forth.
I tried to write a code for doing this, but it is not working.
<html>
<head>
<title>Book Collection</title>
<script language="JavaScript">
function WBook(bookName, writer, yearPublished)
{
this.Title = bookName;
this.Author = writer;
this.CopyrightYear = yearPublished;
}
function showBook(oneBook)
{
var no = showChoices();
var i ;
for(i =0; i<no; i++)
{
document.frmBooks.txtTitle[i].value = oneBook.Title[i];
document.frmBooks.txtAuthor[i].value = oneBook.Author[i];
document.frmBooks.txtCopyrightYear[i].value = oneBook.CopyrightYear[i];
}
}
function displayCollection()
{
var aBook = new WBook("Visual C++ From the Ground Up", "John Paul Mueller", 1998);
showBook(aBook);
}
function showChoices(){
var noOfAuthor = document.getElementById("noOfAuthor");
var result = " You selected";
result += " \n";
for(i=0; i<noOfAuthor.length;i++){
currentOption = noOfAuthor[i];
if(currentOption.selected == true){
result += currentOption.value + "\n";
}
}
result += " \n";
alert(result);
return(result);
}
</Script>
</head>
<body>
<h1>Book Collection</h1>
<form name="frmBooks">
<input type="hidden" name="id" value="" required="true" /><br> <br>
<select id="noOfAuthor" >
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
<button type="button" onclick="showChoices()">Submit</button>
Title Name <input type="text" name="txtTitle1">
Author Name <input type="text" name="txtAuthor1" >
Copy right<input type="text" name="txtCopyrightYear1">
Title Name <input type="text" name="txtTitle2">
Author Name <input type="text" name="txtAuthor2" >
Copy right<input type="text" name="txtCopyrightYear2">
<p><input type="button" value="Show Collection" name="btnShow" onClick="displayCollection()">
</form>
</body>
</html>
You can solve it like this (jsFiddle demo):
<html>
<head>
<title>Book Collection</title>
<script language="JavaScript">
function WBook(bookName, writer, yearPublished)
{
this.Title = bookName;
this.Author = writer;
this.CopyrightYear = yearPublished;
}
function showBook(oneBook)
{
var no = showChoices();
var i ;
for(i =0; i<no; i++)
{
document.frmBooks.txtTitle[i].value = oneBook.Title[i];
document.frmBooks.txtAuthor[i].value = oneBook.Author[i];
document.frmBooks.txtCopyrightYear[i].value = oneBook.CopyrightYear[i];
}
}
function displayCollection()
{
var aBook = new WBook("Visual C++ From the Ground Up", "John Paul Mueller", 1998);
showBook(aBook);
}
function showChoices(){
var noOfAuthor = document.getElementById("noOfAuthor");
var result = " You selected";
result += " \n";
result += noOfAuthor.value
for(i=1; i <= noOfAuthor.length;i++){
if(i <= noOfAuthor.value){
document.getElementById("inputs" + i).style.display = 'block';
} else {
document.getElementById("inputs" + i).style.display = 'none';
}
}
result += " \n";
alert(result);
return(result);
}
</Script>
</head>
<body>
<h1>Book Collection</h1>
<form name="frmBooks">
<input type="hidden" name="id" value="" required="true" /><br> <br>
<select id="noOfAuthor" >
<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>
<button type="button" onclick="showChoices()">Submit</button>
<div id="inputs1">
Title Name <input type="text" name="txtTitle1">
Author Name <input type="text" name="txtAuthor1" >
Copy right<input type="text" name="txtCopyrightYear1">
</div>
<div id="inputs2" style="display:none">
Title Name <input type="text" name="txtTitle2">
Author Name <input type="text" name="txtAuthor2" >
Copy right<input type="text" name="txtCopyrightYear2">
</div>
<div id="inputs3" style="display:none">
Title Name <input type="text" name="txtTitle3">
Author Name <input type="text" name="txtAuthor3" >
Copy right<input type="text" name="txtCopyrightYear3">
</div>
<div id="inputs4" style="display:none">
Title Name <input type="text" name="txtTitle4">
Author Name <input type="text" name="txtAuthor4" >
Copy right<input type="text" name="txtCopyrightYear4">
</div>
<div id="inputs5" style="display:none">
Title Name <input type="text" name="txtTitle5">
Author Name <input type="text" name="txtAuthor5" >
Copy right<input type="text" name="txtCopyrightYear5">
</div>
<p><input type="button" value="Show Collection" name="btnShow" onClick="displayCollection()">
</form>
</body>
</html>
very simple with jquery:
<select id="noOfAuthor" multiple="multiple">
<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 id="inputs"></div>
$( document ).ready(function() {
$("select#noOfAuthor > option").click(function() {
$( "#noOfAuthor" ).attr("disabled", true);
var howMuch = parseInt($( "#noOfAuthor" ).val());
for(i = 0; i < howMuch; i++) {
$( "#inputs" ).append('Title Name: <input type="text" name="txtTitle' + i + '"><br>Author Name: <input type="text" name="txtAuthor' + i + '"><br>Copy right: <input type="text" name="txtCopyrightYear' + i + '"><br><hr />');
}
});
});
So you get inputs as the selected number.
the Three first willl be:
name="txtTitle0"
name="txtAuthor0"
name="txtCopyrightYear0"
demo: http://jsfiddle.net/mxgbc/3/
I would generate the inputs and labels dynamically. This is a pure javascript example, without using jQuery. I can provide a jQuery solution if you need it.
Example http://jsfiddle.net/A62qA/1 // basic select menu
Example http://jsfiddle.net/A62qA/2/ // mutiple choice select menu
HTML
<select id="noOfAuthor" onchange="inputFunction(this)">
<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 id="myContainer"></div>
JavaScript
function createInputs(i) {
var myContainer = document.getElementById("myContainer");
var titleName = document.createElement("input");
titleName.setAttribute('name', 'txtTitle1' + i);
var label = document.createElement("Label");
label.innerHTML = "Title Name";
myContainer.appendChild(label);
myContainer.appendChild(titleName);
var authorName = document.createElement("input");
authorName.setAttribute('name', 'txtAuthor1' + i);
var label = document.createElement("Label");
label.innerHTML = "Author Name";
myContainer.appendChild(label);
myContainer.appendChild(authorName);
var copyRight = document.createElement("input");
copyRight.setAttribute('name', 'txtCopyrightYear1' + i);
var label = document.createElement("Label");
label.innerHTML = "CopyRight";
myContainer.appendChild(label);
myContainer.appendChild(copyRight);
}
function inputFunction(y) {
var y = y.value;
var myContainer = document.getElementById("myContainer");
for (var i = 0; i < y; i++) {
createInputs(i);
}
}
Related
I'm trying to calculate several values from an option selected.
<label>Processor</label> </br>
<form action="3.php" method="POST">
<select id="proSelect" name="processor" onchange="proSelectValue()">
<option value="0">Pilih Processor</option>
<?php echo $pro_option;?>
</select>
<input type="text" id="proPrice" readonly placeholder="0"></br></br>
<label>Motherboard</label></br>
<select id="moboSelect" name="motherboard" onchange="moboSelectValue()">
<option value="0">Pilih Motherboard</option>
<?php echo $mobo_option;?>
</select>
<input type="text" id="moboPrice" readonly placeholder="0"></br></br>
There the options is show, and if the option selected then the value of the options is shown in the id="proPrice" and id="moboPrice".
And the javascript for the value on the id="proPrice" is
function proSelectValue() {
var selObj = document.getElementById("proSelect");
var selValue = selObj.options[selObj.selectedIndex].value;
document.getElementById("proPrice").value = selValue;
}
function moboSelectValue() {
var selObj = document.getElementById("moboSelect");
var selValue = selObj.options[selObj.selectedIndex].value;
document.getElementById("moboPrice").value = selValue;
}
Now I wanted to calculate all of the value and show in this input
<label>Total Harga</label>
<input type="text" id="totalPrice" readonly>
How do i calculate the all of the value?
You can create another function to calculate the total and call that function inside both the event handler function.
Demo:
function proSelectValue() {
var selObj = document.getElementById("proSelect");
var selValue = selObj.options[selObj.selectedIndex].value;
document.getElementById("proPrice").value = selValue;
total();
}
function moboSelectValue() {
var selObj = document.getElementById("moboSelect");
var selValue = selObj.options[selObj.selectedIndex].value;
document.getElementById("moboPrice").value = selValue;
total();
}
function total(){
var total = Number(document.getElementById("proPrice").value) + Number(document.getElementById("moboSelect").value);
document.getElementById("totalPrice").value = total;
}
<label>Processor</label> <br>
<form action="3.php" method="POST">
<select id="proSelect" name="processor" onchange="proSelectValue()">
<option value="0">Pilih Processor</option>
<option value="1">Pilih Processor 2</option>
<option value="2">Pilih Processor 3</option>
</select>
<input type="text" id="proPrice" readonly placeholder="0"><br> <br>
<label>Motherboard</label><br>
<select id="moboSelect" name="motherboard" onchange="moboSelectValue()">
<option value="0">Pilih Motherboard </option>
<option value="1">Pilih Motherboard 2</option>
<option value="2">Pilih Motherboard 3</option>
</select>
<input type="text" id="moboPrice" readonly placeholder="0"> <br><br>
<label>Total Harga</label>
<input type="text" id="totalPrice" readonly />
</form>
I want to validate a textfield when a relating dropdown is selected.
usually it should be allowed to submit null but when its relating drop menu is selected null should not be allowed.
<select>
<option></option>
<option value="red">one</option>
<option value="blue">two</option>
<option value="green">three</option>
</select>
Lets say i select red from the dropdown
<input name="red" id="red" type="text">
should be required, while others like <input name="blue" id="blue" type="text"><input name="green" id="green" type="text"> can be sent as null and vice versa.
The text field should serve as a full detail for the option selected so, it should correspend.
Is there a way to handle this with javascript?
<html>
<head>
<script>
window.addEventListener('load',function(){ SimpleVal.init(); });
var SimpleVal = {};
SimpleVal.init = function(){
this.form = document.getElementById("myForm");
this.textInputs = [this.form.elements.namedItem("red"), this.form.elements.namedItem("blue"),this.form.elements.namedItem("green")];
for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
this.form.elements.namedItem("submit").disabled = true;
let sel = this.form.elements.namedItem("select");
this.form.addEventListener("change",function(){
for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
this.form.elements.namedItem("submit").disabled = true;
if(sel.value){
this.form.elements.namedItem(sel.value).disabled = false;
if(this.form.elements.namedItem(sel.value).value) this.form.elements.namedItem("submit").disabled = false;
}
}.bind(this));
};
</script>
</head>
<body>
<form id='myForm'>
<select name='select'>
<option></option>
<option value="red">one</option>
<option value="blue">two</option>
<option value="green">three</option>
</select>
<input name='red' type='text'/>
<input name='blue' type='text'/>
<input name='green' type='text'/>
<input name='submit' type='submit'/>
</form>
</body>
</html>
https://jsfiddle.net/d0ep6z16/
https://jsfiddle.net/yce3Ljpf/1/
<select id="colors">
<option></option>
<option value="red">one</option>
<option value="blue">two</option>
<option value="green">three</option>
</select>
<input name="blue" id="red" type="text" class="color-input">
<input name="blue" id="blue" type="text" class="color-input">
<input name="green" id="green" type="text" class="color-input">
<script>
document.getElementById('colors').addEventListener("change", function() {
if (this.value.length) {
var inputs = document.getElementsByClassName("color-input");
for(var i = 0; i < inputs.length; i++) {
inputs.item(i).removeAttribute('required');
}
document.getElementById(this.value).setAttribute('required', 'required');
}
});
</script>
OK so I've laid this out so you can see what's happening:
<select id="colourSelect" onchange="val()">
<option value="nothing">Please Choose:</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<br><br>
<input type="text" id="colourTextInput" size="50" onkeyup="clearMe()">
<br><br>
<button type="submit">Submit Button</button>
<script>
function val() {
d = document.getElementById("colourSelect").value;
if(d !== "nothing")
{
document.getElementById("colourTextInput").value = d;
}
else
{
document.getElementById('colourTextInput').value = "";
}
}
function clearMe() {
selectBox = document.getElementById("colourSelect");
selectBox.selectedIndex = null;
}
</script>
When the value of the dropdown is changed the value in the text box is set to the same as the dropdown. If they then go to the text field and try to change the colour, it defaults the dropdown back to its default setting, meaning that you can only ever have one or the other.
It could be made cleaner by simply clearing the text field when the dropdown is selected etc, but it gives you something to work with.
https://jsfiddle.net/cx1x2txu/
I modified this and got it right. Thanks all
<html><html>
<head>
<script>
window.addEventListener('load',function(){ SimpleVal.init(); });
var SimpleVal = {};
SimpleVal.init = function(){
this.form = document.getElementById("myForm");
this.textInputs = [this.form.elements.namedItem("red"), this.form.elements.namedItem("blue"),this.form.elements.namedItem("green")];
for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
this.form.elements.namedItem("submit").disabled = true;
let sel = this.form.elements.namedItem("select");
this.form.addEventListener("change",function(){
for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
this.form.elements.namedItem("submit").disabled = true;
if(sel.value){
this.form.elements.namedItem(sel.value).disabled = false;
if(this.form.elements.namedItem(sel.value).value) this.form.elements.namedItem("submit").disabled = false;
}
}.bind(this));
};
</script>
</head>
<body>
<form id='myForm'>
<select name='select'>
<option></option>
<option value="red">one</option>
<option value="blue">two</option>
<option value="green">three</option>
</select>
<input name='red' type='text'/>
<input name='blue' type='text'/>
<input name='green' type='text'/>
<input name='submit' type='submit'/>
</form>
</body>
</html>
I'm trying to create a form with two dependent dropdowns. Based off the second dropdown selection I want it to populate a hidden <div> correlating to the selected item so the user can complete the form submission.
// Script for prefilling date
var today = new Date();
document.getElementById("toDate").value = (today.getMonth()+1) + "-" +
parseInt(today.getDate()) + "-" + today.getFullYear();
// Script for dependent Select option fields
var category1AndCategory2 = {};
category1AndCategory2['select'] = ['Select...'];
category1AndCategory2['empsupp'] = ['Select...', 'BCP', 'Employee Change', 'Forecasting Adjustment', 'Schedule Analysis', 'Shift/Slot Bid(s)','Staffing Impact/Review'];
category1AndCategory2['idsupp'] = ['Select...','Additional Session', 'Deactivate User', 'New User', 'Reset User'];
category1AndCategory2['repsupp'] = ['Select...','Modify Existing Report', 'Question Existing Report', 'Request New Report'];
category1AndCategory2['syssupp'] = ['Select...','CC Pulse','Filenet','IVR','Telephony','Verint Recording'];
category1AndCategory2['telsupp'] = ['Select...','Avaya','CC Pulse','Geneysis','IVR','Menu Prompt Verbiage Change','Phone Shutdown Request','Schedule Analysis','Skill Changes/Review','Verint Recording'];
category1AndCategory2['worksupp'] = ['Select...','BIE','CLS','Filenet'];
function ChangeCategoryList() {
var category1List = document.getElementById("category1");
var category2List = document.getElementById("category2");
var selCategory = category1List.options[category1List.selectedIndex].value;
while (category2List.options.length) {
category2List.remove(0);
}
var cat1 = category1AndCategory2[selCategory];
if (cat1) {
var i;
for (i = 0; i < cat1.length; i++) {
var category1 = new Option(cat1[i], i);
category2List.options.add(category1);
}
}
}
<!DOCTYPE html>
<html>
<body>
<div id="formcontainer">
<form>
<!-- Text input fields -->
<input type="date" id="toDate" name="currentdate" disabled>
<input type="text" id="name" name="username" placeholder="Your full name..">
<input type="email" id="email" name="useremail" placeholder="Your email..">
<input type="tel" id="tele" name="telephone" placeholder="Your phone number..">
<!-- Drop Down menus -->
<select id="cateory1" onchange="ChangeCategoryList()">
<option value="select" selected>Select...</option>
<option value="empsupp">Employee Support</option>
<option value="idsupp">ID Requests</option>
<option value="repsupp">Reporting Support</option>
<option value="syssupp">System Support</option>
<option value="telsupp">Telephone Support</option>
<option value="worksupp">Workflow Support</option>
</select>
<select id="category2" name="category2">
<option value="select" selected>Select...</option>
</select>
<!-- correlating items for bcp select option -->
<div id="BCP" style="display:none;">
<input type="checkbox" name="updateplan" value="empsupp">Request to update plan <br>
<input type="checkbox" name="meetingreview" value="empsupp">Request for meeting/review <br>
<textarea name="bcpmess" rows="10" cols="20" placeholder="Input text..."></textarea>
</div>
<!-- correlating items for forecasting adjustment select option -->
<div id="forcasting" style="display:none;">
<input type="text" name="department" placeholder="Input department...">
<input type="text" name="location" placeholder="Input location...">
<textarea name="foremess" rows="10" cols="20" placeholder="Input text..."></textarea>
</div>
</body>
</html>
welcome to Stack Overflow! There are a couple issues with your code:
The id of your first select element has a typo: cateory1 should be category1.
You are missing a closing form tag `, but that is minor and should not be breaking anything.
That should get your two dropdown select working.
Next, you can add an onchange="doSomething()" callback to your second select so that when it changes you can call a function to perform the action you require i.e populating a specific div.
// Script for dependent Select option fields
var category1AndCategory2 = {};
category1AndCategory2['select'] = ['Select...'];
category1AndCategory2['empsupp'] = ['Select...', 'BCP', 'Employee Change', 'Forecasting Adjustment', 'Schedule Analysis', 'Shift/Slot Bid(s)','Staffing Impact/Review'];
category1AndCategory2['idsupp'] = ['Select...','Additional Session', 'Deactivate User', 'New User', 'Reset User'];
category1AndCategory2['repsupp'] = ['Select...','Modify Existing Report', 'Question Existing Report', 'Request New Report'];
category1AndCategory2['syssupp'] = ['Select...','CC Pulse','Filenet','IVR','Telephony','Verint Recording'];
category1AndCategory2['telsupp'] = ['Select...','Avaya','CC Pulse','Geneysis','IVR','Menu Prompt Verbiage Change','Phone Shutdown Request','Schedule Analysis','Skill Changes/Review','Verint Recording'];
category1AndCategory2['worksupp'] = ['Select...','BIE','CLS','Filenet'];
function ChangeCategoryList() {
var category1List = document.getElementById("category1");
var category2List = document.getElementById("category2");
var selCategory = category1List.options[category1List.selectedIndex].value;
while (category2List.options.length) {
category2List.remove(0);
}
var cat1 = category1AndCategory2[selCategory];
if (cat1) {
var i;
for (i = 0; i < cat1.length; i++) {
var category1 = new Option(cat1[i], i);
category2List.options.add(category1);
}
}
}
function doSomething(select) {
alert(select.value);
}
<!DOCTYPE html>
<html>
<body>
<div id="formcontainer">
<form>
<!-- Drop Down menus -->
<select id="category1" onchange="ChangeCategoryList()">
<option value="select" selected>Select...</option>
<option value="empsupp">Employee Support</option>
<option value="idsupp">ID Requests</option>
<option value="repsupp">Reporting Support</option>
<option value="syssupp">System Support</option>
<option value="telsupp">Telephone Support</option>
<option value="worksupp">Workflow Support</option>
</select>
<select id="category2" name="category2" onchange="doSomething(this)">
<option value="select" selected>Select...</option>
</select>
</form>
</body>
</html>
<form action="order.php" method="post" name="myForm" id="dropdown" onsubmit="return(validate());">
<input list="From" name="From" autocomplete="off" type="text" placeholder="From Place">
<datalist id="From">
<option value="Stand">
<option value="Hospital">
</datalist>
</form>
Script Validation :
<script>
if (document.myForm.From.value == "") {
alert("Please select From Place.!");
return false;
}
</script>
If null then given me the error message :
Please select From Place.!
User's input is also printing... But i need Option Value to print only ie. "Stand","Hospital"...
I have also deleted type="text" but it didn't change anything.
You need to loop inside your datalist options when submiting :
HTML
<form>
<input list="datalist" id="input">
<datalist id="datalist">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<button onclick="myFunction()">Check</button>
<p id="result"></p>
JS
function myFunction() {
var options = document.getElementById("datalist").options;
var result = false;
for (var i = 0; i < options.length; i++) {
if(document.getElementById("input").value == options[i].value) {
result = true;
}
}
document.getElementById("result").innerHTML = "Validate : " + result + ".";
}
Then you can use the Boolean for your validation.
You can see the result on this fiddle.
I have a simple form consisting of two text fields and two select fields that allows another set of inputs to be added dynamically by the user.
The two select fields are multiplied together and the result is displayed.
What I need is to be able to add as many lines as needed and multiply together the select values for each line, then add up the totals.
E.G. (q and s are select values)
q1 * s1 = z1
q2 * s2 = z2
q3 * s3 = z3
total = z1+z2+z3
But this is dynamic so there maybe 100 values or there may be 2.
Here is my code so far;
<form>
<div id="addinput"> <span>
<input type="text" id="p_new_1" size="20" name="p_new_1" value="" />
<select id="q_new_1" name="q_new_1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" id="r_new_1" size="20" name="p_new_1" value="" />
<select id="s_new_1" name="s_new_1">
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
Add <br />
</span> </div>
</form>
//Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script>
<script type="text/javascript">
$(function() {
var addDiv = $('#addinput');
var i = $('#addinput').size() + 1;
$('#addNew').live('click', function() {
$('<span><input type="text" id="p_new_' + i +'" size="20" name="p_new_' + i +'" value="" /><select id="q_new_' + i +'" name="q_new' + i +'"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><input type="text" id="r_new_' + i +'" size="20" name="r_new_' + i +'" value="" /><select id="s_new_' + i +'" name="s_new' + i +'"><option value="4">4</option><option value="5">5</option><option value="6">6</option></select>Remove<br /></span>').appendTo(addDiv);
i++;
return false;
});
$('#remNew').live('click', function() {
if( i > 2 ) {
$(this).parents('span').remove();
i--;
}
return false;
});
});
var x, y, z;
x = document.getElementById("q_new_1"),
xvalue = x.value;
y = document.getElementById("s_new_1"),
yvalue = y.value;
z = xvalue * yvalue;
document.write (z);
I would start off by structuring the HTML rows as such:
<div class="inputs">
<input type="text" name="p_new_3" size="20" value="" />
<select name="q_new_3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select>
</div>
Then you can loop through the rows in a click event and sum up the values of their children like so:
$("#getTotal").click(function() {
$(".inputs").each(function() {
textValue = parseFloat($(this).find("input").val());
selectValue = parseFloat($(this).find("select").val());
total += textValue * selectValue;
$("#total").html(total);
});
});
Here is a working jsfiddle demo.
<form>
<div id="addinput">
<div class="inputs">
<input type="text" name="p_new_1" size="20" value="" />
<select name="q_new_1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select>
</div>
<div class="inputs">
<input type="text" name="p_new_2" size="20" value="" />
<select name="q_new_2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select>
</div>
<div class="inputs">
<input type="text" name="p_new_3" size="20" value="" />
<select name="q_new_3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select>
</div>
Add -
Get total
Total: <span id="total"></span>
<br />
</div>
</form>
Javascript:
var total = 0.0;
$(function() {
var addDiv = $('#addinput');
var i = $('#addinput').size() + 1;
$('#addNew').live('click', function() {
$('#addinput').append('<div class="inputs"><input type="text" name="p_new_' + i + '" size="20" value=""><select name="q_new_' + i + '"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></div>');
i++;
return false;
});
$('#remNew').live('click', function() {
if( i > 2 ) {
$(this).parents('span').remove();
i--;
}
return false;
});
$("#getTotal").click(function() {
$(".inputs").each(function() {
textValue = parseFloat($(this).find("input").val());
selectValue = parseFloat($(this).find("select").val());
total += textValue * selectValue;
$("#total").html(total);
});
});
});