I am new to Javascript and jQuery. I was trying to apply the same code to every input row in the table.
The HTML for the input row in that table is:
<tr>
<td>Seller1</td>
<td><input type="text" placeholder="" class="form-control" name="text1"></td>
<td><input type="text" placeholder="" class="form-control text2" id="text2">
</td>
</tr>
The Javascript/JQuery code to enable/disable 2nd column(text2) of the row is:
/*text field enable*/
$('#text2').attr('disabled',true);
$('input[name="text1"]').keyup(function(){
$('#text2').prop('disabled', this.value == "" ? true : false);
});
Thanks
Here a snippet able to handle multiple rows. Relies on class name instead of 'name' or 'id' attr
$(function(){
$('.text2').prop('disabled', true);
$('table input.text1').keyup(function(e) {
var show = $(this).val() == "" ? true : false;
$(this).parent().parent().find('input.text2').prop('disabled', show);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Seller1</td>
<td><input type="text" placeholder="" class="form-control text1"></td>
<td><input type="text" placeholder="" class="form-control text2"></td>
</tr>
<tr>
<td>Seller2</td>
<td><input type="text" placeholder="" class="form-control text1"></td>
<td><input type="text" placeholder="" class="form-control text2"></td>
</tr>
<tr>
<td>Seller3</td>
<td><input type="text" placeholder="" class="form-control text1"></td>
<td><input type="text" placeholder="" class="form-control text2"></td>
</tr>
</table>
you could select inputs by class:
$('.form-control').attr('disabled',true);
this will disable all elements with form-control class
The problem you're encountering may be one of scope. inside the keyup function, you refer to this.value, which is saying "if the value of #text2 is null..." -- that may not be what you want. Instead, look at the following:
/*text field enable*/
$('.sellerLast').attr('disabled', true);
//
$(".sellerFirst").each(function() {
$(this).on("keyup", function() {
console.log($(this).val());
if ($(this).val() !== "") {
$(this).parents("tr").find(".sellerLast").attr("disabled", false);
} else {
$(this).parents("tr").find(".sellerLast").attr("disabled", true);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Seller1</td>
<td>
<input type="text" placeholder="" class="form-control sellerFirst" name="sellerFirst-1">
</td>
<td>
<input type="text" placeholder="" class="form-control sellerLast" name="sellerLast-1">
</td>
</tr>
<tr>
<td>Seller2</td>
<td>
<input type="text" placeholder="" class="form-control sellerFirst" name="sellerFirst-2">
</td>
<td>
<input type="text" placeholder="" class="form-control sellerLast" name="sellerLast-2">
</td>
</tr>
</table>
Well, I was an idiot. There were two thing going on -- first, the code within the template block may not have been doing what you expected, and second, you wanted to know how to extend that to ALL similarly structured elements on the page. This should do.
Edited with an "else" condition on the length of the first field -- the else sets the field back to disabled if the first field is blank.
Related
I have table with a button as following; I'm trying to get the values of td's using jQuery.
My table:
<table class="table" id="Tablesample">
<tr>
<th style="display:none;">
#Html.DisplayNameFor(model => model.Id)
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="#item.Key" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="#item.Id" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
}
</table>
<button id="btnSave">Save</button>
then I'm trying to get the value using jquery:
$('#btnSave').click(function () {
$('#Tablesample tr').each(function () {
var row = $(this).closest("tr"); // Find the row
var text = row.find(".keyvalue").text(); // Find the text
var keval = text.find("input").text();
alert(keval);
});
});
but I'm not getting any values.
I also tried something like this but it doesn't work either:
$("#Tablesample tr:gt(0)").each(function () {
var this_row = $(this);
var key = $.trim(this_row.find('td:eq(0)').html());
alert(key);
});
The issue is due to your DOM traversal logic. Firstly this is the tr element, so closest('tr') won't find anything. Secondly, you're getting the string value from the text() of .keyvalue, then attempting to find an input element in the text instead of traversing the DOM. Finally, you need to use val() to get the value of an input.
I'd strongly suggest you familiarise yourself with the methods jQuery exposes and how they work: http://api.jquery.com
With all that said, this should work for you:
$('#btnSave').click(function() {
$('#Tablesample tr').each(function() {
var keval = $(this).find(".keyvalue input").val();
console.log(keval);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="Tablesample">
<tr>
<th style="display:none;">
Model
</th>
</tr>
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="Key1" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="Id1" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="Key2" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="Id2" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="Key3" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="Id3" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
</table>
<button id="btnSave">Save</button>
Note that the first value is undefined as your th element in the first row contains no input element. I'd suggest separating the table using thead/tbody if you want to exclude that row.
I have this cool piece of Javascript that disables rows and change color were input is disabled.
But I need:
If filled input #1 all other 3 inputs are disabled,
if filled input #3 all other 3 inputs are disabled,
if filled input #2 and/or #4 then inputs #1 AND #3 are disabled.
Data is coming from database.
Javascript:
$(".input").on("keypress change keyup",function(){
if($(this).val() != "")
{
$(this).parent().parent().find(".input").not($(this)).prop("disabled",true).css("background-color","#cccccc");
}
else
{ $(this).parent().parent().find(".input").prop("disabled",false).css("background-color","#ffffff");
}
});
And here is the table code:
<table>
<tr>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
</tr>
<tr>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
</tr>
</table>
This piece of code was made by Alexis.
Here are the codes you seek...
HTML
To avoid the issue you were having with hidden inputs etc and not knowing the nth-term of each element, use classes instead:
<table>
<tr>
<td>
<input type="hidden" class="input" value="">
</td>
<td>
<input type="text" class="input toggle all" value="">
</td>
<td>
<input type="text" class="input toggle every-other" value="">
</td>
<td>
<input type="text" class="input toggle all" value="">
</td>
<td>
<input type="text" class="input toggle every-other" value="">
</td>
</tr>
</table>
JQuery
$('body').on( 'keyup blur', '.input.toggle', function() {
var $this = $( this );
var $parent = $this.parent();
var $disable = $parent.siblings().children();
if ( $this.val() != "" )
{
if ( $this.is( '.all' ) )
{
$disable = $parent.siblings().children( '.toggle' );
}
else if ( $this.is( '.every-other' ) )
{
$disable = $parent.siblings().children( '.all' );
}
$disable.attr( 'disabled', true ).css("background-color","#ccc");
}
else
{
$disable.removeAttr('disabled').css("background-color","#fff");
}
});
And here is an example of it working.
So I am pretty clueless when it comes to jQuery and just inherited someone else's code. Any help is greatly appreciated.
I have a form that is populated from a query as they add students to the form. They can have any number of students added to the form. Below is the html:
<table style="width:100%">
<tr>
<td colspan="2">
<label class="control-label" >Name</label>
<input type="text" name="name[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label" >Email</label>
<input type="text" name="email[]" value="" class="required">
</td>
</tr>
<tr>
<td colspan="2">
<label class="control-label" >Address</label>
<input type="text" name="address1[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label" >Address 2 <small>(optional)</small></label>
<input type="text" name="address2[]" value="">
</td>
</tr>
<tr>
<td colspan="1">
<label class="control-label" >City</label>
<input type="text" name="city[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label" >State/Providence</label>
<input type="text" name="st_prov[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label" >Postal Code</label>
<input type="text" name="zip_pc[]" value="" style="width:60px;" class="required">
</td>
<td>
<label class="control-label" >Country</label>
<input type="text" name="country[]" value="" class="required">
</td>
</tr>
<tr><td colspan="4"> </td></tr>
</table>
Here is the jQuery function that I've been trying to modify:
jQuery(function($){
var addStudent = function(data){
var studentEl = $($('.student').get(0)).clone()
studentEl.find('input').each(function(){
var field = $(this).attr('name').replace('[]','')
if ($(this).attr("name").val == 'name'){
$(this).prop("readonly", true);
}
$(this).val(data[field] || '')
})
if(data.client_no!=''){
studentEl.find('.will_update').text("Will update student information for "+data.name+'')
}
$($('.student').last()).after(studentEl)
}
})
The function creates an additional set of fields for each student populated by the database for the form to process.
I'm looking to modify the specific field for "name" to be readonly (can view but not modify but yet still submit). I've tried many other iterations but cannot get the field name in the if clause to make only that field read only.
Any help provided would be great.
The proper way of getting an attribute via jQuery is just : $(this).attr("name")
Also instead of using:
var field = $(this).attr('name').replace('[]','')
if ($(this).attr("name").val == 'name'){
$(this).prop("readonly", true);
}
Use the variable field that you already created:
var field = $(this).attr('name').replace('[]','')
if (field == 'name'){
$(this).prop("readonly", true);
}
See snippet below :
jQuery(function($) {
var addStudent = function(data) {
var studentEl = $($('.student').get(0)).clone()
studentEl.find('input').each(function() {
var field = $(this).attr('name').replace('[]', '')
if (field == 'name') {
$(this).prop("readonly", true);
}
$(this).val(data[field] || '')
})
if (data.client_no != '') {
studentEl.find('.will_update').text("Will update student information for " + data.name + '')
}
$($('.student').last()).after(studentEl)
}
$('button').click(function() {
addStudent({
client_no: 1,
name: "Ralph John "
})
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" class="student">
<tr>
<td colspan="2">
<label class="control-label">Name</label>
<input type="text" name="name[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label">Email</label>
<input type="text" name="email[]" value="" class="required">
</td>
</tr>
<tr>
<td colspan="2">
<label class="control-label">Address</label>
<input type="text" name="address1[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label">Address 2 <small>(optional)</small>
</label>
<input type="text" name="address2[]" value="">
</td>
</tr>
<tr>
<td colspan="1">
<label class="control-label">City</label>
<input type="text" name="city[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label">State/Providence</label>
<input type="text" name="st_prov[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label">Postal Code</label>
<input type="text" name="zip_pc[]" value="" style="width:60px;" class="required">
</td>
<td>
<label class="control-label">Country</label>
<input type="text" name="country[]" value="" class="required">
</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
</table>
<button>Add Student</button>
Couple problems in your code.
Use $('student').eq(0) instead of $($('.student').get(0))
You're getting the dom element from a jquery object and rewrapping it into a jquery object. The eq(index) function returns a jquery wrapped element.
You're trying to get a val property from attr("name"), which returns a string. You'll get undefined.
if ($(this).attr("name").val == 'name'){
$(this).prop("readonly", true);
}
If you're trying to find the existence of the name attribute, just do
if ($(this).attr("name")){
$(this).prop("readonly", true);
}
Lastly, you don't need to rewrap a jquery object with a jquery object.
$($('.student').last())
Jquery functions return the jquery object, meaning you can chain calls, and you don't need to rewrap it.
$('.student').last()
You can modify your code as below. Assuming your table has class student here is a working demo - Fiddle.
$(function(){
var addStudent = function(data){
var studentEl = $('.student tr:first').clone();
studentEl.find('input').each(function(){
var field = $(this).attr('name').replace('[]','');
if (field === 'name'){
$(this).prop("readonly", true);
}
$(this).val(data[field] || '')
})
if(data.client_no !== ''){
studentEl.find('.will_update').text("Will update student information for "+data.name+'')
}
$('.student').last().after(studentEl)
}
});
I am working on a project. I wanted to subtract the value of the begbal input box and the nearest amtcoll input box and put the result on the nearest endbal inputbox.
My HTML code is:
<tr>
<td><input type="number" name="amtcoll[]" id="amtcoll" class="form-control text-right" value="2000.00"></td>
<td><input type="number" name="begbal[]" id="begbal" class="form-control text-right" value="0.00"></td>
<td><input type="number" name="endbal[]" id="endbal" class="form-control text-right" value="0.00"></td>
</tr>
<tr>
<td><input type="number" name="amtcoll[]" id="amtcoll" class="form-control text-right" value="1000.00"></td>
<td><input type="number" name="begbal[]" id="begbal" class="form-control text-right" value="0.00"></td>
<td><input type="number" name="endbal[]" id="endbal" class="form-control text-right" value="0.00"></td>
</tr>
And my JavaScript so far I use is:
<script type="text/javascript">
$(document).ready(function(){
$("input[name^=begbal]").change(function() {
$(this).closest("tr").find("input[name^=endbal]").value = $(this).closest("tr").find("input[name^=begbal]").value - $(this).closest("tr").find("input[name^=amtcoll]").value;
});
});
</script>
I wanted to as I type on the begbal input the result of subtraction will be passed on to the nearest endbal. But there is no value passed on the nearest endbal input. Please help. I can get how can I solve this problem. Thanks.
For getting the value of input you need use val not value
$("input[name^=begbal]").change(function () {
$(this).closest("tr").find("input[name^=endbal]").val( $(this).closest("tr").find("input[name^=begbal]").val() - $(this).closest("tr").find("input[name^=amtcoll]").val());
});
Please Try this :
$(document).ready(function(){
jQuery("input[name^=begbal]").on('input', function() {
var amtVal = $(this).closest("tr").find("input[name^=amtcoll]").val();
var begalVal = $(this).closest("tr").find("input[name^=begbal]").val();
$(this).closest("tr").find("input[name^=endbal]").val(parseInt(begalVal - amtVal));
});
});
For what it's worth - here's another, which avoids going too far up and down the DOM. Note - you should not have two elements with the same ID.
$(document).ready(function() {
$("input[class^=begbal]").change(function() {
var endbal = $(this).val() - $(this).prev('.amtcoll').val();
$(this).next('.endbal').val(endbal);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<input type="number" name="amtcoll[]" class="amtcoll" class="form-control text-right" value="2000.00">
</td>
<td>
<input type="number" name="begbal[]" class="begbal" class="form-control text-right" value="0.00">
</td>
<td>
<input type="number" name="endbal[]" class="endbal" class="form-control text-right" value="0.00">
</td>
</tr>
<tr>
<td>
<input type="number" name="amtcoll[]" class="amtcoll" class="form-control text-right" value="1000.00">
</td>
<td>
<input type="number" name="begbal[]" class="begbal" class="form-control text-right" value="0.00">
</td>
<td>
<input type="number" name="endbal[]" class="endbal" class="form-control text-right" value="0.00">
</td>
</tr>
I have a doubt in javascript. Is it posible to get the values of text boxes with the same name ?
for example
<INPUT TYPE="text" NAME="inputbox" VALUE="">
<INPUT TYPE="text" NAME="inputbox" VALUE="">
these text boxes have same name, how can i get its values by name ?
OK, lemme come to the real problem i got, hope am explaining correctly.
I have a series of text boxes which i gotta validate now. Its not a big deal to validate textboxe normally.
But this is an array of text boxes where the id of the text boxes will be available only when the fields are added dynamically by clicking on the + button. when the press button is clicked the whole set of text boxes will appear. as many times its clicked, it will get added.
So its imposible to get the values to validate with the ID, so i tried by name.
JAVASCRIPT FUNCTION
function insComep()
{
// $("#doctorPri").validationEngine("updatePromptsPosition")
// jQuery("#doctorPri").validationEngine('attach', {promptPosition : "topRight"});
rl=document.getElementById("compeTable").rows.length;
var a=document.getElementById("compeTable").insertRow(rl);
var g=a.insertCell(0);
var f=a.insertCell(1);
var m=a.insertCell(2);
var n=a.insertCell(3);
var o=a.insertCell(4);
var p=a.insertCell(5);
var q=a.insertCell(6);
var r=a.insertCell(7);
var s=a.insertCell(8);
var t=a.insertCell(9);
//var v=a.insertCel1l(11);
//var u=a.insertCell(12);
g.innerHTML='<select name="competproduct[]" style="width:86px" id="competproduct'+rl+'" class="validate[required]" ><option value="">--Select--</option><?echo $product_str;?></select>';
f.innerHTML='<input type="text" name="competcompany[]" id="competcompany'+rl+'" size="10" class="validate[required]" >';
m.innerHTML='<input type="text" name="competbrand[]" id="competbrand'+rl+'" size="10" class="validate[required]" >';
n.innerHTML='<input type="text" name="competdrug[]" id="competdrug'+rl+'" size="10" class="validate[required]" >';
o.innerHTML='<input type="text" name="competquty[]" id="competquty'+rl+'" size="2" class="validate[required,custom[integer]] text-input" >';
p.innerHTML='<input type="text" name="competprice_frm[]" id="competprice_frm'+rl+'" size="2" class="validate[required,custom[number],funcCall[getPriceFromE]] text-input" />';
q.innerHTML='<input type="text" name="competprice_to[]" id="competprice_to'+rl+'" size="2" class="validate[required,custom[number],funcCall[getPriceTo]] text-input" />';
r.innerHTML='<input type="text" name="competmrp[]" id="competmrp'+rl+'" size="2" class="validate[required,custom[number],funcCall[getMrp]] text-input"/>';
s.innerHTML='<select name="ChemistParma[]" style="width:86px" id="ChemistParma'+rl+'" style="width:86px" ><option value="">--Select--</option><?echo $chemist_str;?></select>';
t.innerHTML='<img src="media/images/details_close.png" onClick="delCompe('+rl+'); "/>';
// jQuery("#doctorPri").validationEngine('attach', {promptPosition : "topRight"});
$("#doctorPri").validationEngine('hideAll');
}
HTML
<table width="100%" id='compeTable' border='0' style='margin-left:auto;margin-right:auto;margin-top:40px;' >
<tr style="border-bottom:1px solid #999999;"><td colspan='4'>
<div style="background:;padding:3px;text-align:left; ">
<font color='black'><strong >Competitor Detail(s):</strong></font><font color="red">*</font>
</div>
</td></tr>
<tr>
<td>Product Name:<font color="red">*</font></td>
<td>Company Name:<font color="red">*</font></td>
<td>Brand Name:<font color="red">*</font></td>
<td>Drug Name:<font color="red">*</font></td>
<td> Quantity:<font color="red">*</font></td>
<td>Pricefrom Dist:<font color="red">*</font></td>
<td >Price to Dist:<font color="red">*</font></td>
<td> MRP:<font color="red">*</font></td>
<td>Chemist<font color="red">*</font><input type='button'value='+' style='width:1px' style='width:1px' onclick='frame5()'/>
</td>
<td></td>
</tr>
<tr><td> </td></tr>
<tr>
<td>
<select name='competproduct[]' id='competproduct' style="width:86px" class="validate[required]" >
<option value=''>-select Product-</option>
<? echo $product_str;?>
</select>
</td>
<td>
<input type="text" name="competcompany[]" id="competcompany" size="10" class="validate[required]" >
</td>
<td ><input type="text" name="competbrand[]" id="competbrand" size="10" class="validate[required]" >
</td>
<td><input type="text" name="competdrug[]" id="competdrug" size="10" class="validate[required]" >
</td>
<td><input type="text" name="competquty[]" id="competquty" size="2" class="validate[required,custom[integer]] text-input" >
</td>
<td>
<input type="text" name="competprice_frm[]" id="competprice_frm" size="2" class="validate[required,custom[number],funcCall[getPriceFromE]] text-input" />
</td>
<td>
<input type="text" name="competprice_to[]" id="competprice_to" size="2" class="validate[required,custom[number],funcCall[getPriceTo]] text-input" />
</td>
<td><input type="text" name="competmrp[]" id="competmrp" size="2" class="validate[required,custom[number],funcCall[getMrp]] text-input" onBlur=''/>
</td>
<td>
<select name='ChemistParma[]' id='ChemistParma' style="width:86px">
<option value=''>-select chemict-</option>
<?echo $chemist_str?>
</select></td>
<td>
<img src="media/images/details_open.png" onClick="insComep()"/>
</td>
</tr>
</table>
It's quite simple,
document.getElementsByName("inputBox");
You can use a multitude of different methods.
1) Manual traversal of childNodes etc, and checking for nodeName. This is pretty involved and requires a lot of boring code, so I won't write an example of that here.
2) document.getElementsByTagName. This can also be used on DOM nodes, so you can do something like document.getElementById("my_form").getElementsByTagName("input"), depending on how the rest of the DOM looks of course.
3) document.querySelectorAll("input"). The string argument is a full CSS selector. Some older browsers doesn't support this though.
Here is example for you with your code:
<div id="inputs">
<INPUT TYPE="text" NAME="inputbox" VALUE="asd">
<INPUT TYPE="text" NAME="inputbox" VALUE="efs">
</div>
<script>
$(document).ready(function () {
var howmany = $('#inputs').children("input").length;
alert(howmany);
for( i=0; i<= howmany-1; i++ ) {
var input = $("#inputs").children("input").eq(i).attr('VALUE');
alert(input);
}
});
</script>