jquery get value from fields in the same class [duplicate]

jquery get value from fields in the same class [duplicate] - javascript

This question already has answers here:
Getting closest input value from clicked element with jQuery
(5 answers)
Closed 1 year ago.
I want to get value from each field when I click the button. The result I get is always the first one.
What I expect is that when I click another button it shows a different value. This is my code.
$('.btn').click(function(e) {
e.preventDefault();
var x = $('.input-class').val();
alert(x)
})
<!-- assume the code inside loop !-->
<tr>
<td><input type="text" value="1" class="input-class"></td>
<td>
<select name="animals" class="animals">
<option value="cat">Cat</option>
<option value="tiger">Tiger</option>
<option value="lion">Lion</option>
</select>
</td>
<td><button class="btn">Click</button></td>
</tr>
<tr>
<td><input type="text" value="2" class="input-class"></td>
<td>
<select name="animals" class="animals">
<option value="cat">Cat</option>
<option value="tiger">Tiger</option>
<option value="lion">Lion</option>
</select>
</td>
<td><button class="btn">Click</button></td>
</tr>
<tr>
<td><input type="text" value="3" class="input-class"></td>
<td>
<select name="animals" class="animals">
<option value="cat">Cat</option>
<option value="tiger">Tiger</option>
<option value="lion">Lion</option>
</select>
</td>
<td><button class="btn">Click</button></td>
</tr>

