Hello i am created one table with zero row and a "add row button" in which when user click on "add row buttton" one extra row for that table in created using javascript. In table row i am creating three input field as name, address and mobile number. Now i want, when user changing moblie number filed then the jquery must be call as shown in bellow but its now working what should i do??
The code for creating table row and jquery which is not working as below..
<form action "..." mehtod="post">
<table id="table1">
<thead>
<tr>
<th>name</th>
<th>address</th>
<th>mobile</th>
</tr>
</thead>
<tbody>
</table>
<button id="insertrowbutton" type="button" float: right;" onclick="insertrow()">Insert new row</button>
<input type="submit" value="submit" name="submit">
</form>
<script>
function insertrow() {
document.getElementById("table1").insertRow(-1).innerHTML = '<td> <input type="text" name="name[]"> </td><td> <input type="text" name="address[]"></td> <td><input type="number" name="mobile[]"</td>
}
</script>
<script type="text/javascript">
$('input[name^="mobile"]').on('change', function() {
alert($(this).val());
});
</script>
You're creating new elements all the time, so the change handler isn't bound to them. Try this instead, which will ensure that the change listener is applied.
$(document).on('change', 'input[name^="mobile"]',function() {
alert($(this).val());
});
Use this and it will work:
$(document).on('change', 'input[name^="mobile"]', function() {
alert($(this).val());
});
Please note you have invalid code in your button float: right;"
demo
function insertrow() {
document.getElementById("table1").insertRow(-1).innerHTML = '<td> <input type="text" name="name[]"> </td><td> <input type="text" name="address[]"></td> <td><input type="number" name="mobile[]"</td>'
}
$(document).on('change', 'input[name^="mobile"]', function() {
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action "..." mehtod="post">
<table id="table1">
<thead>
<tr>
<th>name</th>
<th>address</th>
<th>mobile</th>
</tr>
</thead>
<tbody>
</table>
<button id="insertrowbutton" type="button" onclick="insertrow()">Insert new row</button>
<input type="submit" value="submit" name="submit">
</form>
Related
This is my HTML layout. I have multiple forms:
<table>
<form>
<tr>
<td id="1">Text1</td>
<td id="2">Text2</td>
<input type="button" value="Submit" id="submit1">
</tr>
</form>
<form>
<tr>
<td id="1">Text1</td>
<td id="2">Text2</td>
<input type="button" value="Submit" id="submit2">
</tr>
</form>
</table>
What I want is to fetch the text in between the <td> of id=1. What I have done is:
$(document).ready(function(){
$('[id*="submit"]').on('click', function() {
console.log($(this).closest("form").find('td first').text());
});
});
Here you go with a solution
$(document).ready(function(){
$('[id*="submit"]').on('click', function() {
console.log($(this).closest('form').find('td').first().text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td id="form1-1">Form 1: Text1</td>
<td id="form1-2">Text2</td>
<input type="button" value="Submit" id="submit1">
</tr>
</table>
</form>
<form>
<table>
<tr>
<td id="form2-1">Form 2: Text1</td>
<td id="form2-2">Text2</td>
<input type="button" value="Submit" id="submit2">
</tr>
</table>
</form>
There are few thing to notice in your code
id should be unique
form tag should be outside the table
Hope this will you.
You almost got it right! It should be
$(this).closest("form").find('td#1').text()
You might consider not using id's in this context; they are meant to be unique.
You should may be prefer class than id, iike what Julia Finarovsky said, id should be unique.
You almost got it right, though you just forgot : in between td and first in the find param
$(document).ready(function(){
$('[id*="submit"]').on('click', function() {
console.log($(this).closest("form").find('td:first').text());
});
});
Hope this helps.
I have problem when i want show form edit
<!-- this is form-->
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<% while(resultset.next()){ %>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td><%= no %></td>
<td><input id='f1' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(2)%>'></td>
<td><input id='f2' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(3)%>'></td>
<td><input id='f3'class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(4)%>'></td>
<td><input id='f4' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(5)%>'></td>
<td><input id='f5' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(6)%>'></td>
<td><input id='f6' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(7)%>'></td>
<td><a id='elementId' onclick="showDiv()"><span class='glyphicon glyphicon-pencil'></span></a> <input type='submit' id="welcomeDiv" style="display:none;"></td>
<td><span class="glyphicon glyphicon-trash"></span></td>
</tr>
</form>
</tbody>
<% no++; } %>
</table>
The form will enable when the glypicon edit click. Here is the
JAVASCRIPT :
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('#elementId').click(function(){
$('#f1').removeAttr("disabled");
$('#f2').removeAttr("disabled");
$('#f3').removeAttr("disabled");
$('#f4').removeAttr("disabled");
$('#f5').removeAttr("disabled");
$('#f6').removeAttr("disabled");
$('#f7').removeAttr("disabled");
});
</script>
when <a id='elementId' onclick="showDiv()"><span class='glyphicon glyphicon-pencil'></span></a> <input type='submit' id="welcomeDiv" style="display:none;"> click
for first row, work.
but for the second row like this
You are repeating the same id on one page. You must use only one id on a page. You can use the same class multiple times but not id.
Basically when you click on AAA then it is removing the class "aaa" from input field. You can check it with Firebug . It is not showing or popping up anything in it. But I have written a new code. It will enable and disable the input
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td>1</td>
<td><input type="text" class="aaa" value ="kool" disabled="disabled"/></td>
<td><input type="text" class="aaa" value ="fool" disabled="disabled"/></td>
<td class="abc">AAA</td>
</tr>
</form>
</tbody>
</table>
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('.abc').click(function(){
$(this).closest('tr').find('.aaa').attr('disabled',false);
});
</script>
box.
A small example to do for this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td>1</td>
<td><input type="text" class="aaa"/></td>
<td><input type="text" class="aaa"/></td>
<td class="abc">AAA</td>
</tr>
</form>
</tbody>
</table>
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('.abc').click(function(){
$(this).closest('tr').find('.aaa').removeClass('aaa');
});
</script>
In this way you are just referring to closest element of click.You can modified any content based on this. Please feel free to ask any query, if you face any problem in it. I just shared an example for execution for this.
This is applicable for any number of rows in a table.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td>1</td>
<td><input type="text" class="aaa" value ="kool" disabled="disabled"/></td>
<td><input type="text" class="aaa" value ="fool" disabled="disabled"/></td>
<td class="abc">AAA</td>
</tr>
</form>
</tbody>
</table>
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('.abc').click(function(){
$(this).closest('tr').find('.aaa').attr('disabled',false);
$(this).closest('tr td:eq(2)').find('a:eq(0)').show();
$(this).closest('tr td:eq(2)').find('a:eq(1)').hide();
// Or YOu can use
$(this).closest('tr td:eq(2)').find('a:eq(0)').css('display','block');
$(this).closest('tr td:eq(2)').find('a:eq(0)').css('display','none');
});
</script>
Please refer eq:(COlUMN of TR). It starts from zero so make adjustment accordingly. Hope you get complete answer of your query.
Add some class in tr.
<script type="text/javascript">
$('.abc').click(function(){
$('trClassName').find('.aaa').attr('disabled',true);
$(this).closest('tr').find('.aaa').attr('disabled',false);
});
</script>
Hope it will solve all your problems.
Only add class in tbody tr and also it should be with dot in jquery syntax.I have mentioned classname and it should also be with .TrClassName which you will mention in tr.
I am new in JavaScript, I have a html table with two text fields and add button and now I write a little jquery script which generate two more text fields when click on add button all this work success but my problem is how to put different names and ids of these dynamically generated fields. My codes are below.
HTML Code
<table width="50%" border="1" cellspacing="0" cellpadding="0" class="table">
<tr>
<td>ACC_CODE</td>
<td>ACC_NAME</td>
<td>ACTION</td>
</tr>
<tr>
<td> <input type="text" class="acc_code" name="acc_code" id="acc_code"/></td>
<td> <input type="text" class="click" name="parentinput" id="parentinput" /></td>
<td> <input type="button" value="Add New" class="addNew" name="addNew" /></td>
</tr>
</table>
Jquery Code
$(document).ready(function() {
$('.addNew').live({
click: function(){
$('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes"/></td><td><input type="text" class="click" name="parentinputs" id="parentinputs" /></td><td><input type="button" value="Add New" class="add" name="add" /></td></tr>');
});
});
Please any help how to generate different names and ids of these fields.
I would use on() ( and off() ).
You set it to the parent container (in this case the table) and listen to the class 'addNew'.
Any time a new item with class="addNew" is added to the table, it will be active.
<table width="50%" border="1" cellspacing="0" cellpadding="0" class="table">
<tr>
<td>ACC_CODE</td>
<td>ACC_NAME</td>
<td>ACTION</td>
</tr>
<tr>
<td> <input type="text" class="acc_code" name="acc_code" id="acc_code"/></td>
<td> <input type="text" class="click" name="parentinput" id="parentinput" /></td>
<td> <input type="button" value="Add New" class="addNew" name="addNew" /></td>
</tr>
</table>
<script>
$(document).ready(function() {
$('.table').on('click', '.addNew', function() {
$('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes"/></td><td><input type="text" class="click" name="parentinputs" id="parentinputs" /></td><td><input type="button" value="Add New" class="addNew" name="add" /></td></tr>');
});
});
</script>
But notice: in your code you did this:
<input type="button" value="Add New" class="add" name="add" />
Of course this will not work; it has to be class="addNew"
First of all .live is depreciated since jq 1.7
Use .delegate
so..
$(document).ready(function() {
var idIndex=1;
$(document).delegate("click",".addNew",function() {
$('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes_'+idIndex+'"/></td><td><input type="text" class="click" name="parentinputs" id="parentinputs_'+idIndex+'" /></td><td><input type="button" value="Add New" class="add" name="add" /></td></tr>');
idIndex++;
});
});
I have a suggestion that may work fine,
why not make the input field to be an array,
so when you submit it, it will be a group of input group together
or you can easily make the name id's to be base on tr index
like name_1 and id_1, name_2 and id_2
I got index of a row. Column count is static so I know in which column to put what, but what I want is to be able using onclick event handler to change content in the specific cell. the element which has this onclick event applied is outside the table with all the text inputs that I want to copy contents from. a brief example
<table id="table1">
<tr>
<td>SomeText</td>
<td>SomeOtherText</td>
</tr>
<tr>
<td>SomeText2</td>
<td>SomeOtherText2</td>
</tr>
</table>
<div id="box1">
<form>
<input type="text" name="newText"/>
<input type="button" onclick="?" />
</form>
</div>
You can get to this specific cell using something like:
$('#table1 tr:eq(1) td:eq(1)')
Here it will select second row's second column (it's 0 based counting).
And then you can use jQuery.text() or jQuery.html().
You may do something like the following:
<table id="table1">
<tr>
<td>SomeText</td>
<td>SomeOtherText</td>
</tr>
<tr>
<td>SomeText2</td>
<td>SomeOtherText2</td>
</tr>
</table>
Then in you onclick method you can do something like following:
$('#table1 tr:eq(1) td:eq(1)').text("Whatever text you want");
OR
$('#table1 tr:eq(1) td:eq(1)').html("Whatever text you want");
you can use the java script and id.
<table id="table1">
<tr>
<td id=r1c1>SomeText</td>
<td id=r1c2>SomeOtherText</td>
</tr>
<tr>
<td id=r2c1>SomeText2</td>
<td id=r2c2>SomeOtherText2</td>
</tr>
</table>
<script>
function updatetxt(){
x=Document.getElementById(r1c1);
x.value=Document.getElementById(txt1).value
}
</script>
<div id="box1">
<form>
<input type="text" id=txt1 name="newText" />
<input type="button" onclick="updatetxt()" />
</form>
</div>
Trying to use the button "subtract" to remove the row it's clicked in.
"add" button is working well.
Html:
<table id="mytable" width="250px" border="0" cellspacing="0" cellpadding="0" style="text-align:center;>
<thead>
<tr class="product">
<th style="text-align:center;"><strong>Item</strong></th>
<th style="text-align:center;"><strong>Qty.</strong></th>
<th style="text-align:center;"><strong>Remarks</strong></th>
</tr>
</thead>
<tr name="product" class="product">
<td width="100px"><input type="text" width="100px" name="product" id="product" /></td>
<td width="5px"><input type="text" width="5px" size="1" maxlength="2" name="qty" id="qty" /></td>
<td width="100px"><input type="text" width="100px" height="14px" name="remarks" id="remarks" /></td>
<td><input type="submit" name="add" id="add" value="+" /></td>
<td><input type="submit" name="subtract" id="subtract" value="-" /></td>
</tr>
</table>
What I'm using:
<script type="text/javascript">
$(document).ready(function() {
$("#add").click(function() {
$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
$('#mytable tbody>tr:last #product').val('');
$('#mytable tbody>tr:last #qty').val('');
$('#mytable tbody>tr:last #remarks').val('');
$('#mytable tbody>tr:last #add').val('+');
return false;
});
});
Could anyone help?
You can't use the same id more than one time on a page..
Thus if each row has a button to delete that row you probably want to use a class name for targeting the element.
Thus I suggest switching to classes like this:
<td><input type="submit" name="subtract" class="subtract" value="-" /></td>
then in JS
$("input.subtract").click(function() {
$(this).closest("tr").remove();
});
You also need to fix your add button since if you have more than one row you will have duplicate ID's
$("#subtract").click(function(e){
$(this).closest(".product").remove();
e.preventDefault();
});
I'd also recommend using a class instead of an id for subtract and add since you'll have multiple copies in the dom and it's considered bad manners to have duplicate IDs.
Similar to Matt's code, this would also work:
$("input.subtract").click(function() {
$(this).parents("tr").remove();
});
I don't know if one is better than the other, but I can confirm that this code works.