jQuery set value to delegated input fields - javascript

I have the HTML code as follows.
<table id="items">
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">-</a></div></td>
<td><input type="text" id="slslno" class="slno"/></td>
<td><input type="text" class="cost"/></td>
<td><input type="text" class="qty"/></td>
<!-- <td><span class="price"></span></td>-->
<td class="price"></td>
<a class="add" id="addrow" href="javascript:;" title="Add a row">+</a> </tr>
</table>
It has a button named "Add a row" which adds more rows dynamically.
Then I have this bind, which calls an update function during blur of the slno field.
function bind()
{
$(".slno").blur(update_unitcost);
}
The function update_unitcost is as follows.
function update_unitcost()
{
var unitprice1=$(this).val();
unitprice={"unitpricereal":unitprice1};
$.ajax({
type: "POST",
url: "findcost.php",
data: unitprice,
success: function(unitp){
$( ".cost" ).val(unitp);
}
});
}
In the above function, I am able to get the values of with the this selector, but when it comes to setting the value in the following line,
$( ".cost" ).val(unitp);
It just resets every ".cost" classes to that particular number. How can I set values to individual delegated rows? I tried the following approach too, but it failed.
var row = $(this).parents('.item-row');
row.find('.cost').val(unitp);

Set a variable in your function to only target the specific .cost element you wish to update instead of all of them.
function update_unitcost()
{
var unitprice1=$(this).val();
var costItem = $(this).parent().parent().find('td input.cost');
unitprice={"unitpricereal":unitprice1};
$.ajax({
type: "POST",
url: "findcost.php",
data: unitprice,
success: function(unitp){
costItem.val(unitp);
}
});
}

Related

jQuery.ajax - Updating a table cell with new value

Good evening. The code below is intended to update a couple of table cells with a new quantity and new checked date. However, it only updates the first row in the table. Any help appreciated.
$(document).ready(function() {
$("form").on("submit", function(event) {
event.preventDefault();
var res = $(this).serialize();
var req = $.ajax({
url: '/stock/update',
type: 'POST',
data: res,
dataType: 'json',
success: function(response) {
//console.log(response);
$('#qty').text(response.qty_new);
$('#date').text(response.date);
}
});
});
});
Here is the HTML as requested:
<table>
<th>Part</th>
<th>Location</th>
<th>Quantity</th>
<th>Date Checked</th>
<th>New Quantity</th>
<th>Update</th>
% for row in stock:
<tr>
<td id='part'>{{row['part']}}</td>
<td id='location'>{{row['location']}}</td>
<td id='qty'>{{row['qty']}}</td>
<td id='date'>{{row['date']}}</td>
<form>
<input type='hidden' name='part' value="{{row['part']}}">
<input type='hidden' name='location' value="{{row['location']}}">
<td><input type='number' name='qty_new' style='width: 4em;'></td>
<td><button id='update_qty'>Save</button></td>
</form>
</tr>
% end
</table>
Firstly, the cells should have classes instead of IDs because there are duplicates.
<td class='part'>{{row['part']}}</td>
<td class='location'>{{row['location']}}</td>
<td class='qty'>{{row['qty']}}</td>
<td class='date'>{{row['date']}}</td>
<form>
<input type='hidden' name='part' value="{{row['part']}}">
<input type='hidden' name='location' value="{{row['location']}}">
<td><input type='number' name='qty_new' style='width: 4em;'></td>
<td><button class='update_qty'>Save</button></td>
</form>
Next, you'll need a way to select these based on the form that's being submitted.
$(document).ready(function() {
$("form").on("submit", function(event) {
event.preventDefault();
var $form = $(this);
var res = $form.serialize();
var req = $.ajax({
url: '/stock/update',
type: 'POST',
data: res,
dataType: 'json',
success: function(response) {
$form.siblings('.qty').text(response.qty_new);
$form.siblings('.date').text(response.date);
}
});
});
});
$(this) gets the jQuery-equivalent current scope of this, which is the form. Then the form's siblings are searched for the correct classes and the elements are modified.

