serialize inputs inside element (not form) - javascript

I have a HTML like:
<table>
<tr id="01">
<td><input name="x"></td>
<td><input name="y"></td>
</tr>
<tr id="02">
<td><input name="x"></td>
<td><input name="y"></td>
</tr>
</table>
And I'm trying to make a JSON string of the inputs only on a specific row. Would there be a good solution for this? Something like:
json = $('#01').serialize();
but I need a json instead of the URLEncode'd string the serialize() provides.

serialize() won't give you the JSON you're after. It'll only give you a URLEncode'd string. Example:
//test all inputs on row #02
window.tester = function() {
console.log($('#02 input').serialize());
};
//test all inputs
window.tester2 = function() {
console.log($('input').serialize());
};
//test only "y" inputs
window.tester3 = function() {
console.log($("input[name='y']").serialize());
};
<table>
<tr id="01">
<td><input name="x" value="1"></td>
<td><input name="y" value="2"></td>
</tr>
<tr id="02">
<td><input name="x" value="3"></td>
<td><input name="y" value="4"></td>
</tr>
</table>
<div>
<input type="button" onclick="tester()" value="Test Row 02" /><br />
<input type="button" onclick="tester2()" value="Test All Inputs" /><br />
<input type="button" onclick="tester3()" value="Test Only 'y' Inputs" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Produces:
x=3&y=4
x=1&y=2&x=3&y=4
y=2&y=4
If it's JSON you want, then you'll need to be specific about what format you're after. An array? A hash? In any case, the selectors above are what you'll want to start with, then at some point, you'll want to run the value through:
JSON.stringify(myResults);
window.arrayIt = function () {
var arrVal = $('#02 input').toArray();
var arr = arrVal.map(function (i) {
var x = {};
x[i.name] = i.value;
return x;
});
console.log(JSON.stringify(arr));
}
<table>
<tr id="01">
<td><input name="x" value="1"></td>
<td><input name="y" value="2"></td>
</tr>
<tr id="02">
<td><input name="x" value="3"></td>
<td><input name="y" value="4"></td>
</tr>
</table>
<button onclick="arrayIt()">Array It!</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

