I have table with default amount and pre-number select option on top. When select a new price will change in each row's input. Here I want the new number from select calculate the total price into the next row automatically.
$('select.set_price').change(function() {
var pset = $(this).data('pset');
$('td.' + pset).find('input.price').val($(this).val());
});
//calc
$('.price').keyup(function() {
var i_pay = $(this).closest('tr').find('#pay').text();
var i_bet = $(this).val();
var total = (i_pay * i_bet);
$(this).closest('tr').find('#pay').html(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr>
<th class="align-middle text-center">#</th>
<th>
<select class="form-select set_price" data-pset="p_3hi">
<option value="" disabled selected>Order</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</th>
<th>total</th>
</tr>
<tr>
<td class="align-middle text-center">1</td>
<td class="w-10 p_3hi"><input type="number" class="form-control price" name="price1" value="1" /></td>
<td class="align-middle text-center">
<p id="pay">900</p>
</td>
</tr>
<tr>
<td class="align-middle text-center">2</td>
<td class="w-10 p_3hi"><input type="number" class="form-control price" name="price2" value="1" /></td>
<td class="align-middle text-center">
<p id="pay">800</p>
</td>
</tr>
</table>
What I expect is when I select 5. The #1 row's total would be 5*900=4500 and the #2 would be 5*800=4000. Please find the fiddle here : https://jsfiddle.net/w56940ez/
First change $('.price').keyup(function(){}); to $('.price').change(function(){}); or you won't be able to change total value using arrows. If you don't want to use arrows you can keep keyup event.
To automatically change the value of the total column you just need to use trigger("change") on your ìnput elements.
If you want the base values to always be 800 and 900, you should use a data-attributes (data-first-value) which will keep this value and which will be used during the calculation.
Identifiers must be unique like #j08691 said. So you have basically two solutions:
use a pay class instead of a pay id. You juste need to replace id="pay" with class="pay" and #pay with .pay
use two identifiers. You need to add another data-attributes (data-id) and use it to get the input you want.
$('select.set_price').change(function() {
var pset = $(this).data('pset');
input_elements = $('td.' + pset).find('input.price');
input_elements.val($(this).val());
input_elements.trigger("change");
});
//calc
$('.price').change(function() {
/*
USING A CLASS FOR BOTH
var i_pay = $(this).closest('tr').find('.pay').attr("data-first-val");
var i_bet = $(this).val();
var total = (i_pay * i_bet);
$(this).closest('tr').find('.pay').html(total);
*/
var i_pay = $("#"+$(this).attr("data-id")).attr("data-first-val");
var i_bet = $(this).val();
var total = (i_pay * i_bet);
$("#"+$(this).attr("data-id")).html(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr>
<th class="align-middle text-center">#</th>
<th>
<select class="form-select set_price" data-pset="p_3hi">
<option value="" disabled selected>Order</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</th>
<th>total</th>
</tr>
<tr>
<td class="align-middle text-center">1</td>
<td class="w-10 p_3hi">
<input type="number" class="form-control price" name="price1" value="1" data-id="pay_1" />
</td>
<td class="align-middle text-center">
<p id="pay_1" data-first-val="900">900</p>
<!--<p class="pay" data-first-val="900">900</p>-->
</td>
</tr>
<tr>
<td class="align-middle text-center">2</td>
<td class="w-10 p_3hi"><input type="number" class="form-control price" name="price2" value="1" data-id="pay_2"/></td>
<td class="align-middle text-center">
<p id="pay_2" data-first-val="800">800</p>
<!--<p class="pay" data-first-val="800">800</p>-->
</td>
</tr>
</table>
Related
I have a simple form with dynamic number of rows, each row having the same fields.
<table class="table table-bordered" id="recordsTable">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Name</th>
<th class="text-center">Email</th>
<th class="text-center">Action</th>
<th></th>
</tr>
</thead>
<tbody id="tbody">
<tr id="R1" name="record">
<td class="row-index text-center">
<p>1</p>
</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<!-- Dynamic rows appear here -->
</tbody>
</table>
Form is present as a table, but it's not a strict requirement, so can be flexible here.
On form submission I need this form data to be converted to JSON.
I have this function to convert form into JSON:
function convertFormToJSON(form) {
const array = $(form).serializeArray();
const json = {};
$.each(array, function () {
json[this.name] = this.value || "";
});
return json;
}
But every row overwrites previous one, so I end up having only last row data in this JSON. I realize I need to have a loop and append each new row data into final JSON, but I struggle finding the criterion for this loop. Table rows? Or better not to use table and switch to a different form presentation?
Here is a simple non-jQuery way of collecting all the input data from this form with a variable number of input elements:
document.querySelector("button").onclick=ev=>{
let res=[...document.getElementById("tbody").children].map(tr=>
Object.fromEntries([...tr.querySelectorAll("input,select")].map(el=>
[el.name,el.value])));
console.log(res);
}
input,select {width:80px;}
<table class="table table-bordered" id="recordsTable">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Name</th>
<th class="text-center">Email</th>
<th class="text-center">Action</th>
<th></th>
</tr>
</thead>
<tbody id="tbody">
<tr id="R1" name="record">
<td class="row-index text-center">1</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<tr id="R2" name="record">
<td class="row-index text-center">2</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<tr id="R3" name="record">
<td class="row-index text-center">3</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
</tbody>
</table>
<button>collect data</button>
I'm trying to select multiple options on the select box by clicking on different divs or table row.
I have a multiple select named #events.
I'm using the code below which is fully functional with a simple selectbox but not with a multiple one.
$("td.eventID").on("click", function(e) {
var $select = $("select#events");
$select.val($(this).data("value"));
// simulate click:
$select.find(":selected").click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="eventID" data-value="1" style="cursor:pointer;">
FirstEventName
</td>
</tr>
<tr>
<td class="eventID" data-value="11" style="cursor:pointer;">
EV_Hildegard Spinka
</td>
</tr>
<tr>
<td class="eventID" data-value="14" style="cursor:pointer;">
EV_Melody Parker
</td>
</tr>
<tr>
<td class="eventID" data-value="4" style="cursor:pointer;">
EV_Theodore Auer
</td>
</tr>
<tr>
<td class="eventID" data-value="17" style="cursor:pointer;">
EV_Aditya Stracke
</td>
</tr>
</tbody>
</table>
<select name="events[]" id="events" class="form-control" multiple="" required="">
<option value="1">FirstEventName</option>
<option value="14">EV_Melody Parker</option>
<option value="4">EV_Theodore Auer</option>
<option value="17">EV_Aditya Stracke</option>
<option value="11">EV_Hildegard Spinka</option>
</select>
You could separate the multiple values by comma , like data-value="books,html" then split when you're selecting them.
NOTE: To update the view after selecting the options programmatically you could use .change()
$(".eventID").on("click", function(e) {
$("#events").val($(this).data("value").split(',')).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="events" multiple>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
<button class="eventID" data-value="css">css</button>
<button class="eventID" data-value="php">php</button>
<button class="eventID" data-value="books,html">Books + html</button>
I SOLVED thanks to Zakaria Acharki's answer. However, I don't know if it's the best solution but it's working as I want.
I added a hidden input which will recieve all values I want to select.
After that I changed a little bit the JS code and add a new one.
// This code add values to the hidden input with "," and then, selecting every value on multiple select
$("td.eventID").on("click", function(e) {
var group = $('#groupingEvents');
var groupValues = group.val();
if(groupValues == "") {
group.val($(this).data("value") + ',');
} else
group.val(groupValues + $(this).data("value"));
$("#events").val(group.val().split(',')).change();
});
// This code is used if you click the selectbox to choose a new option, you need to send values to hidden input, otherwise, a bug appears.
$("#events").on("click", function() {
var group = $('#groupingEvents');
var selectValues = $(this).val();
if(group.val() == "") {
group.val(selectValues.join(","));
} else
group.val(selectValues.join(",") + ',')
});
$("td.eventID").on("click", function(e) {
var group = $('#groupingEvents');
var groupValues = group.val();
if(groupValues == "") {
group.val($(this).data("value") + ',');
} else
group.val(groupValues + $(this).data("value"));
$("#events").val(group.val().split(',')).change();
});
$("#events").on("click", function() {
var group = $('#groupingEvents');
var selectValues = $(this).val();
if(group.val() == "") {
group.val(selectValues.join(","));
} else
group.val(selectValues.join(",") + ',')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="eventID" data-value="1" style="cursor:pointer;">
FirstEventName
</td>
</tr>
<tr>
<td class="eventID" data-value="11" style="cursor:pointer;">
EV_Hildegard Spinka
</td>
</tr>
<tr>
<td class="eventID" data-value="14" style="cursor:pointer;">
EV_Melody Parker
</td>
</tr>
<tr>
<td class="eventID" data-value="4" style="cursor:pointer;">
EV_Theodore Auer
</td>
</tr>
<tr>
<td class="eventID" data-value="17" style="cursor:pointer;">
EV_Aditya Stracke
</td>
</tr>
</tbody>
</table>
<input type="hidden" id="groupingEvents" value="">
<select name="events[]" id="events" class="form-control" multiple="" required="">
<option value="1">FirstEventName</option>
<option value="14">EV_Melody Parker</option>
<option value="4">EV_Theodore Auer</option>
<option value="17">EV_Aditya Stracke</option>
<option value="11">EV_Hildegard Spinka</option>
</select>
Iam trying to make the select dropdown be responsive to the input box
So when there's sth being enter in the input box (can be anything), the select will change to closed, If nothing is being enter in the input box, the select will be open. Any idea what's wrong with the code.Thanks in advance
$('.input').change(function() {
if ($(this).val() === '') {
$('.msg').text('open');}
else {
$('.msg').text('closed');}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
</table>
I would suggest three changes:
Change the event binding to $('.input').on("input",function() { - it will ensure that the dropdown changes with every keypress rather than on blur. So the user will be able to see the changes as they type in.
Change $(".msg") to $(this).parents("tr").find('.msg'). The former selects all elements in DOM that have .msg class, while the latter only affects the .msg elements belonging to the current tr.
Change .text('open') to .val("open") - this sets the value of the select element.
$('.input').on("input",function() {
if ($(this).val() === '') {
$(this).parents("tr").find('.msg').val('open');
} else {
$(this).parents("tr").find('.msg').val('closed');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px">
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td>
</tr>
<tr>
<td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px">
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td>
</tr>
</table>
Use val() to change the value of the select and use keyup to trigger it if something is being pressed because if you use change it will only trigger if the focus is not already in the input.
$('.input').on('keyup',function() {
if ($(this).val() === '' ) {
$(this).parent().next().children('select').val('open');
}else {
$(this).parent().next().children('select').val('closed');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
</table>
As I commented on the question, use .val() function and introduce the same name as the value to select the value you want.
Take in mind that the code you provided, if there are many .msg dropdowns, it will change it for all of them.
Here is the snippet code.
$('.input').change(function() {
if ($(this).val() === '') {
$(this).parents("tr").find('.msg').val('open');
}
else {
$(this).parents("tr").find('.msg').val('closed');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open">open</option>
<option value="closed">closed</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open">open</option>
<option value="closed">closed</option>
</select>
</td>
</tr>
</table>
My objective is to get the value from span and assign the value to the dropdown on the same row.
Here is my jsFiddle: http://jsfiddle.net/bharatgillala/581hk9Ly/4/
<table id="gridviewInfo" runatr="server">
<tbody>
<tr>
<th scope=col>Available Boys.</th>
<th scope=col>Already Selected Boy</th>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl1" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s2" class="spanclass">tom</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl2" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s1" class="spanclass">harry</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl3" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s3" class="spanclass"></span>
</td>
</tr>
</tbody>
</table>
My objective is to loop through all the spans and if there is any text, get the text and assign the text to the closest dropdown.
I've already answered that for you yesterday. The code is fully commented below:
(function(d) {
// when all the DOMElements are already loaded into the document
d.addEventListener('DOMContentLoaded', function() {
// gets the generated table, and get all the dropdownlists inside it
var table = document.getElementById('gridviewInfo'),
ddls = [].slice.call(table.querySelectorAll('.judges'));
// loop through the dropdownlists
ddls.forEach(function(ddl, i) {
// get the label inside the last td
var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild;
// change the dropdownlist selectedvalue to the label text
ddl.value = lbl.textContent.trim();
});
});
})(document);
<table id="gridviewInfo" runatr="server">
<tbody>
<tr>
<th scope=col>Available Boys.</th>
<th scope=col>Already Selected Boy</th>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl1" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s2" class="spanclass">tom</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl2" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s1" class="spanclass">harry</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl3" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s3" class="spanclass"></span>
</td>
</tr>
</tbody>
</table>
And here is your fiddle updated: http://jsfiddle.net/581hk9Ly/6/
And if you want a jQuery version:
$(document).ready(function() {
$('.spanclass').each(function() {
$(this).closest('tr').find('.judges').val($(this).text());
});
});
I've below HTML,
<table id="_GroupsTable">
<thead>
<tr>
<th style="width: 90%;">
City
</th>
<th style="width: 10%;">
Del
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="_SkillsDropDownList0" name="_SkillsDropDownList0">
<option value="1">All Skills</option>
<option value="2"> Web App</option>
<option selected="selected" value="5"> MVC</option>
<option value="3"> jQuery</option>
<option value="16"> HTML</option>
<option value="4"> CSS</option>
</select>
</td>
<td style="text-align: center;">
<input id="_GroupsRolesCheckbox0" type="checkbox">
</td>
</tr>
</tbody>
<table>
When I tried to read value with below code I'm not getting the values in proper order.
var jdata = $("#_GroupsTable")[0];
var kvpGroups = $.data(jdata, "groupsKvp");
I'm expecting the values in 1 = All Skills, 2 = Web App, 3= jQuery.. basically the same order where values are appearing in the dropdown, however, I'm NOT getting in the same order. Any pointer at the right directions will be appreciated.