The issue is because calling val() on a jQuery object containing multiple elements only reads the value from the first element in the collection.
To achieve what you require you can use DOM traversal to relate the clicked button to its related input. In this case using the this keyword to reference the element which raised the event along with prev() will work:
$('.btn').click(function(e) {
e.preventDefault();
var x = $(this).prev().val();
console.log(x)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="1" class="input-class"> <button class="btn">Click</button>
<input type="text" value="2" class="input-class"> <button class="btn">Click</button>
<input type="text" value="3" class="input-class"> <button class="btn">Click</button>
<input type="text" value="4" class="input-class"> <button class="btn">Click</button>
Update:
Given your update to the HTML in the question, the logic to get the input from within the same table row is slightly more complex. You can achieve it instead by using closest() to get the nearest common tr parent, then find():
$('.btn').click(function(e) {
e.preventDefault();
var x = $(this).closest('tr').find('.input-class').val();
console.log(x)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" value="1" class="input-class"></td>
<td>
<select name="animals" class="animals">
<option value="cat">Cat</option>
<option value="tiger">Tiger</option>
<option value="lion">Lion</option>
</select>
</td>
<td><button class="btn">Click</button></td>
</tr>
<tr>
<td><input type="text" value="2" class="input-class"></td>
<td>
<select name="animals" class="animals">
<option value="cat">Cat</option>
<option value="tiger">Tiger</option>
<option value="lion">Lion</option>
</select>
</td>
<td><button class="btn">Click</button></td>
</tr>
<tr>
<td><input type="text" value="3" class="input-class"></td>
<td>
<select name="animals" class="animals">
<option value="cat">Cat</option>
<option value="tiger">Tiger</option>
<option value="lion">Lion</option>
</select>
</td>
<td><button class="btn">Click</button></td>
</tr>
</table>

$('.input-class') will gather all elements with that class name. maybe you want do a foreach loop and get value from .input-class one at a time.

Related

remove checkbox and text value when combobox change

I have an issue with my code. I hope anybody here can help me to fix it. I have problem in remove value from text on change event of select input .
Here is my js code:
$(document).ready(function() {
$('.select').change(function() {
var check = $(this).closest('tr').find("input[type='checkbox']").attr('id');
$('#' + check + '').prop("checked", false);
var txt = $(this).closest('tr').find("input[type='text']").attr('id');
$('#' + txt + '').val("");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<th>SELECT TYPE</th>
<th>TAKE IT</th>
<th>YOUR CHOOSEN</th>
</tr>
<tr>
<td>
<select class="select" name="select1">
<option>--CHOOSE--</option>
<option value="Cars">Cars</option>
<option value="Bike">Bike</option>
</select>
</td>
<td>
<input type="checkbox" name="check1" />
</td>
<td>
<input type="text" name="input1" />
</td>
</tr>
<tr>
<td>
<select class="select" name="select2">
<option>--CHOOSE--</option>
<option value="Cars">Cars</option>
<option value="Bike">Bike</option>
</select>
</td>
<td>
<input type="checkbox" name="check2" />
</td>
<td>
<input type="text" name="input2" />
</td>
</tr>
<tr>
<td>
<select class="select" name="select3">
<option>--CHOOSE--</option>
<option value="Cars">Cars</option>
<option value="Bike">Bike</option>
</select>
</td>
<td>
<input type="checkbox" name="check3" />
</td>
<td>
<input type="text" name="input3" />
</td>
</tr>
</table>
Note: I am loading data from database and showing the result into text and check-box automatically checked according to customer choice. When the customer want to edit data so, they will change the select input and the text and check-box should be clear. I only can remove the checked check-box but can't clear the text. Anybody please help. I really appreciate for any help.

I think you are having a problem to get how the script is working.
var check = $(this).closest('tr').find("input[type='checkbox']").attr('id');
var txt = $(this).closest('tr').find("input[type='text']").attr('id');
this two code look for the id of input checkbox and the input text.
As I see there is no id defined for these two element. So those variable will have nothing in them (undefined) hence the code will not work.
One solve is:
You can add id to those field. Like
<tr>
<td><select class="select" name="select1">
<option>--CHOOSE--</option><option value="Cars">Cars</option><option value="Bike">Bike</option>
</select> </td>
<td><input type="checkbox" name="check1" id="check1" /></td>
<td><input type="text" name="input1" id="input1" /></td>
</tr>
<tr>
<td>
<select class="select" name="select2"><option>--CHOOSE--</option><option value="Cars">Cars</option><option value="Bike">Bike</option>
</select></td>
<td><input type="checkbox" name="check2" id="check2" /></td>
<td><input type="text" name="input2" id="input2" /></td>
Another Solve:
You can modify you script like this.
$(document).ready(function(){
$('.select').change(function(){
var check = $(this).closest('tr').find("input[type='checkbox']");
$(check).prop("checked",false);
var txt = $(this).closest('tr').find("input[type='text']");
$(txt).val("");
});
});

$(document).ready(function(){
$('.select').change(function(){
$(this).parent().parent().find("input[type='text']").val(""); $(this).parent().parent().find("input[type='checkbox']").prop("checked",false);
});});
Please try this friend i will work fine

how to hide credit card fields when PayPal is selected in business catalyst checkout

How to change the checkout page with simple css and/or javascript so when selecting the PayPal payment option the credit card fields hide and possibly pulls the submit button up under the PayPal button. Here is section of table code:
<tr>
<td>
<input checked="checked" type="radio" name="PaymentMethodType" id="PaymentMethodType_1" value="1" /> Credit Card<br />
<input type="radio" name="PaymentMethodType" id="PaymentMethodType_5" value="5" /> PayPal<br />
</td>
</tr>
<tr>
<td><label for="CardName">Name on Card <span class="req">*</span></label><br />
<input type="text" name="CardName" id="CardName" class="cat_textbox" autocomplete="off" /></td>
</tr>
<tr>
<td><label for="CardType">Card Type <span class="req">*</span></label><br />
<select name="CardType" id="CardType" class="cat_dropdown">
<option value="1">Visa</option>
<option value="2">Mastercard</option>
<option value="3">Discover</option>
<option value="4">American Express</option>
</select></td>
</tr>
<tr>
<td><label for="CardNumber">Card Number <span class="req">*</span></label><br />
<input type="text" name="CardNumber" id="CardNumber" class="cat_textbox" autocomplete="off" /></td>
</tr>
<tr>
<td><label>Card Expiry <span class="req">*</span></label><br />
<select name="CardExpiryMonth" id="CardExpiryMonth" class="cat_dropdown_smaller">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><select name="CardExpiryYear" id="CardExpiryYear" class="cat_dropdown_smaller">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select></td>
</tr>
<tr>
<td><label for="CardCCV">CCV Number <span class="req">*</span></label><br />
<input type="text" name="CardCCV" id="CardCCV" class="cat_textbox" autocomplete="off" /></td>
</tr>
<tr>
<td><label for="Amount">Amount <span class="req">*</span> <span id="constraint-300-label"></span></label><br />
<input type="text" name="Amount" id="Amount" class="cat_textbox" /></td>
</tr>
<tr>
<td><input class="cat_button" type="submit" value="Submit" id="catwebformbutton" /></td>
</tr>

So for a basic solution you can use jQuery to find out which input is selected, detect if it is the PayPal radio, and hide the credit card fields.
Take a look at the fiddle.
It will also show the fields if the user decided to input a credit card instead.
I wrapped the credit card tr's in a class called .credit-cards which jQuery just hides and shows this class.
Make sure to copy the html as well, as include the jQuery in your file.
PS: This is probably a duplicate question/answer.

Added this to script to hide CC when PayPal is selected:function ShowCCFields(val) {
if (!document.getElementById('paymentdiv'))
return;
if (val != 1)
document.getElementById('paymentdiv').style.display = 'none';
else
document.getElementById('paymentdiv').style.display = 'inline';
}

change form target based on dropdown selection

I want every dropdown option to have a target of "_blank" except option 4. How do I switch the target based on the option selected in the form?
<form action="mypage.php" method="post" target="_blank" />
<input type="hidden" name="turnaround" value="20">
<table>
<tr>
<td>Platform</td>
<td>
<select required id="cu" name="plat" style="min-width: 120px;">
<option value="1">1</option>
<option value="2">2 (Desktop Only)</option>
<option value="3">3 (Mobile Only)</option>
<option value="4">4 (Wildcard)</option>
<option value="5">Catch-All</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
<div><input type="submit" value="Select Platform" /></div>
</form>

Check this fiddle
js:
$("#cu").on("change",function(){
var a = $(this).val();
if(a == "4"){
$("#formId").removeAttr("target")
}else{
$("#formId").attr("target","_blank")
}
})

give your form an id:
<form action="mypage.php" id="myForm" method="post" target="_blank" />
<input type="hidden" name="turnaround" value="20">
<table>
<tr>
<td>Platform</td>
<td>
<select required id="cu" name="plat" style="min-width: 120px;">
<option value="1">1</option>
<option value="2">2 (Desktop Only)</option>
<option value="3">3 (Mobile Only)</option>
<option value="4">4 (Wildcard)</option>
<option value="5">Catch-All</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
your js:
$('#myForm').attr("target") = $('#cu').val() == "4" ? "" : "_blank";
not tested but it should work

May be you want to give class or id to submit button.
$('input[type=submit]').click(function(e){
if($('#cu').val() == '4'){
$(this).closest('form').prop('target','');
}
});

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>

Develop Reference

JavaScript is the programming language of the Web.

jquery get value from fields in the same class [duplicate] - javascript

$('.input-class') will gather all elements with that class name. maybe you want do a foreach loop and get value from .input-class one at a time.

Related

remove checkbox and text value when combobox change

how to hide credit card fields when PayPal is selected in business catalyst checkout

change form target based on dropdown selection

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

Hide input boxes based on drop down selection

Categories

Resources