So this is the case.
I have 2 <input> inside <td> which has unlimited number. For example :
<td>
<input type="text" name="cust_name" onchange="check(this)" />
<input type="hidden" name="cust_id" value="10" />
</td>
<td>
<input type="text" name="cust_name" onchange="check(this)" />
<input type="hidden" name="cust_id" value="12" />
</td>
......
this in check(this) containing cust_name value. But how can I get particular cust_id value with same function? (check())
Delineation :
function check(part_element){
console.log($(part_element).val());
console.log(getting particular cust_id value); //here is the part
}
You can use next
function check(part_element){
console.log($(part_element).val());
console.log($(part_element).next().val());
}
you can use .next() to find the next sibling, in this case it is the cust_id element
function check(part_element){
console.log($(part_element).val());
console.log($(part_element).next().val()); //here is the part
}
This already has an accepted answer, but in this case I'd argue that using jQuery doesn't make this any easier, possibly even more complicated:
function check(el) {
console.log(el.value);
console.log(el.nextSibling.value);
}
Related
This is the base of a table that I have.
It could have many more rows and the last number in the name attribute indicates the row number. I want get the name attribute of any of the inputs inside the last row. It does not matter which input is because then I will split the string and only keep the last number.
How can I achieve this?
Thanks!
<table id="tableNames">
<tbody>
<tr>
<td>
<input type="text" name="contact1_1"/>
<input type="text" name="contact2_1"/>
<input type="text" name="contact3_1"/>
</td>
<td>
<input type="text" name="phone1_1"/>
<input type="text" name="phone2_1"/>
<input type="text" name="phone3_1"/>
</td>
</tr>
</tbody>
</table>
:last selector with split() and pop()
console.log( $("#tableNames tbody tr:last input:last").attr("name").split("_").pop())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableNames">
<tbody>
<tr>
<td>
<input type="text" name="contact1_1"/>
<input type="text" name="contact2_1"/>
<input type="text" name="contact3_1"/>
</td>
<td>
<input type="text" name="phone1_1"/>
<input type="text" name="phone2_1"/>
<input type="text" name="phone3_1"/>
</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
alert($("#tableNames").find("tr:last").find("input").attr("name"));
})
Or a shorter version:
$(document).ready(function() {
alert($("#tableNames tr:last input").attr("name"));
})
Here is a fiddle of this getting the name of the input on the last row:
https://jsfiddle.net/L7k2w6Ls/2/
$('#tableNames tr:last input').map(function(){return $(this).attr('name');}).get();
The other answers will do exactly what you are asking. In an attempt to be more generally helpful, I want to make sure this isn't an XY problem.
It sounds like you are effectively encoding some application data in the name of your input elements. It may be worth asking if that is what you actually want to do. Often times I have data related to an element, and the best place to put that for jQuery to find is in the elements data array. Even if the server actually needs that same piece of information in the name, putting the data somewhere more easily accessible to javascript can help minimize bugs in the future and simplify your application. So I might suggest a completely different solution like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableNames">
<tbody>
<tr>
<td>
<input type="text" name="contact1" data-more="1"/>
<input type="text" name="contact2" data-more="1"/>
<input type="text" name="contact3" data-more="1"/>
</td>
<td>
<input type="text" name="phone1" data-more="1"/>
<input type="text" name="phone2" data-more="1"/>
<input type="text" name="phone3" data-more="1"/>
</td>
</tr>
</tbody>
</table>
$( function(){
$("#tableNames tr:last input").each( function(){
var input = $(this);
console.log( input.attr( 'name' ) + ' has data ' + input.data( 'more' ) );
});
} );
I have a dummy form and the actual form in which at some point I want to copy all the input values from the dummy form across to the real form.
The dummy fields will have the same names as the real form (so I can match them up).
So in dummy form:
<input name="item1" value="field1" />
<input name="item2" value="field1" />
<input name="item3" value="field1" />
and in real form:
<input name="item1" value="" />
<input name="item2" value="" />
<input name="item3" value="" />
I assume I'll need to iterate over each input in dummy form (using jQuery .each() ?) while collecting the name and value in an JS object.
Then iterate over each input in the real form, matching the name as the selector and setting the value (perhaps this can be done in the one .each() function ???)
I've started with the following code which only grabs the values (and index) into an array, but because I need two values (name and value, and index is irrelevant) I assume I'll need an object not an array, but really not sure where to begin with that.
var inputValues = [];
$("#dummyForm input").each(function() {
inputValues.push($(this).val());
});
Any help or advice much appreciated.
Map them like
$('#DummyForm [name]').each(function() {
var name = $(this).attr('name');
$('#RealForm [name="' + name + '"]').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form id="DummyForm">
<input name="item1" value="field1" />
<input name="item2" value="field2" />
<input name="item3" value="field3" />
</form>
<form id="RealForm">
<input name="item1" value="" />
<input name="item2" value="" />
<input name="item3" value="" />
</form>
You could do something like below:
$('#dummy input').each(function(){
if($('#real input[name='+$(this).prop('name')+']').length == 1)
$('#real input[name='+$(this).prop('name')+']').val($('#dummy input[name='+$(this).prop('name')+']').val())
});
Here is my Fiddle...
When I select the boxes, I want the text fields to become editable. At first it works but if I reload the page with the boxes checked, it will do the opposite of what it is supposed to do (i.e. after page is reloaded, when the boxes aren't checked, the text fields are editable; when checked, they become un-editable)
<table>
<tr>
<td>
<input type="checkbox" name="Download_Limit" value="download" class="checkme"/>Download Limit
<br/>
<input type="text" name="download" class="text required" id="Download_Input" size="3">
<label class="description" for="Expire">Downloads</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Time_Limit" value="time" class="checkme"/>Time Limit
<br/>
<input type="text" name="time" class="text required" id="Time_Input" size="3">
<label class="description" for="Expire">Hours</label>
</td>
</tr>
My Javascript
$('.checkme').attr('checked', false);
$('.checkme').click(function(){
if($('input[name='+ $(this).attr('value')+']').attr('disabled') == false){
$('input[name='+ $(this).attr('value')+']').attr('disabled', true);
}else{
$('input[name='+ $(this).attr('value')+']').attr('disabled', false);
}
});
Here is what I would do. First, setup all the default values that you want:
// Set default page values on load...
$('.checkme').prop('checked', false);
$('input[type="text"]').prop('disabled', true).val('');
// Then setup events...
$('.checkme').on('click', function () {
var $this = $(this);
if($('input[name='+ $this.val() +']').prop('disabled')){
$('input[name='+ $this.val()+']').prop('disabled', false);
} else {
$('input[name='+ $this.val()+']').prop('disabled', true);
}
});
We've changed a few things up here. Let me explain.
First, we've changed .attr('checked'...) and .attr('disabled'...) to use .prop() instead. checked and disabled are properties not attributes.
We're now attaching the event using .on(). This is just the method I prefer, however simply doing .click() will work as well.
We're saving off the element into a local variable $this first thing. This keeps jQuery from having to re-traverse the DOM multiple times within the same function.
I've simplified .attr('value') to the shorthand .val().
Lastly, we've simplified your if statement by removing the negative condition and allowing JavaScript to use the truthy/falsy conditionals.
Fiddle
A Few Other Notes:
I know it is a traditional method of page layout, but I highly discourage using tables to position elements. It is not the appropriate use of tables and results in a page layout that is not semantically correct. Check out the <div> and <span> elements to layout your code and try styling it to appear the way you want with CSS.
Also, it appears you are formatting your HTML in the XHTML syntax. That is perfectly fine, however I recommend that you be consistent when closing tags. Two of your <input /> element tags are not closed properly.
// This...
<input type="text" name="download" class="text required" id="Download_Input" size="3">
// Should be this...
<input type="text" name="download" class="text required" id="Download_Input" size="3" />
// And this...
<input type="text" name="time" class="text required" id="Time_Input" size="3">
// Should be this...
<input type="text" name="time" class="text required" id="Time_Input" size="3" />
Make sure you are consistent in your methods of markup. Inconsistencies such as this will result in an invalid markup.
Finally, I do not believe that you can have <tr> elements nested directly inside of a <table> element. I believe they have to be inside of a <thead>, <tbody> or <tfoot> element. Again, leaving out elements such as these results in invalid markup.
Try this DEMO . I think it's more elegant.
$('.checkme').click(function() {
var input = $(this).closest('td').find('input[type="text"]');
if (input.is(':disabled')){
input.attr('disabled', false);
}else{
input.attr('disabled', true);
}
});
Also, your input type="text" mark up should be disabled as follows:
<input type="text" disabled="disabled" name="time" class="text required" id="Time_Input" size="3" />
Suppose I have the following section of a form:
<td>
<p>
<input type="checkbox" name="faddon" onchange="iaddon()" value="89.00" /><br />
<input type="checkbox" name="faddon" onchange="iaddon()" value="29.00" /><br />
<input type="checkbox" name="faddon" onchange="iaddon()" value="49.00" /><br />
<input type="checkbox" name="faddon" onchange="iaddon()" value="39.00" />
</p>
</td>
<td>
<p>
<input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /><br />
<input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /><br />
<input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /><br />
<input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" />
</p>
</td>
Every time the user selects or deselects a checkbox, I need the script to recalculate the variable addon to the total of all values of the boxes which are checked. This is the code I came up with first, but it does not appear to work for me:
function iaddon() {
addon=0;
av=document.getElementsByName("faddon");
for (e=0;e<av.length;e++) {
if (av[e].checked==true) {
addon+=av[e];
}
}
}
The script keeps returning NaN as the value of addon. At first, I wondered if javascript was reading the values as strings and not integers, but adding a (x)*1 around av[e] did not fix this. Then, I read a little more into getElementsByName and read about it possibly not being a typical array, but instead a nodeList.
I'm new to Javascript and can't figure out after hours of googling how to manipulate this nodeList. Any help is appreciated. I'd like to keep the 8 checkboxes in seperate table cells, so using something like childNodes wouldn't exactly work here, as far as I can tell. I also would like to steer clear of any jQuery at this point...I'm still learning and I want to make sure I understand how to do it in plain old javascript first. Thanks!
You need to use the value property and also parse it to a number.
e.g:
function iaddon()
{
addon = 0;
for (e = 0; e < av.length; e++)
{
if (av[e].checked == true)
{
addon += parseInt(av[e].value, 10);
}
}
}
av[e] will return the element not the value of the element there for addon is not a number.
I believe you want to use av[e].value
also note that since you set addon=0 at the start of the function the value of addon will always only be the value of av[e].value during the function call.
function iaddon() {
addon=0;
av=document.getElementsByName("faddon");
for (e=0;e<av.length;e++) {
if (av[e].checked==true) {
addon+=av[e].value;
}
}
}
btw, obtrusive js
<input type="checkbox" name="faddon" onchange="iaddon()" value="89.00"/>
is very depressive to maintain your code, for both js and html code are written together.
Try to write unobtrusive js code like:
In html:
<input id="index1" type="checkbox" name="faddon" value="89.00"/>
In js:
$('index1').click(function() {
// Edit your function
});
I have a form where users can add input fields with jQuery.
<input type="text" id="task" name="task[]" />
After submitting the form I get an array in PHP.
I want to handle this with the $.ajax() but I have no idea how to turn my <input>s to an array in jQuery.
Using map:
var values = $("input[id='task']")
.map(function(){return $(this).val();}).get();
If you change or remove the id (which should be unique), you may also use the selector $("input[name='task\\[\\]']")
Working example: http://jsbin.com/ixeze3
For multiple elements, you should give it a class rather than id eg:
<input type="text" class="task" name="task[]" />
Now you can get those using jquery something like this:
$('.task').each(function(){
alert($(this).val());
});
Firstly, you shouldn't have multiple elements with the same ID on a page - ID should be unique.
You could just remove the id attribute and and replace it with:
<input type='text' name='task'>
and to get an array of the values of task do
var taskArray = new Array();
$("input[name=task]").each(function() {
taskArray.push($(this).val());
});
To catch the names array, i use that:
$("input[name*='task']")
You can't use same id for multiple elements in a document. Keep the ids different and name same for the elements.
<input type="text" id="task1" name="task" />
<input type="text" id="task2" name="task" />
<input type="text" id="task3" name="task" />
<input type="text" id="task4" name="task" />
<input type="text" id="task5" name="task" />
var newArray = new Array();
$("input:text[name=task]").each(function(){
newArray.push($(this));
});
HTML:
<input type="text" name="task[]" class="form-control" id="task">
JS:
var tasks= new Array();
$('input[name^="task"]').each(function()
{
tasks.push($(this).val());
});
if you want selector get the same id, useļ¼
$("[id=task]:eq(0)").val();
$("[id=task]:eq(1)").val();
etc...
You can use jquery.serializeJSON to do this.
Q:How to access name array text field
<input type="text" id="task" name="task[]" />
Answer - Using Input name array :
$('input[name="task\\[\\]"]').eq(0).val()
$('input[name="task\\[\\]"]').eq(index).val()