Not able to get data of select Item using jquery

Not able to get data of select Item using jquery - javascript

I have a select option and input type text and a button for adding new rows with it's data.
I tried writing code for that, but while adding new rows on button click the data of select Item is not getting populated.
For more info below is the code
var i=2;
$(".addmore").on('click',function(){
var data="<tr><td><input type='checkbox' class='case'/></td><td>"+i+".</td>";
data +="<td><input type='select' id='first_name"+i+"' name='first_name[]'/></td> <td><input type='text' id='last_name"+i+"' name='last_name[]'/></td></tr>";
$('table').append(data);
i++;
});
$(".delete").on('click', function() {
$('.case:checkbox:checked').parents("tr").remove();
$('.check_all').prop("checked", false);
check();
});
function select_all() {
$('input[class=case]:checkbox').each(function(){
if($('input[class=check_all]:checkbox:checked').length == 0){
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
}
<script src="http://demo.smarttutorials.net/auto_table/jquery-1.9.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" cellspacing="0">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
<th>S. No</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td><input type='checkbox' class='case'/></td>
<td>1.</td>
<td><select name="first_name[]" id="first_name" class="form-group">
<option value="0">--Select--</option>
<option value="1">Aisles & common areas</option>
<option value="3">BOH Storage area</option>
<option value="2">Baggage Counter</option>
<option value="6">CSD/Departmental POS</option>
<option value="4">Cash room</option>
<option value="5">Commercial Desk</option>
<option value="7">Display area</option>
<option value="8">Dock Doors</option>
<option value="9">Electronic items area</option>
<option value="10">Emergency exit</option>
<option value="11">Escalator & lifts</option>
<option value="12">General surveillance areas</option>
<option value="13">Goldsmith Room</option>
<option value="16">High Value Accessories Rack</option>
<option value="15">High pilferage</option>
<option value="17">High value FMCG room</option>
<option value="18">Inbound</option>
<option value="19">Key Item Merchandiser</option>
<option value="23">MPOS</option>
<option value="20">Main Entry/Exit</option>
<option value="21">Manager Room</option>
<option value="22">Material Entry / Exit</option>
<option value="24">Out bound Office</option>
<option value="25">Outdoor Surveillance</option>
<option value="27">Outside Trial rooms</option>
<option value="26">Outside the frisking area</option>
<option value="30">POS</option>
<option value="28">Perimeter Area</option>
<option value="29">Personal care</option>
<option value="31">Power aisles to monitor customer movements</option>
<option value="32">Racking area</option>
<option value="33">ResQ Room/ Desk</option>
<option value="34">Safe room</option>
<option value="35">Sales floor</option>
<option value="36">Saloon Entry /Exit</option>
<option value="37">Shelving Area</option>
<option value="38">Staff Entry / Exit</option>
<option value="39">Staircase & Fire Exit</option>
<option value="40">Stock Room Exit</option>
<option value="41">Vendor room</option>
<option value="42">Wrap Desk</option>
<option value="14">high end Cosmetics</option>
</select></td>
<td><input type='text' id='last_name' name='last_name[]'/></td>
</tr>
</table>
<button type="button" class='delete'>- Delete</button>
<button type="button" class='addmore'>+ Add More</button>
<p>
<input type='submit' name='submit' value='submit' class='but'/></p>
So how will I be able to get the data of select item.
For more info, see the fiddle here
UPDATE
I added a radio button for more info of YES/NO like below
Below is the fiddle for the same
JS Fiddle

You can do it this way :
var i = 2;
$(".addmore").on('click', function() {
var data = "<tr><td><input type='checkbox' class='case'/></td><td>" + i + ".</td>";
var select_data = $("#select_data").html();
data += "<td>" + select_data.replace('id="first_name"', 'id="first_name'+i+'"') + "</td>";
data += "<td><input type='text' id='last_name" + i + "' name='last_name[]'/></td></tr>";
$('table').append(data);
i++;
});
$(".delete").on('click', function() {
$('.case:checkbox:checked').parents("tr").remove();
$('.check_all').prop("checked", false);
check();
});
function select_all() {
$('input[class=case]:checkbox').each(function() {
if ($('input[class=check_all]:checkbox:checked').length == 0) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
}
<script src="http://demo.smarttutorials.net/auto_table/jquery-1.9.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" cellspacing="0">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()" /></th>
<th>S. No</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td><input type='checkbox' class='case' /></td>
<td>1.</td>
<td id="select_data">
<select name="first_name[]" id="first_name" class="form-group">
<option value="0">--Select--</option>
<option value="1">Aisles & common areas</option>
<option value="3">BOH Storage area</option>
<option value="2">Baggage Counter</option>
<option value="6">CSD/Departmental POS</option>
<option value="4">Cash room</option>
<option value="5">Commercial Desk</option>
<option value="7">Display area</option>
<option value="8">Dock Doors</option>
<option value="9">Electronic items area</option>
<option value="10">Emergency exit</option>
<option value="11">Escalator & lifts</option>
<option value="12">General surveillance areas</option>
<option value="13">Goldsmith Room</option>
<option value="16">High Value Accessories Rack</option>
<option value="15">High pilferage</option>
<option value="17">High value FMCG room</option>
<option value="18">Inbound</option>
<option value="19">Key Item Merchandiser</option>
<option value="23">MPOS</option>
<option value="20">Main Entry/Exit</option>
<option value="21">Manager Room</option>
<option value="22">Material Entry / Exit</option>
<option value="24">Out bound Office</option>
<option value="25">Outdoor Surveillance</option>
<option value="27">Outside Trial rooms</option>
<option value="26">Outside the frisking area</option>
<option value="30">POS</option>
<option value="28">Perimeter Area</option>
<option value="29">Personal care</option>
<option value="31">Power aisles to monitor customer movements</option>
<option value="32">Racking area</option>
<option value="33">ResQ Room/ Desk</option>
<option value="34">Safe room</option>
<option value="35">Sales floor</option>
<option value="36">Saloon Entry /Exit</option>
<option value="37">Shelving Area</option>
<option value="38">Staff Entry / Exit</option>
<option value="39">Staircase & Fire Exit</option>
<option value="40">Stock Room Exit</option>
<option value="41">Vendor room</option>
<option value="42">Wrap Desk</option>
<option value="14">high end Cosmetics</option>
</select>
</td>
<td><input type='text' id='last_name' name='last_name[]' /></td>
</tr>
</table>
<button type="button" class='delete'>- Delete</button>
<button type="button" class='addmore'>+ Add More</button>
<p>
<input type='submit' name='submit' value='submit' class='but' /></p>
Basically you add an id to the td containing the select <td id="select_data">, and then get it's html content everytime you click on the add button using
data += "<td>" + $("#select_data").html() + "</td>"

Element Ids must be unique. Try cloning the element instead and creating a unique id. Use the jQuery clone function on the row. You are going to need to create an id for your original row (I assume an id of row1 in the example).
var lastRow = $('tr[id^="row"]:last'); // get last row
var num = parseInt(lastRow.prop('id').match(/\d+/g), 10) + 1; // get number in row id and add 1
var newRow = lastRow.clone().prop('id', 'row' + num);
newRow.insertAfter(lastRow);

Related

Replace value from select inside hidden input

The main mission was to add the values from two select dropdowns to one hidden input. That works great but now if a user decides to choose another input, it adds to the hidden input value rather than replace it.
Live Code: DEMO
$('#expireMM').change(function() {
var theMonth = $(this).val();
$("#expiry").val( theMonth )
})
$('#expireYY').change(function() {
var theYear = $(this).val();
$('#expiry').val($('#expiry').val() + "/" + theYear );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />

You can update the value of the #expiry input in an external function, and not based on the current value:
function getExpirationDate() {
var monthVal = $('#expireMM').val();
var yearVal = $('#expireYY').val();
if (monthVal && yearVal) {
$('#expiry').val(`${monthVal}/${yearVal}`);
} else if (monthVal) {
$('#expiry').val(monthVal);
}
console.log($('#expiry').val());
}
$('#expireMM').change(getExpirationDate)
$('#expireYY').change(getExpirationDate)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />

$("#expiry").val($("#expireMM").val() + "/" + $("#expireYY").val())

Why not generate you expiry input value on form submit?
Here is the code.
jQuery(document).ready(function($) {
$("#my-form").submit(function() {
var monthYearVal = $('#expireMM').val() + "/" + $('#expireYY').val();
$("#expiry").val(monthYearVal);
$(this).submit();
return false;
});
});
<form id="my-form" method="POST">
<table class="table">
<tr>
<td>
<select name="expireMM" id="expireMM">
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY">
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" /></tr>
</td>
<tr>
<tr>
<td colspan="2" align=center>
<input type="hidden" name="cvv">
<input class="right-col-inner-box" type="submit" value="Submit">
</td>
</tr>
</table>
</form>

jquery chosen plugin with dynamic table

I'm using the jQuery plugin chosen. I have that working as I want. My issue is using it with a dynamic table. The initial row works but when a new row is added to the table the newly added chosen doesn't work. I did find a question on here about using .on but am completely lost as to how to go about this.
jQuery Code for chosen plugin
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/chosen.jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
<script>
$(function() {
$(".chzn-select").chosen();
});
</script>
HTML CODE
<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p>
<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>
<br>
<table id="myTable" class="form">
<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Unit Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>
<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" value="<?php echo $JobNumber;?>" readonly>
</td>
<td>
<input type="text" name="UnitID[]" value="<?php echo $JobNumber;?>-01" readonly>
</td>
<td>
<select name="JobCode[]" style="background-color:#FFE68C" required>
<option></option>
<option>F</option>
<option>FS</option>
<option>PD</option>
</select>
</td>
<td>
<input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
</td>
<td>
<select class="chzn-select" multiple="true" data-placeholder="Select Scope's" name="Scope[]" style="width:300px;" required>
<option value="100OA">100OA</option>
<option value="BTank">BTank</option>
<option value="WSEcon">WSEcon</option>
<option value="NetPkg">NetPkg</option>
<option value="CstmCtrl">CstmCtrl</option>
<option value="CstmFef">CstmRef</option>
<option value="CstmSM">CstmSM</option>
<option value="CstmHV">CstmHV</option>
<option value="CPCtrl">CPCtrl</option>
<option value="DesiHW">DesiHW</option>
<option value="DigScroll">DigScroll</option>
<option value="DigScroll">DFGas</option>
<option value="DWall">DWall</option>
<option value="MZ-DD">MZ-DD</option>
<option value="DPP">DPP</option>
<option value="Encl">Encl</option>
<option value="PlateHX">PlateHX</option>
<option value="ERW">ERW</option>
<option value="ERWModule">ERWModule</option>
<option value="ERVMod">ERVMod</option>
<option value="EvapBP">EvapBP</option>
<option value="PreEvap">PreEvap</option>
<option value="XP">XP</option>
<option value="Extend">Extend</option>
<option value="FanWall">FanWall</option>
<option value="FillStat">FillStat</option>
<option value="FFilt">FFilt</option>
<option value="PFilt">PFilt</option>
<option value="CarbFilt">CarbFilt</option>
<option value="CustFilt">CustFilt</option>
<option value="MGH(H)">MGH(H)</option>
<option value="GHeat">GHeat</option>
<option value="HighStatic">HighStatic</option>
<option value="HGBP">HGBP</option>
<option value="HGRH">HGRH</option>
<option value="HPConv">HPConv</option>
<option value="GFHumid">GFHumid</option>
<option value="TOHumid">TOHumid</option>
<option value="MHGRH">MHGRH</option>
<option value="LowAF">LowAF</option>
<option value="LowAFSF">LowAFSF</option>
<option value="LowAmbient">LowAmbient</option>
<option value="MEHeat(R)">MEHeat(R)</option>
<option value="MEHeat(I)">MEHeat(I)</option>
<option value="HGH(R)">MGH(R)</option>
<option value="MGH(H)">MGH(H)</option>
<option value="MtrRR">MtrRR</option>
<option value="MotorGM">MotorGM</option>
<option value="MS-Mod">MZ-Mod</option>
<option value="NatConv">NatConv</option>
<option value="OAFMS">OAFMS</option>
<option value="OSMotor">OSMotor</option>
<option value="MZ-VAV">MZ-VAV</option>
<option value="Mon">Mon</option>
<option value="PumpPkg">PumpPkg</option>
<option value="PipePkg">PipePkg</option>
<option value="ServLite">ServLite</option>
<option value="SparkRes">SparkRes</option>
<option value="SSLube">SSLube</option>
<option value="UVLights">UVLights</option>
<option value="VSComp">VSComp</option>
<option value="LCVAV">LCVAV</option>
<option value="XFVAV">XFVAV</option>
<option value="WCCond">WCCond</option>
<option value="WSHPConv">WSHPConv</option>
<option value="3RConv">3RConv</option>
<option value="WiringGM">WiringGM</option>
<option value="XFan">XFan</option>
<option value="RFan">RFan</option>
<option value="SFan">SFan</option>
<option value="OAHood">OAHood</option>
<option value="XAHood">XAHood</option>
<option value="XALouver">XALouver</option>
<option value="OALouver">OALouver</option>
<option value="SteamCoil">SteamCoil</option>
<option value="HWCoil">HWCoil</option>
<option value="CHWCoil">CHWCoil</option>
<option value="CondCoil">CondCoil</option>
<option value="DXCoil">DXCoil</option>
<option value="F&BP">F&BP</option>
<option value="Xfrmr">Xfrmr</option>
<option value="WCCond">WCCond</option>
<option value="PLFrHX">PlFrHX</option>
</select>
</td>
</table>
JS code for adding rows to table
<script>
function incrementUnitId(unitId) {
var arr = unitId.split('-');
if (arr.length === 1) {return;} // The unit id is not valid;
var number = parseInt(arr[1]) + 1;
return arr[0] + '-' + (number < 10 ? 0 : '') + number;
}
function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append to
var clone = row.cloneNode(true); // copy children too
row.id = "oldRow"; // We want to take the last value inserted
clone.cells[1].childNodes[1].value = incrementUnitId(clone.cells[1].childNodes[1].value)
table.appendChild(clone); // add new row to end of table
}
function deleteRow() {
document.getElementById("myTable").deleteRow(-1);
}
</script>

hey, I know i'm little late but you need to destroy your chosen and
then append and recontruct it like this:
$(function() {
$(".chzn-select").chosen();
});
function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append
$(".chzn-select").chosen("destroy")
var clone = $('#newId').get(0).outerHTML;
var tblRow = '<tr><td> <input type="text"></td>';
tblRow += '<td> <input type="text"></td>';
tblRow += '<td>'+$("#selectJob").html()+'</td>';
tblRow += '<td> <input type="text"></td>';
tblRow += '<td >'+clone+'</td>';
tblRow += '<td </td> <td </td> ';
tblRow+='</tr>';
$("#myTable").append(tblRow);
$('.chzn-select').chosen()
}
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css" rel="stylesheet" type="text/css">
<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p>
<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>
<br>
<table id="myTable" class="form">
<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Unit Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>
<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" value=" " readonly>
</td>
<td>
<input type="text" name="UnitID[]" value=" " readonly>
</td>
<td>
<div id="selectJob">
<select id="JobCode" name="JobCode[]" style="background-color:#FFE68C" required>
<option></option>
<option>F</option>
<option>FS</option>
<option>PD</option>
</select>
</div>
</td>
<td>
<input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
</td>
<td>
<select class="chzn-select" id="newId" multiple="true" data-placeholder="Select Scope's" name="Scope[]" style="width:300px;" required>
<option value="100OA">100OA</option>
<option value="BTank">BTank</option>
<option value="WSEcon">WSEcon</option>
<option value="NetPkg">NetPkg</option>
<option value="CstmCtrl">CstmCtrl</option>
<option value="CstmFef">CstmRef</option>
<option value="CstmSM">CstmSM</option>
<option value="CstmHV">CstmHV</option>
<option value="CPCtrl">CPCtrl</option>
<option value="DesiHW">DesiHW</option>
<option value="DigScroll">DigScroll</option>
<option value="DigScroll">DFGas</option>
<option value="DWall">DWall</option>
<option value="MZ-DD">MZ-DD</option>
<option value="DPP">DPP</option>
<option value="Encl">Encl</option>
<option value="PlateHX">PlateHX</option>
<option value="ERW">ERW</option>
<option value="ERWModule">ERWModule</option>
<option value="ERVMod">ERVMod</option>
<option value="EvapBP">EvapBP</option>
<option value="PreEvap">PreEvap</option>
<option value="XP">XP</option>
<option value="Extend">Extend</option>
<option value="FanWall">FanWall</option>
<option value="FillStat">FillStat</option>
<option value="FFilt">FFilt</option>
<option value="PFilt">PFilt</option>
<option value="CarbFilt">CarbFilt</option>
<option value="CustFilt">CustFilt</option>
<option value="MGH(H)">MGH(H)</option>
<option value="GHeat">GHeat</option>
<option value="HighStatic">HighStatic</option>
<option value="HGBP">HGBP</option>
<option value="HGRH">HGRH</option>
<option value="HPConv">HPConv</option>
<option value="GFHumid">GFHumid</option>
<option value="TOHumid">TOHumid</option>
<option value="MHGRH">MHGRH</option>
<option value="LowAF">LowAF</option>
<option value="LowAFSF">LowAFSF</option>
<option value="LowAmbient">LowAmbient</option>
<option value="MEHeat(R)">MEHeat(R)</option>
<option value="MEHeat(I)">MEHeat(I)</option>
<option value="HGH(R)">MGH(R)</option>
<option value="MGH(H)">MGH(H)</option>
<option value="MtrRR">MtrRR</option>
<option value="MotorGM">MotorGM</option>
<option value="MS-Mod">MZ-Mod</option>
<option value="NatConv">NatConv</option>
<option value="OAFMS">OAFMS</option>
<option value="OSMotor">OSMotor</option>
<option value="MZ-VAV">MZ-VAV</option>
<option value="Mon">Mon</option>
<option value="PumpPkg">PumpPkg</option>
<option value="PipePkg">PipePkg</option>
<option value="ServLite">ServLite</option>
<option value="SparkRes">SparkRes</option>
<option value="SSLube">SSLube</option>
<option value="UVLights">UVLights</option>
<option value="VSComp">VSComp</option>
<option value="LCVAV">LCVAV</option>
<option value="XFVAV">XFVAV</option>
<option value="WCCond">WCCond</option>
<option value="WSHPConv">WSHPConv</option>
<option value="3RConv">3RConv</option>
<option value="WiringGM">WiringGM</option>
<option value="XFan">XFan</option>
<option value="RFan">RFan</option>
<option value="SFan">SFan</option>
<option value="OAHood">OAHood</option>
<option value="XAHood">XAHood</option>
<option value="XALouver">XALouver</option>
<option value="OALouver">OALouver</option>
<option value="SteamCoil">SteamCoil</option>
<option value="HWCoil">HWCoil</option>
<option value="CHWCoil">CHWCoil</option>
<option value="CondCoil">CondCoil</option>
<option value="DXCoil">DXCoil</option>
<option value="F&BP">F&BP</option>
<option value="Xfrmr">Xfrmr</option>
<option value="WCCond">WCCond</option>
<option value="PLFrHX">PlFrHX</option>
</select>
</td>
</table>

Multiple select change event handle

html:
<tr><td>
<select id="fruits" name = "fruits[]">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="grape">Grape</option>
<option value="watermelon">watermelon</option>
</select>
</td>
<td>
<input type="text" name="color[]" />
</td>
<tr>
<td>
<select id="fruits" name = "fruits[]">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="grape">Grape</option>
<option value="watermelon">watermelon</option>
</select>
</td>
<td>
<input type="text" name="color[]" />
</td></tr>
js :
$(function() {
$('#fruits').change(function(e) {
alert("a");
var selected = $(e.target).val();
console.dir(selected);
});
});
The user can add unlimited select option panel.
I want to handle which select option change.
For example if second select option is changed, i want to change second select option' s input color. How can i handle them ?

Use class instead of ID if you have multiple elements.
$(function() {
$('.fruits').change(function(e) {
var selected = $(this).val();
alert(selected);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td>
<select class="fruits" name="fruits[]">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="grape">Grape</option>
<option value="watermelon">watermelon</option>
</select>
</td>
<td>
<input type="text" name="color[]" />
</td>
<tr>
<td>
<select class="fruits" name="fruits[]">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="grape">Grape</option>
<option value="watermelon">watermelon</option>
</select>
</td>
<td>
<input type="text" name="color[]" />
</td>
</tr>
</table>

1) Id must be unique. Change that to class
<select class="fruits" name = "fruits[]">
and now you can use this to detect the current object
$(function() {
$('.fruits').change(function(e) {
alert("a");
var selected = $(e.target).val();
console.dir(selected);
$(this).css("background-color", "colorName"); // or any css property
});
});

Add a class attribute to both selects.
Then you can use that in your jQuery selector. As IDs should be unique.
I.e. if I gave the select an attribute class="fruit" I could then use the following selector.
$(".fruit").change(function() {});

Validate my HTMK form field after my checkbox is checked

I have created an html form with hidden fields that shows after checking checkbox. I want to validate these hidden fields when the checkbox is checked.
style:
.box {
display:none;
}
here javascript code:
$(document).ready(function(){
$('input[type="checkbox"]').click(function() {
if($(this).attr("value")=="red") {
$(".box").toggle();
}
});
});
<form action="thankyou.php" method="post" name="form9" >
<label>First Name:* </label><input type="text" class="FullContactFields" name="Firstname" required title="Specify your first name"> <br><br>
<label>Last Name:* </label><input type="text" class="FullContactFields" name="Lastname" required title="Specify your last name" > <br><br>
<label>Phone:* </label><input type="text" pattern=".{10}|.{10}" required title="Enter your correct 10 digit phone number" class="FullContactFields" name="UserPhone" required ><br><br>
<label>Email:* </label><input type="email" class="FullContactFields" name="UserEmail" required title="Specify your correct email address." ><br><br>
<div class="checkbox">
<input id="check1" type="checkbox" name="colorCheckbox" value="red">
<label for="check1" class="CheckboxLabel">I would also like quotes for moving my vehicle</label>
</div>
<div class="box">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<td width="52%" valign="top" class="txtmatterarl2" rowspan="2">
</td></tbody></table>
<div style="display: block; color:#fff; padding: 28px 0 0 4px;" id="autozone" fade="1" speed="400">
<!--hide /show -->
<table width="100%" cellspacing="1" cellpadding="1" border="0">
<tbody><tr>
<td width="6%" align="left"> </td>
<td width="16%" align="left"><b><font color="#fff" class="headingcontact">Vehicle Details:</font></b></td>
<td width="7%" align="left"> </td>
<td width="71%" align="left" nowrap="nowrap"><b><font color="#fff" class="headingcontact">Vehicle #2 (Optional):</font></b></td>
</tr>
<tr>
<td height="35" align="left" class="nish4"><font color="#fff">Make:</td>
<td align="left">
<select onChange="FillList()" class="TextBox3 nish" id="vehicle1_make" size="1" name="vehicle1_make">
<option selected="selected" value="">Select Vehicle</option>
<option value="Acura">Acura</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="AMC">AMC</option>
<option value="Aston Martin">Aston Martin</option>
<option value="ATV">ATV</option>
<option value="Auburn">Auburn</option>
<option value="Audi">Audi</option>
<option value="Austin-Healey">Austin-Healey</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Bricklin">Bricklin</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevy">Chevy</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daewoo">Daewoo</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Datsun">Datsun</option>
<option value="Delorean">Delorean</option>
<option value="Dodge">Dodge</option>
<option value="Eagle">Eagle</option>
<option value="Edsel">Edsel</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Fisker">Fisker</option>
<option value="Ford">Ford</option>
<option value="Geo">Geo</option>
<option value="GMC">GMC</option>
<option value="Graham">Graham</option>
<option value="Harley Davidson">Harley Davidson</option>
<option value="Honda">Honda</option>
<option value="Hudson">Hudson</option>
<option value="Hummer">Hummer</option>
<option value="Hyundai">Hyundai</option>
<option value="Infiniti">Infiniti</option>
<option value="International">International</option>
<option value="Isuzu">Isuzu</option>
<option value="Jaguar">Jaguar</option>
<option value="Jeep">Jeep</option>
<option value="Kia">Kia</option>
<option value="Lamborghini">Lamborghini</option>
<option value="Land Rover">Land Rover</option>
<option value="Lasalle">Lasalle</option>
<option value="Lexus">Lexus</option>
<option value="Lincoln">Lincoln</option>
<option value="Lotus">Lotus</option>
<option value="Marmon">Marmon</option>
<option value="Maserati">Maserati</option>
<option value="Maybach">Maybach</option>
<option value="Mazda">Mazda</option>
<option value="McLaren">McLaren</option>
<option value="Mercedes-Benz">Mercedes-Benz</option>
<option value="Mercury">Mercury</option>
<option value="Merkur">Merkur</option>
<option value="MG">MG</option>
<option value="MINI">MINI</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Morgan">Morgan</option>
<option value="Nash">Nash</option>
<option value="Nissan">Nissan</option>
<option value="Oldsmobile">Oldsmobile</option>
<option value="Opel">Opel</option>
<option value="Packard">Packard</option>
<option value="Panoz">Panoz</option>
<option value="Plymouth">Plymouth</option>
<option value="Pontiac">Pontiac</option>
<option value="Porsche">Porsche</option>
<option value="Renault">Renault</option>
<option value="Rolls-Royce">Rolls-Royce</option>
<option value="Saab">Saab</option>
<option value="Saturn">Saturn</option>
<option value="Scion">Scion</option>
<option value="Smart">Smart</option>
<option value="Sterling">Sterling</option>
<option value="Studebaker">Studebaker</option>
<option value="Subaru">Subaru</option>
<option value="Sunbeam">Sunbeam</option>
<option value="Suzuki">Suzuki</option>
<option value="Talbo">Talbo</option>
<option value="Tesla">Tesla</option>
<option value="Toyota">Toyota</option>
<option value="Triumph">Triumph</option>
<option value="Vanden Plas">Vanden Plas</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Volvo">Volvo</option>
<option value="Willys">Willys</option>
<option value="Yugo">Yugo</option>
</select>
</td>
<td align="left" class="nish4"><font color="#fff">Make:</td>
<td align="left" >
<select onChange="FillList2()" class="TextBox3 nish" id="vehicle2_make" size="1" name="vehicle2_make">
<option selected="selected" value="">Select Vehicle</option>
<option value="Acura">Acura</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="AMC">AMC</option>
<option value="Aston Martin">Aston Martin</option>
<option value="ATV">ATV</option>
<option value="Auburn">Auburn</option>
<option value="Audi">Audi</option>
<option value="Austin-Healey">Austin-Healey</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Bricklin">Bricklin</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevy">Chevy</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daewoo">Daewoo</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Datsun">Datsun</option>
<option value="Delorean">Delorean</option>
<option value="Dodge">Dodge</option>
<option value="Eagle">Eagle</option>
<option value="Edsel">Edsel</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Fisker">Fisker</option>
<option value="Ford">Ford</option>
<option value="Geo">Geo</option>
<option value="GMC">GMC</option>
<option value="Graham">Graham</option>
<option value="Harley Davidson">Harley Davidson</option>
<option value="Honda">Honda</option>
<option value="Hudson">Hudson</option>
<option value="Hummer">Hummer</option>
<option value="Hyundai">Hyundai</option>
<option value="Infiniti">Infiniti</option>
<option value="International">International</option>
<option value="Isuzu">Isuzu</option>
<option value="Jaguar">Jaguar</option>
<option value="Jeep">Jeep</option>
<option value="Kia">Kia</option>
<option value="Lamborghini">Lamborghini</option>
<option value="Land Rover">Land Rover</option>
<option value="Lasalle">Lasalle</option>
<option value="Lexus">Lexus</option>
<option value="Lincoln">Lincoln</option>
<option value="Lotus">Lotus</option>
<option value="Marmon">Marmon</option>
<option value="Maserati">Maserati</option>
<option value="Maybach">Maybach</option>
<option value="Mazda">Mazda</option>
<option value="McLaren">McLaren</option>
<option value="Mercedes-Benz">Mercedes-Benz</option>
<option value="Mercury">Mercury</option>
<option value="Merkur">Merkur</option>
<option value="MG">MG</option>
<option value="MINI">MINI</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Morgan">Morgan</option>
<option value="Nash">Nash</option>
<option value="Nissan">Nissan</option>
<option value="Oldsmobile">Oldsmobile</option>
<option value="Opel">Opel</option>
<option value="Packard">Packard</option>
<option value="Panoz">Panoz</option>
<option value="Plymouth">Plymouth</option>
<option value="Pontiac">Pontiac</option>
<option value="Porsche">Porsche</option>
<option value="Renault">Renault</option>
<option value="Rolls-Royce">Rolls-Royce</option>
<option value="Saab">Saab</option>
<option value="Saturn">Saturn</option>
<option value="Scion">Scion</option>
<option value="Smart">Smart</option>
<option value="Sterling">Sterling</option>
<option value="Studebaker">Studebaker</option>
<option value="Subaru">Subaru</option>
<option value="Sunbeam">Sunbeam</option>
<option value="Suzuki">Suzuki</option>
<option value="Talbo">Talbo</option>
<option value="Tesla">Tesla</option>
<option value="Toyota">Toyota</option>
<option value="Triumph">Triumph</option>
<option value="Vanden Plas">Vanden Plas</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Volvo">Volvo</option>
<option value="Willys">Willys</option>
<option value="Yugo">Yugo</option>
</select>
</td>
</tr>
<tr>
<td height="35" align="left" class="nish4"><font color="#fff">Model:</td>
<td align="left">
<select class="TextBox3 nish" id="vehicle1_model" name="vehicle1_model" >
<option value="0"> Please Select </option>
</select>
</td>
<td align="left" class="nish4"><font color="#fff">Model:</td>
<td align="left" style="padding: 10px 0 12px;">
<select class="TextBox3 nish" id="vehicle2_model" name="vehicle2_model">
<option value="0"> Please Select </option>
</select>
</td>
</tr>
<tr>
<td height="35" align="left" class="nish4"><font color="#fff">Year:</td>
<td align="left"><input type="text" size="15" id="vehicle1_year" class="TextBox3 nish" name="vehicle1_year"></td>
<td align="left" class="nish4"><font color="#fff">Year:</td>
<td align="left"><input type="text" size="15" id="vehicle2_year" class="TextBox3 nish" name="vehicle2_year"></td>
</tr>
<tr>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
</tbody></table>
</div>
</div>
<input type="hidden" name="subid" id="subid" value='<?php echo $subid; ?>'/><input type="submit" value="Get Your FREE Quotes" class="OrangeButton"></td>
</form>
</div></div>

$('form[name="form9"]').on('submit', function () {
var subidValue = $("#subid").val();
// Now do all the validations that you want to do on the value stored in the variable subidValue
});
$('input[type="checkbox"]').click(function() {
if($(this).attr("value")=="red") {
$(".box").toggle();
// Get/Select all the fields that you want to validate right here and run the validations...
}
});
register click event for all the checkboxes
if the value of the clicked checkbox is 'red'
then select all the elements with class 'box' and toggle them
after this since you have landed in a place where the checkbox with value 'red' is clicked, now you can write your validation code.
Hope this explains...

$('form[name="form9"]').on('submit', function () {
var subidValue = $("#subid").val();
// Now do all the validations that you want to do on the value stored in the variable subidValue
});

add 2 values and total them in one innerHTML

I am still learning js, and am stuck once again, I am trying to add 2 drop down menu values and total them in one innerHTML.
I am trying to take the value2 from Phones/Devices (item) then add the value from the New Activation (item1) drop down and total them in the Commission innerHTML. In the js, the commission line is cost.
I have tried adding the element in the cost line, and that did not work. also tried adding the item itself to the cost line.
here is the html and js
<table width="50%" border="0">
<tr>
<td width="20%"><div align="center">item</div></td>
<td width="20%"><div align="center">New Activation</div></td>
<td width="20%"><div align="center">Commission</div></td>
<td width="20%"><div align="center">Price</div></td>
<td width="20%"><div align="center">MEID</div></td>
<td width="20%"><div align="center">Number</div></td>
</tr>
<td><div class="styled" align="center">
<select name="item" id="item">
<option value="">Phones/Devices</option>
<option value="">-----APPLE-----</option>
<option value="200.00" value2="20.00" value3="iPhone4">iPhone 4 8GB</option>
<option value="225.00" value2="20.00" value3="iPhone416">iPhone 4 16GB</option>
<option value="250.00" value2="20.00" value3="iPhone432">iPhone 4 32GB</option>
<option value="275.00" value2="20.00" value3="iPhone464">iPhone 4 64GB</option>
<option value="300.00" value2="20.00">iPhone 4S 8GB</option>
<option value="325.00" value2="20.00">iPhone 4S 16GB</option>
<option value="350.00" value2="20.00">iPhone 4S 32GB</option>
<option value="375.00" value2="20.00">iPhone 4S 64GB</option>
<option value="400.00" value2="20.00">iPhone 5</option>
<option value="500.00" value2="30.00">iPhone 5C</option>
<option value="625.00" value2="30.00">iPhone 5S</option>
<option value="">-----BlackBerry-----</option>
<option value="75.00" value2="5.00">Curve</option>
<option value="100.00" value2="5.00">Bold</option>
<option value="225.00" value2="10.00">Q10</option>
<option value="250.00" value2="10.00">Z10</option>
<option value="">-----HTC-----</option>
<option value="100.00" value2="5.00">Incredible</option>
<option value="150.00" value2="5.00">Incredible 2</option>
<option value="150.00" value2="5.00">Evo</option>
<option value="125.00" value2="5.00">Evo Shift</option>
<option value="200.00" value2="10.00">Evo LTE</option>
<option value="175.00" value2="10.00">Rhyme</option>
<option value="225.00" value2="10.00">Rezound</option>
<option value="400.00" value2="20.00">DNA</option>
<option value="450.00" value2="20.00">HTC One</option>
<option value="600.00" value2="20.00">HTC One M8</option>
<option value="">-----Huawei-----</option>
<option value="100.00" value2="5.00">Ascend Y</option>
<option value="150.00" value2="5.00">Ascend Plus</option>
<option value="">-----LG-----</option>
<option value="50.00" value2="5.00">Optimus Dynamic</option>
<option value="100.00" value2="5.00">Optimus Zip</option>
<option value="75.00" value2="5.00">Vortex</option>
<option value="100.00" value2="5.00">Enlighten</option>
<option value="250.00" value2="10.00">Lucid</option>
<option value="200.00" value2="10.00">Revolution</option>
<option value="250.00" value2="10.00">Spectrum</option>
<option value="450.00" value2="20.00">G2</option>
<option value="">-----Motorola-----</option>
<option value="100.00" value2="5.00">Droid 2</option>
<option value="175.00" value2="5.00">Droid 3</option>
<option value="200.00" value2="10.00">Droid 4</option>
<option value="225.00" value2="10.00">Bionic</option>
<option value="250.00" value2="10.00">Razr</option>
<option value="275.00" value2="10.00">Razr Maxx</option>
<option value="300.00" value2="10.00">Razr HD</option>
<option value="350.00" value2="20.00">Moto X</option>
<option value="300.00" value2="20.00">Moto G</option>
<option value="350.00" value2="20.00">Droid Ultra</option>
<option value="">-----SAMSUNG-----</option>
<option value="200.00" value2="10.00">Galaxy Stellar</option>
<option value="250.00" value2="10.00">Galaxy Stratosphere 2</option>
<option value="225.00" value2="10.00">Galaxy Nexus</option>
<option value="225.00" value2="5.00">Epic 4G</option>
<option value="250.00" value2="10.00">Galaxy S2</option>
<option value="300.00" value2="20.00">Galaxy S3</option>
<option value="450.00" value2="20.00">Galaxy S4</option>
<option value="650.00" value2="30.00">Galaxy S5</option>
<option value="450.00" value2="20.00">Galaxy Note ll</option>
<option value="600.00" value2="30.00">Galaxy Note lll</option>
</select>
</div></td>
<td><div class="styled" align="center">
<select name="item1" id="item1">
<option value="">New Activation?</option>
<option value="5.00">YES</option>
<option value="0.00">NO</option>
</select>
</div></td>
<span style="visibility:hidden;display:none;" id="phones"></span>
<td><div align="center">
<span id="cost"></span>
</div></td>
<td><div align="center">
<span id="price"></span>
</div></td>
<td>
<div align="center">
<input name="meid" type="Text" id="meid"/>
</div>
</td>
<td>
<div align="center">
<input name="number" type="Text" id="number"/>
</div>
</td>
</tr>
and the javascript
var item = document.getElementById('item');
var item1 = document.getElementById('item1');
item.onchange = function() {
price.innerHTML = "$" + this.value;
cost.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
phone.innerHTML = "" + (this[this.selectedIndex].getAttribute('value3'));
};
and here is a jsfiddle
after messing around with this modified script i think that this is the line that is not working properly
var commission = +phoneEl.getAttribute("value2");
I cant figure out what is wrong. http://jsfiddle.net/3zf8G/4/

Here:
var phoneEl = document.getElementById('item');
var activationEl = document.getElementById('item1');
function updatePrice() {
var phonePrice = +phoneEl.value;
price.innerHTML = "$"+phonePrice;
}
function updateCommission() {
var commission = +phoneEl.options[phoneEl.selectedIndex].getAttribute("value2"),
activationPrice = +activationEl.value,
totalCommission = commission + activationPrice;
cost.innerHTML = "$" + totalCommission;
}
phoneEl.onchange = function() {
updatePrice();
updateCommission();
};
activationEl.onchange = function() {
updatePrice();
updateCommission();
};
fiddle: http://jsfiddle.net/3zf8G/5/
You're not converting the values stored in your value and value2 attributes to numbers; you can parse a string into a number by preceding it with a +. And you're not watching for changes to the activation drop down. Also the variable phone is not defined. I changed your variable names for the sake of clarity.

Develop Reference

JavaScript is the programming language of the Web.

Not able to get data of select Item using jquery - javascript

Related

Replace value from select inside hidden input

jquery chosen plugin with dynamic table

Multiple select change event handle

Validate my HTMK form field after my checkbox is checked

add 2 values and total them in one innerHTML

Categories

Resources