Jquery closest input in dynamic table

I am a beginner in Jquery and Rails.
I am trying to fetch data from rails controller and set the same to text fields located in Dynamic table.
HTML
<tbody id="template">
<tr>
<td>
<select name="order[order_placed][][itemname]" id="order_place_id" class="form-control delete-comment" style="width: 300px">
<option value=""></option>
<% Item.all.each do |item| %>
<option value="<%= item.item_name %>">
<%= item.item_name %>
</option>
<% end %>
</select>
</td>
<td><input name="order[order_placed][][quantity]" type="text" size='10' class="form-control" /></td>
<td><input name="order[order_placed][][unitprice]" type="text" size='10' class="form-control" /></td>
<td><input name="order[order_placed][][tax]" type="text" size='10' class="form-control"/></td>
<td><input name="order[order_placed][][discount]" type="text" size='10' class="form-control"/></td>
<td><input name="order[order_placed][][itemtotalprice]" type="text" size='10' class="form-control" /></td>
<td>
<button type="button" class="btn btn-default btn-sm sub" onClick="$(this).closest('tr').remove();">
<span class="glyphicon glyphicon-minus"></span>
</button>
</td>
</tr>
</tbody>
JS
$(document).on('change', 'select', function() { //var url = $('.delete-comment').attr('data-url');
$.ajax({
url: "/items/getdata",
type: 'get',
data: {data_value: $(this).val()},
dataType: 'json',
success: function (data) { $(this).closest('tr').next('td').next('td').next('td').find('input[name="order[order_placed][][unitprice]"]').val(data.unit_price);
$('input[name="order[order_placed][][tax]"]').val(data.tax);
$('input[name="order[order_placed][][discount]"]').val(data.discount);
}, error: function () {
alert('error');
}
});
});
Data is fetched properly and is set to the text boxes if we assign them directly(data.tax and data.discount are set properly).
As the table is dynamic, i am trying to put data by finding the closest tr element followed by next td(Select element) again next td(Quantity) again next td(Unit Price). [This is the text field i wanted to place data.]
But this is not working properly.
Can some one please help.
Advance Thanks...!!!
this doesn't refers to current element the success callback, thus $(this) will not work.
You can cache the reference of TR in a variable which can be used is the success callback
$(document).on('change', 'select', function() { //var url = $('.delete-comment').attr('data-url');
//Keep a reference of current element
var tr = $(this).closest('tr');
$.ajax({
...
success: function(data) {
tr.find('input[name="order[order_placed][][unitprice]"]').val(data.unit_price);
tr.find('input[name="order[order_placed][][tax]"]').val(data.tax);
tr.find('input[name="order[order_placed][][discount]"]').val(data.discount);
},
});
});
OR, You can set context option of $.ajax()
$(document).on('change', 'select', function() {
$.ajax({
...
context: $(this).closest('tr'), // Set context to TR
success: function(data) {
$(this).find('input[name="order[order_placed][][unitprice]"]').val(data.unit_price);
$(this).find('input[name="order[order_placed][][tax]"]').val(data.tax);
$(this).find('input[name="order[order_placed][][discount]"]').val(data.discount);
},
});
});

Combine Checkbox value with Selection Option value in form