.serialize() can be used on a collection of inputs.
$("#submit").click(function() {
var data = $("#01 input").serialize();
console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="01">
<td><input name="x"></td>
<td><input name="y"></td>
</tr>
<tr id="02">
<td><input name="x"></td>
<td><input name="y"></td>
</tr>
</table>
<button id="submit">Click</button>
BTW, the result of serialize() isn't JSON, it's application/x-www-form-urlencoded format.

You can use $("#01 input").serialize().
$('#abc').click(function(){
json = $("#01 input").serialize().replace(/%20/g, "+");
console.log(json);
});
<table>
<tr id="01">
<td><input name="x"></td>
<td><input name="y"></td>
</tr>
<tr id="02">
<td><input name="x"></td>
<td><input name="y"></td>
</tr>
</table>
<button id = "abc">serialize 01</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Related

How To Add multiple Button Selections to a Div

So I have A Table With Buttons and match information, I am trying to script a code when I click on the specific button, it adds my selections to div(cart) for example if i click on the first button (1.59), it should add the match Name to the cart (Arsenal-Chelsea) ,The related selection (Arsenal) OR Header Name (Home) and The Value (1.59) in this order
Arsenal-Chelsea
Arsenal
1.59
Plus, I need it to be functional whenever I Re-click on the same button (1.59) it should be able to remove the selection from the cart
$(".nr").click(function() {
var $item = $(this).closest("tr").find(".nr").val();
$("#cart").append($item);
$("#cart").append("<div class='cart' Id='cart'>");
});
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javscript" src="script.js"></script>
<div class="cart" Id="cart">
<div class="title">Bet Slip</div>
<chr/>
<div id="sel"><span></span></div><br>
<span>Selections:</span><br>
<button class="bet1">Bet</button><br>
</div>
<br>
<table id="choose-address-table" class="ui-widget ui-widget-content" border="1">
<thead>
<tr class="ui-widget-header ">
<th>Match</th>
<th>Home</th>
<th>Draw</th>
<th>Away</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arsenal-Chelsea</td>
<td><input type=button class="nr" value="1.59"></td>
<td><input type=button class="nr" value="3.40"></td>
<td><input type=button class="nr" value="2.90"></td>
</td>
</tr>
<tr>
<td>Man United-Man City</td>
<td><input type=button class="nr" value="2.70"></td>
<td><input type=button class="nr" value="2.90"></td>
<td><input type=button class="nr" value="2.50"></td>
</td>
</tr>
<tr>
<td>Barcelona-Real Madrdid</td>
<td><input type=button class="nr" value="3.60"></td>
<td><input type=button class="nr" value="3.20"></td>
<td><input type=button class="nr" value="1.95"></td>
</td>
</tr>
</tbody>
</table>
You need to use DOM traversal to find the content related to the button which was clicked. To get the venue you can get the index of the containing td and then retrieve the matching thead th which holds the text. To get the match you can get the text of the first td in the current row.
When appending the new content, don't use id attributes as they must be unique.
Also note in the following example that I fixed some of the issues in your HTML, such as extra </td> tags and removing the <chr /> tag, which doesn't exist.
let $th = $('#choose-address-table thead th');
$(".nr").on('click', e => {
let $btn = $(e.target);
let $option = $(`.cart[data-id="${$btn.prop('id')}"]`);
if ($option.length) {
$option.remove();
return;
}
let $tr = $btn.closest('tr');
let selectionIndex = $btn.closest('td').index();
let match = $tr.find('td:first').text().trim();
let result = $th.eq(selectionIndex).text().trim();
let value = $btn.val();
$("#cart").append(`<div class="cart" data-id="${$btn.prop('id')}">${match} ${result} ${value}</div>`);
});
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div class="cart" Id="cart">
<div class="title">Bet Slip</div>
<div id="sel"><span></span></div><br />
<span>Selections:</span><br />
<button class="bet1">Bet</button><br />
</div><br />
<table id="choose-address-table" class="ui-widget ui-widget-content" border="1">
<thead>
<tr class="ui-widget-header">
<th>Match</th>
<th>Home</th>
<th>Draw</th>
<th>Away</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arsenal-Chelsea</td>
<td><input type="button" class="nr" value="1.59" id="option_0_0" /></td>
<td><input type="button" class="nr" value="3.40" id="option_0_1" /></td>
<td><input type="button" class="nr" value="2.90" id="option_0_2" /></td>
</tr>
<tr>
<td>Man United-Man City</td>
<td><input type="button" class="nr" value="2.70" id="option_1_0" /></td>
<td><input type="button" class="nr" value="2.90" id="option_1_1" /></td>
<td><input type="button" class="nr" value="2.50" id="option_1_2" /></td>
</tr>
<tr>
<td>Barcelona-Real Madrdid</td>
<td><input type="button" class="nr" value="3.60" id="option_2_0" /></td>
<td><input type="button" class="nr" value="3.20" id="option_2_1" /></td>
<td><input type="button" class="nr" value="1.95" id="option_2_2" /></td>
</tr>
</tbody>
</table>

javascript equivalent to jquery closest().find()

<tr>
<td><input type="text" class="rate" oninput="priceChanged(this)"> </td>
<td><input type="text" class="quantity"></td>
<td><input type="text" class="total"> </td>
</tr>
I can find the quantity textbox with jquery-
var quantityTextbox = $('.rate').closest('tr').find('.quantity');
I would like to do it now with pure javascript.
I am newcomer in the pure javascript world.
Any idea?
You can use querySelector & .closest() for this like:
var quantityTextbox = document.querySelector('.rate').closest('tr').querySelector('.quantity')
console.log(quantityTextbox.value)
<table>
<tr>
<td><input type="text" class="rate" oninput="priceChanged(this)"> </td>
<td><input type="text" class="quantity" value="10"></td>
<td><input type="text" class="total"> </td>
</tr>
</table>
If you are calling this inside priceChanged() function, then you can use:
function priceChanged(rate){
var quantityTextbox = rate.closest('tr').querySelector('.quantity')
}
as you are already passing this inside priceChanged() function.
function priceChanged(rate) {
var quantityTextbox = rate.closest('tr').querySelector('.quantity')
console.log(quantityTextbox.value)
}
<table>
<tr>
<td><input type="text" class="rate" oninput="priceChanged(this)"> </td>
<td><input type="text" class="quantity" value="10"></td>
<td><input type="text" class="total"> </td>
</tr>
</table>

How to customize jAutoCalc plugin

I have a simple question regarding jAutoCalc, my question can be answered in two ways:
1> How to customize the jAutoCalc plugin so that we can make it able to be used for input array names instead of just names.
my code is here:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/c17r/jAutoCalc/master/jAutoCalc.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
function autoCalcSetup() {
$('form[name=cart]').jAutoCalc('destroy');
$('form[name=cart] tr[name=line_items]').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('form[name=cart]').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();
$('button[name=remove]').click(function(e) {
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=line_items]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
});
</script>
</head>
<body>
<form name="cart">
<table name="cart">
<tr>
<th></th>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th> </th>
<th>Item Total</th>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" name="qty" value="1"></td>
<td><input type="text" name="price" value="9.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>More Stuff</td>
<td><input type="text" name="qty" value="2"></td>
<td><input type="text" name="price" value="12.50"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>And More Stuff</td>
<td><input type="text" name="qty" value="3"></td>
<td><input type="text" name="price" value="99.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" name="sub_total" value="" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>
Tax:
<select name="tax">
<option value=".06">CT Tax</option>
<option selected value=".00">Tax Free</option>
</select>
</td>
<td> </td>
<td><input type="text" name="tax_total" value="" jAutoCalc="{sub_total} * {tax}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Total</td>
<td> </td>
<td><input type="text" name="grand_total" value="" jAutoCalc="{sub_total} + {tax_total}"></td>
</tr>
<tr>
<td colspan="99"><button name="add">Add Row</button></td>
</tr>
</table>
</form>
</body>
</html>
since the names are same for dynamically generated input's i want use input array. The problem is that if i do so then I'm unable to use the plugin features!
2> The question can be answered in second way by providing methods to use plugin while using input arrays
I know its an old post but maybe others may have same issue.
Try to open jautocalc.js find this function "getFieldSelector(field)" and edit this code.
return ':input[name="' + field + '"]';
to
return ':input[name="' + field + '[]"]';
I think the whole problem is with javascript
the javascript should be like
$(document).ready(function(){
$('.item_total').keyup(function(){
$('your result input name here).text($('.item_total').val() * 1.5);
});
});
this link will help you:
http://jsfiddle.net/7BDwP/
You will get idea from the above link what i am trying to say

How to get reference to another object on other column on same row in a table in Javascript?

I want to set disabled=false for the input box on 3rd column when a user 'check' the checkbox on the 2nd column on Same row
And again disable if user 'uncheck' the checkbox.
<!DOCTYPE html>
<html>
<body>
<p>Check the checkbox to display which type of form element it is.</p>
<table border='1' cellpadding='5'>
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
</table>
<script>
// function myFunction(item) {
// var x = document.getElementById(item).....how to get a reference to parent;
// x.disabled=false;
// }
</script>
</body>
</html>
I tried with this reference but that have not gave me any solution.
So how can i get the reference to the input box from the checkbox?
I browsed internet but have not get any solution .
You could give the inputs an id attribute for later addressing this element.
function myFunction(item) {
var x = document.getElementById(item);
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction('itemInput1')"></td>
<td><input type="number" id="itemInput1" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction('itemInput2')"></td>
<td><input type="number" id="itemInput2" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction('itemInput3')"></td>
<td><input type="number" id="itemInput3" disabled></td>
<tr>
</table>
With Element.closest, as #August mentioned and Document.querySelector
function myFunction(element) {
var x = element.closest('tr').querySelector('input[type="number"]');
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
<tr>
</table>
Don't go back to DOM with document.getElementById to get your element, there is no point of doing that.
Try to use the event reference, when calling myFunction the event (onclick) is passed which has property "target".
To understand better do console.log(item); inside the function.
From there, inside your function you could do item.target.closest('tr') to identify the parent of the cell.
<script>
function myFunction(item) {
console.log(item);
var x = item.target.closest('tr');
x.disabled=false;
}
</script>
Documentation for closest() method

jQuery Clone Table Row BUT with Multiple Tables on Page

I have a page containing:
<div class="my_div">
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th>Title 3</th>
</tr>
<tr>
<td><input type="input" name="set[1][arg1]" value="X"></td>
<td><input type="input" name="set[1][arg2]" value="Y"></td>
<td><input type="input" name="set[1][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[2][arg1]" value="X"></td>
<td><input type="input" name="set[2][arg2]" value="Y"></td>
<td><input type="input" name="set[2][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[3][arg1]" value="X"></td>
<td><input type="input" name="set[3][arg2]" value="Y"></td>
<td><input type="input" name="set[3][arg3]" value="Z"></td>
</tr>
</table>
Add another Set
</div>
<div class="my_div">
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th>Title 3</th>
</tr>
<tr>
<td><input type="input" name="set[4][arg1]" value="X"></td>
<td><input type="input" name="set[4][arg2]" value="Y"></td>
<td><input type="input" name="set[4][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[5][arg1]" value="X"></td>
<td><input type="input" name="set[5][arg2]" value="Y"></td>
<td><input type="input" name="set[5][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[6][arg1]" value="X"></td>
<td><input type="input" name="set[6][arg2]" value="Y"></td>
<td><input type="input" name="set[6][arg3]" value="Z"></td>
</tr>
</table>
Add another Set
</div>
Two (or more) divs, containing a table each, plus n rows, each containing inputs. The inputs you already see are dynamically created from data in the db.
I would like to be able to just add a new <tr> when the link below any table is clicked. The catch being that the table which will recieve the new row is the one immediately above the link clicked.
I did think about giving each table a unique id which matches the id of the link but am unsure how in the jQuery to then recognise that a link with a random id has been clicked.
Then i thought maybe I could use the closest functionality and traverse backwards from the link to the table above it but I don't think that works. (maybe it does?)
Also, when I add the new row, it needs to be blank, which I think I could figure out, once I manage to clone the last (or any for that matter) row and append it to the end of the relevant table. E.g. new row:
<tr>
<td><input type="input" name="newSet[][arg1]" value=""></td>
<td><input type="input" name="newSet[][arg2]" value=""></td>
<td><input type="input" name="newSet[][arg3]" value=""></td>
</tr>
Hope it makes sense what I am asking.
Thanks in advance.
Jon
First, add a class addSet to your links and remove the id or make it unique. Repeated ids is not a valid markup. After doing this, I'd say this should work
$('.addSet').click(function(e) {
e.preventDefault();
var $table = $(this).prev();
var $row = $table.find('tr:last');
var $clonedRow = $row.clone();
$clonedRow.find('input').each(function(index) {
var $this = $(this);
$this.val('');
$this.prop('name','set[][arg' + (index + 1) + ']' );
})
$table.append($clonedRow);
});
DEMO
DEMO
As pointed out in the comments, please change id="addSet" to class="addSet" to get rid of duplicate ID's. Make a clone of the last row .... there should be at least one row in the table, otherwise this part will fail. Then fix the name and value of each input element in the clone. You can either change the current value with .val() or the default/initial value with .attr() or removeAttr('value').
Here is the code you need:
$(function() {
$(document).on('click', 'a.addSet', function(e) {
e.preventDefault();
var tr = $(this).closest('div.my_div').find('tr').last().clone();
tr.find('input').attr('name', function() {
return $(this).attr('name').replace(/set\[\d{1,}\]/g,'newSet[]');
})
.each(function() {
$(this).val('');
});
$(this).closest('div.my_div').find('table tbody').append( tr );
});
});
you can do it by adding a class to the link as id must be unique:
HTML:
<div class="my_div">
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>
<input type="input" name="set[1][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[1][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[1][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[2][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[2][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[2][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[3][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[3][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[3][arg3]" value="Z" />
</td>
</tr>
</table> Add another Set
</div>
<div class="my_div">
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>
<input type="input" name="set[4][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[4][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[4][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[5][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[5][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[5][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[6][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[6][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[6][arg3]" value="Z" />
</td>
</tr>
</table> Add another Set
</div>
JQUERY:
$(".addSet").click(function () {
$(this).prev("table").append('<tr><td><input type="input" name="newSet[][arg1]" value=""></td><td><input type="input" name="newSet[][arg2]" value=""></td><td><input type="input" name="newSet[][arg3]" value=""></td></tr>');
})
FIDDLE:
http://jsfiddle.net/kbxekrjc/
I am answering my own question because I used a combination of two of the other provided answers (#ClaudioRedi & #user3558931)
$('.addSet').click(function(e) {
e.preventDefault();
var $table = $(this).prev();
var $row = $table.find('tr:last');
var $clonedRow = $row.clone();
$clonedRow.find('input').attr('name', function() {
return $(this).attr('name').replace(/set\[\d{1,}\]/g,'newSet[]');
})
.each(function() {
$(this).val('');
});
$clonedRow.hide();
$table.append($clonedRow);
$clonedRow.show('slow');
});

Categories