How to set dynamic input name which generated dynamically using jquery live() - javascript

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

Related

JQuery not working for input name as array

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>

Change Button Text

I am learning php and want to set the display text for a button that I have. I know that you can use javascript to change the button text,but that (at least from what I have seen) works for .onclick I want the button text to be changed when the page loads. By default the button text on my page when it loads displays Submit Query when my page loads I want the text to read Button on Page
Is there a way using php to 1) set the button text and 2) have it span 2 rows in the table?
This is the code I am working with:
<html>
<body>
<form id="TestForm" runat="server">
<div>
<div id="calculationfields">
<table id="calculations">
<tr>
<td><label for="lblreadonly1:">Read Only 1:</label></td>
<td><input type="text" name="txtReadOnly1" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly2:">Read Only 2:</label></td>
<td><input type="text" name="txtReadOnly2" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly3:">Read Only 3:</label></td>
<td><input type="text" name="txtreadonly3" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td rowspan="2"><input type="submit" name="btn123" text="Button On Page"></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
You should use value instead of text for your submit button
<body>
<form id="TestForm" runat="server">
<div>
<div id="calculationfields">
<table id="calculations">
<tr>
<td><label for="lblreadonly1:">Read Only 1:</label></td>
<td><input type="text" name="txtReadOnly1" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly2:">Read Only 2:</label></td>
<td><input type="text" name="txtReadOnly2" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly3:">Read Only 3:</label></td>
<td><input type="text" name="txtreadonly3" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="btn123" value="<?php echo 'Button On Page'; ?>" style="width:100%"></td>
</tr>
</table>
</div>
</div>
</form>
</body>
If you always know what you want your button to say, you don't need php or javascript. You can just use the html "value" attribute. You are incorrectly using a attribute labled "text", you should use "value". Update your code to the following.
Change your button html from:
<input type="submit" name="btn123" text="Button On Page">
To:
<input type="submit" name="btn123" value="Button On Page">
Edit:
In order to have your button go full width. You should use "colspan" instead of "rowspan". Your td is in a row, and needs to span columns.
Change this code from:
<td rowspan="2"><input type="submit" name="btn123" value="Button On Page"></td>
to (note that I added an id of "button" to your button):
<td rowspan="2"><input type="submit" id="button" name="btn123" value="Button On Page"></td>
Then add a little css:
#button{
width: 100%;
}
Here is a fiddle with a working example:
https://jsfiddle.net/joeydehnert/m1ttcr86/

Open modal box isn't working

This code open a modal box. But my problem is when I tried to open it with a different id for my edit purposes the modal box isn't working. I want to add this code <input type="button" value="Edit Item" id="edit">open a modal box using another id. But why isn't working?
<input type="button" value="Add New Item" id="add_new">
<div class="entry-form">
<form name="userinfo" id="userinfo">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td colspan="2" align="right">Close</td>
</tr>
<tr>
<td>Item</td>
<td><input type="text" name="items" id="items" value="" class="inputs" autocomplete="off"></td>
</tr>
</div>
<script>
$(document).ready(function(){
$("#add_new").click(function(){
$(".entry-form").fadeIn("fast");
});
$("#close").click(function(){
$(".entry-form").fadeOut("fast");
});
});
</script>
You have to add the #edit to the click event handler as well, as you can see in this jsFiddle.
<input type="button" value="Add New Item" id="add_new">
<input type="button" value="Edit Item" id="edit">
<div class="entry-form">
<form name="userinfo" id="userinfo">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td colspan="2" align="right">Close</td>
</tr>
<tr>
<td>Item</td>
<td><input type="text" name="items" id="items" value="" class="inputs" autocomplete="off"></td>
</tr>
<div>
And your Javascript:
$(document).ready(function(){
$("#add_new, #edit").click(function(){
$(".entry-form").fadeIn("fast");
});
$("#close").click(function(){
$(".entry-form").fadeOut("fast");
});
});
First, your HTML is broken as you haven't added closing tags for any of the following:
first div, form, table, second div.
Second, your script should have a type="text/javascript" attribute.

How to close the table on click in JavaScript?

I have a table which takes the user details. The code is as follows:
<table id="record" border=1>
<tr>
<td>Emp Name</td>
<td><input type="text" placeholder="Employee Name"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" placeholder="Address"></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Add">
<input type="button" value="Cancel">
</td>
</tr>
</table>
Now, when I click on the Cancel button, the table should close. How can I do this?
Just give the input button an id...
<input type="button" id="close" value="cancel">
Then add some Jquery...(assuming you are using jquery)
$(document).ready(function(){
$('#close').click(function(){$('#record').hide();});
});
DEMO HERE
Or theres the one liner...
<input type="button" value="cancel" onclick="$('#record').hide();">
DEMO 2
EDIT
And....Your request for just pure javascript...
<input type="button" id="close" value="Cancel" onclick=" document.getElementById('record').style.display = 'none';">
DEMO 3

Remove Row on Button Click

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.

Categories