I have a form that has a list of checkboxes and selection option. It's basically an order form. When a customer clicks on a checkbox I'd like the value of the Select Option as well as the Checkbox's value to be sent with the form.
I really don't know AJAX. I'm using a script I found to get all the data to a php file. What do I need to add to the jquery to make the option and checkbox value of all the checked items combine as one variable?
<table>
<tr>
<td>
<select class="qty" name="qty" id="qty">
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>
<input id="Part1_1" name="Part[]" type="checkbox" value="Part 1">
</td>
</tr>
<tr>
<td>
<select class="qty" name="qty" id="qty1">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>
<input id="Part1_2" name="Part[]" type="checkbox" value="Part 2">
</td>
</tr>
</table>
<script>
$(document).ready(function(){
$("#contact-form").on("submit",function(e){
e.preventDefault();
var sendData = $( this ).serialize();
$.ajax({
type: "POST",
url: "orderform.php",
data: sendData,
success: function(data){
$(".response_msg").text(data);
$(".response_msg").slideDown();
}
});
});
});
</script>
EDIT:
I'd like to pass along to the php a variable for each part. So if Part 1 is checked then the value of the checkbox and the value of the quantity will be grouped together.
You could use a FormData object which would allow you to append the value of the ComboBox and Select list and send that in an ajax request.
Check this FormData
You need to add the select value this way. And you should also add the new parameter in your method on the server. In the example I named it as select_param.
$(document).ready(function() {
$("#contact-form").on("submit", function(e) {
e.preventDefault();
var sendData = $(this).serialize();
$.ajax({
type: "POST",
url: "orderform.php",
data: sendData + "&select_param1=" + $("#qty option:selected").text() +
"&select_param2=" + $("#qty1 option:selected").text(),
success: function(data) {
$(".response_msg").text(data);
$(".response_msg").slideDown();
}
});
});
});

Display ajax response in Table

display.html :
<div id="display_result" style="display: none"><table class="table">
<p style="float: right;" >Select All<input type="checkbox" class="allcb" data-child="chk" checked/> </p>
<thead>
<tr>
<th>Die No</th>
<th> Status </th>
<th> Location </th>
<th>Select</th>
</tr>
</thead>
<tbody>
</table>
<div id ="issue_button">
<input type="submit" id="submit" class="btn btn-success " value="Recieve" style="width: 150px;"></div>
</div>
Ajax:
var data = JSON.stringify($("#form").serializeArray());
// alert(data);
$.ajax({ // Send the credential values to another checker.php using Ajax in POST menthod
type: 'POST',
data: {
list: data
},
url: 'die_recieving_process.php',
success: function(data) ){
$('#display_result').html(data);
}
});
die_recieving_process.php
while($fetch = mysql_fetch_array($query))
{
if($fetch[1] == "Table Rack" )
{
echo '<tr class="success"><td>'.$fetch[0].'</td><td>'.$fetch[1].'</td><td>'.$fetch[3] . '</td> <td><input type=checkbox class="chk" id=check_box value= '.$fetch[2].' name= check_list[] </td> </tr>';
}
else
{
echo '<tr class="warning"><td>'.$fetch[0].'</td><td>'.$fetch[1].'</td><td>'.$fetch[3] . '</td> <td><input type=checkbox class="chk" id=check_box value= '.$fetch[2].' name= check_list[] checked </td> </tr>';
}
}
Hi friends in display.html I have to display the result processed in die_recieving_process.php . In ajax i've sent all the value to die_recieving_process.php and after fetching the result i've to display the result in display.html
First in you Javascript, you have 2 errors:
Your code overrides existing contents of div, which is the whole table...
And you have one unnecessary bracket in success function declaration
So change this:
success: function(data) ){
$('#display_result').html(data);
}
To this:
success: function(data) {//remove unnecessary bracket
$('#display_result tbody').html(data);//add data - to tbody, and not to the div
}
By the way, using $.post() you can write your javascript code shorter, like this:
var data = JSON.stringify($("#form").serializeArray());
$.post('die_recieving_process.php',{list:data},function(responseData){
$('#display_result tbody').html(responseData); //added to tbody which is inside #display_result
$('#display_result').show();
});
Second you need to close your tbody tag inside the table
Create html table with empty body tags and body id = tBody for example:
<table>
<caption>Smaple Data Table</caption>
<thead>
<tr>
<th>Field 1</th>
<th>Field 2</th>
</tr>
</thead>
<tbody id="tBody"></tbody>
</table>
Use the jquery ajax to load json data in the created table after load button is clicked assuming that my json file is storing userData like userName, age, city:
$('#btnLoadAll').click(function () {
$.ajax({
url: "url/data.json",
dataType: 'json',
success: function (resp) {
var trHTML = '';
$.each(resp, function (i, userData) {
trHTML +=
'<tr><td>'
+ userData.userName
+ '</td><td>'
+ userData.age
+ '</td><td>'
+ userData.city
+ '</td></tr>';
});
$('#tBody').append(trHTML);
},
error: function (err) {
let error = `Ajax error: ${err.status} - ${err.statusText}`;
console.log(error);
}
})
});
If you do not see result, try to remove style="display: none" in display.html

how to update several span elements based on user input HTML

I have a huge form with at least 200 input fields- text/radio/checkboxes.
I have divided this into several sections to structure it well and there is an update button for each section which takes the user input and persists it to the db. This is done by Ajax so I don't have to reload the page.
How can I easily update the <span>s corresponding to the input fields with whatever the user inputs without reloading the page? DO I have to do a $("#spanid").html($("#input1").val()) on each <span> item or is there an easy way to do this?
Here's the code for a fraction of the form.
HTML
<form id="history" name="history" action="" method="post">
<table class="normal">
<tr><th colspan="8">HISTORY</th>
</tr>
<tr><td style="width:200px"><b>Chief Complaint Location</b></td>
<td style="width:450px"><b>Comment</b></td>
<td><b> Previous</b> </td>
</tr>
<tr><td>Head</td>
<td ><input type="text" maxlength="100" name="headH" id="headH" ></td>
<td class="data2"><span id="headSpan"><%=msmtCommentHead%></span></td>
</tr>
<tr><td>Neck</td>
<td><input type="text" maxlength="100" name="neckH" id="neckH" ></td>
<td class="data2"><span id="neckSpan"><%=msmtCommentNeck%></span></td>
</tr>
<tr><td>Upper Extremeties</td>
<td><input type="text" maxlength="100" name="upperExtremetiesH" id="upperExtremetiesH"></td>
<td class="data2"><span id="ueSpan"><%=msmtCommentUpperExtremeties%></span></td>
</tr>
<tr><td>Thoracic Spine</td>
<td><input type="text" maxlength="100" name="thoracicSpineH" id="thoracicSpineH"></td>
<td class="data2"><span id="tsSpan"><%=msmtCommentThoracicSpine%></span></td>
</tr>
<tr><td><input type="button" id="submitHistory" value="Update"/></td></tr>
</table>
</form>
Javascript:
$(function(){
$("#submitHistory").click(function() {
var query = $("#history").serialize();
$.ajax( {
type: "POST",
url: "/oscar/cmcc/History.do",
dataType: "json",
data: query
});
document.getElementById('history_cmcc').reset();
var date = new String("<%=date%>");
$("#headSpan").innerHTML = $("#headH").val()+ "," + date;
$("#neckSpan").innerHTML = $("#neckH").val() + ","+ date;
$("#tsSpan").innerHTML = $("#thoracicSpineH").val() + ","+ date;
$("#lsSpan").innerHTML = $("#lumbarSpineH").val() + ","+ date;
$("#leSpan").innerHTML = $("#lowerExtremetiesH").val() + ","+ date;
$("#chSpan").innerHTML = $("#chestHeartH").val() + ","+ date;
}
Thanks!
In general you can do this:
$('input[type=text]').each(function() {
$(this).closest('tr').find('span').html($(this).val());
});
$('input:checked').each(function() {
$(this).closest('tr').find('span').html($(this).val());
});
Update per OP comment:
In your example if you wanted to put the label that is to the left of a radio button inside the span you could do this. This depends on your specific requirements.
$('input[type=radio]:checked').each(function() {
$(this).closest('tr').find('span').html($(this).closest('tr').find('td:eq(0)').text());
});
$(':input').each(function() {
$(this).closest('tr').find('span').html(this.value);
});
:input applied for all inputs. Also can use input.

Categories