I am working on a project where my job is to create a basic web data entry form. I have all the syntax functioning exactly as it should, except now I have the need to have a hyperlink on the page and when clicked add a label and text box.
My questions:
Should be simple enough with some JavaScript, however for whatever reason my syntax does not add anything?
What do I need to do in order for when the Add Additional Child link is clicked it will add a new text box and label?
My index.php:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
$("#newChild").on('click', function() {
$('#ChildInfo').after(
'<div id="ChildInfo">' +
'<td><label for="lblChildName">Child Name: </label></td>' +
'<td class="style1"><input type="text" name="txtChildName" maxlength="100" size="30"></td>' +
' remove Child' +
'</div>'
);
});
$(document).on('click', '#rmChild', function() {
$(this).closest('#ChildInfo').remove();
});
</script>
</head>
<body>
<div id="BasicInfo">
<table>
<tr>
<td><label for="lblParent">Parent Name:</label></td>
<td class="style1"><input type="text" name="txtparentname" maxlength="500" size="30"></td>
</tr>
<tr>
<td><label for="lblPhone">Contact Number:</label></td>
<td class="style1"><input type="text" name="txtphone" maxlength="500" size="30"></td>
</tr>
</table>
</div>
<div id="ChildInfo">
<label for="lblChildName">Child Name:</label>
<input type="text" name="txtChildName" maxlength="100" size="30">
<br><br><br>
Add Additional Child
</div>
</body>
</html>
Update 2:
Change your event handler assignment ot be dynamic, like you are doing for removing:
https://jsfiddle.net/5n6du1qt/2/
$(document).on('click', '#newChild', function() {
$('#ChildInfo').after(
'<div id="ChildInfo">' +
'<td><label for="lblChildName">Child Name: </label></td>' +
'<td class="style1"><input type="text" name="txtChildName" maxlength="100" size="30"></td>' +
' remove Child' +
'</div>'
);
});
$(document).on('click', '#rmChild', function() {
$(this).closest('#ChildInfo').remove();
});
-------------- other ways ---------------------
This is because you need to move your script to be called after load event, once the dom is ready.
Please see the working fiddle here: https://jsfiddle.net/5n6du1qt/
You can try changing the script to this:
//<![CDATA[
window.onload=function(){
$("#newChild").on('click', function() {
$('#ChildInfo').after(
'<div id="ChildInfo">' +
'<td><label for="lblChildName">Child Name: </label></td>' +
'<td class="style1"><input type="text" name="txtChildName" maxlength="100" size="30"></td>' +
' remove Child' +
'</div>'
);
});
$(document).on('click', '#rmChild', function() {
$(this).closest('#ChildInfo').remove();
});
}//]]>
Update:
Here is one other variation for the script : https://jsfiddle.net/5n6du1qt/1/
$(function(){
$("#newChild").on('click', function() {
$('#ChildInfo').after(
'<div id="ChildInfo">' +
'<td><label for="lblChildName">Child Name: </label></td>' +
'<td class="style1"><input type="text" name="txtChildName" maxlength="100" size="30"></td>' +
' remove Child' +
'</div>'
);
});
$(document).on('click', '#rmChild', function() {
$(this).closest('#ChildInfo').remove();
});
})
Related
I am very new in jsp, and jquery
my code create dynamic text boxes and one drop-down menu based on button clicked,
after created textboxes I want to add one more textbox if the user select option male after the text boxes dynamically added.
the add code works, but the text box when selecting the male option not works.
please please help.
this is my code
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<br />
<div class="container">
<h3 align="center">Change Control Board (CCB)</h3>
<br />
<h4 align="center">Enter Change Details</h4>
<br />
<form name="form1" method="GET" action="jsv" id="form1">
<div class="table-repsonsive">
<span id="error"></span>
<table class="table table-bordered" id="item_table">
<tr>
<th>Enter Change Name</th>
<th>Enter Change Description</th>
<th>Enter Change GW</th>
<th>Enter Change AW</th>
<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</table>
<div align="center">
<input type="submit" name="submit" class="btn btn-info" value="Insert" />
</div>
</div>
</form>
</div>
</body>
</html>
<script>
$(document).ready(function() {
$(document).on('click', '.add', function() {
var html = '';
html += '<tr> name="change_name1[]"';
html += '<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
html += '<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
html += '<td><input type="text" name="change_GW[]" class="form-control change_GW" /></td>';
html += '<td><input style="display:none;" id="business" type="text" name="change_G[]" class="form-control change_GW" /></td>';
html += '<td><select id="purpose" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
});
$(document).on('click', '.remove', function() {
$(this).closest('tr').remove();
});
});
$(document).ready(function() {
$('#purpose').on('change', function() {
if (this.value == '1') {
$("#business").show();
} else {
$("#business").hide();
}
});
});
</script>
First of all you have an error on the first line where you are concatenating the tr in the $html, it is '<tr> name="change_name1[]"'; where as it should be '<tr name="change_name1[]">'; but since the name attribute is not a valid attribute for tr you should change it to a unique id.
I hope the select menu and the input boxes that are generated by the click of a button are not multiple as there is an id attribute on the select input which needs to be unique in case there are multiple select boxes, but since it is not mentioned you make a slight change to your event binding like the code below
You must change the id attributes from static to dynamic something like appending a count along with their ids i have added it for you hope it solves your problem.
your final script will look like this
$(document).ready(function () {
var count = 0;
$(document).on('click', '.add', function () {
var html = '';
html += '<tr>';
html +='<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
html +='<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
html +='<td><input type="text" name="change_GW[]" class="form-control change_GW" /></td>';
html += '<td><input style="display:none;" id="business_' + count +
'" type="text" name="change_G[]" class="form-control change_GW" /></td>';
html += '<td><select id="purpose_' + count +
'" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';
html +=
'<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
$('#purpose_' + count).on('change', function () {
if (this.value == '1') {
$("#business_"+count).show();
} else {
$("#business_"+count).hide();
}
});
count++;
});
$(document).on('click', '.remove', function () {
$(this).closest('tr').remove();
});
});
Cut this code:
$('#purpose').on('change', function() {
if ( this.value == '1')
{
$("#business").show();
}
else
{
$("#business").hide();
}
}
and paste it right behind $('#item_table').append(html);
Two $(document).ready() sections make no sense. And the event handler (on click) needs to be attached after you create the select box.
You are adding select dynamically at run time.so, after adding Select You need to bind it's change event.
So Just make change into your javascript code
<script>
$(document).ready(function(){
counter=0;
$(document).on('click', '.add', function(){
counter=counter+1;
var html = '';
html += '<tr> name="change_name1[]"';
html += '<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
html += '<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
html += '<td><input type="text" name="change_GW[]" class="form-control change_GW" /></td>';
html += '<td><input style="display:none;" id="business_'+counter+'" type="text" name="change_G[]" class="form-control change_GW" /></td>';
html += '<td><select id="purpose_'+counter+'" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
$('#purpose_'+counter).on('change', function() {
if ( this.value == '1')
{
$("#business_"+counter).show();
}
else
{
$("#business_"+counter).hide();
}
});
});
$(document).on('click', '.remove', function(){
$(this).closest('tr').remove();
});
});
</script>
i have add dynamic row using jquery now i want to add those column of the row. Down below is my code i am not able to add the column that is created dynamically.the first textbox is calculated and answer is displayed in grandtotal textbox but the rest textbox cannot be calculated.
<tbody>
<tr class="data-contact-person">
<td>
<input type="text" name="a" class="form-control a" />
</td>
<td>
<input type="text" name="b" class="form-control b" />
</td>
<td>
<input type="text" name="c" class="form-control c" />
</td>
<td>
<input type="text" name="d" class="form-control d" />
</td>
<td>
<button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Grand-Total</td>
<td>
<input data-val="true" id="grdtol1" name="grdtol1" value="" class="form-control text-box single-line" type="text">
</td>
<td>
<input data-val="true" id="grdtol" name="grdtol2" value="" class="form-control text-box single-line" type="text">
</tr>
</tfoot>
$(document).ready(function () {
$(document).on("click", ".classAdd", function () { //
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
});
$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
$(document).ready(function (e) {
$("input").change(function () {
var grdtol1 = 0;
$("input[name=c]").each(function () {
grdtol1 = grdtol1 +parseInt( $(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
});
})
First, a piece of advice, don't create multiple $(document).ready() functions in the same javascript file, you just need one.
You haven't post your html code, so I'm guessing here, but I suppose you initially have row with the inputs and you also have an input with name="grdtol1" where you want to calculate the sum of the values of the column, and it has to refresh when you change the value in any of the inputs.
According to that, I see this problems...
You need to use event delegation for the input onchange event (like you do for the .deleteContact button). You're associating the event directly, so it only applies to the elements that are in the DOM when the page loads, and not for the rows you add dinamically. You can associate the event to the table and delegate it to the input, for example.
Inside of the event, you're selecting $("input[name=c]"), but according to the previous code, your inputs will have name="c' + rowCount + '". You chould use the class to select them.
If you delete one row, you should also recalculate the sum, because the input of that row will disappear.
Putting all together...
$(document).ready(function () {
$(document).on("click",".classAdd",function() {
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
function calculateGrandtotal() {
var grdtol1 = 0;
$('input.c').each(function() {
grdtol1 += parseInt($(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
}
$('#maintable').on('click','.deleteContact',function () {
$(this).closest('tr').remove();
calculateGrandtotal()
})
.on('change','input.c',function() {
calculateGrandtotal()
});
});
I hope it helps
I want to add a form including an input text using javascript.
the adding works fine, but if i click the submit button nothing happens.
Here is the code:
if (document.getElementById("run_name_query_box") == null) {
var run_name_search = '<fieldset id="run_name_query_box">' +
'<table> <td><tr>' +
'<p style="font-size:16px"> Runname:</p>' +
'<input type="text" style="font-size:16px" id="run_name">' +
'<form method="post" action=query name="query_runname_name">' +
'<input style="font-size:14px" value="Search Database" onclick= "run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ' +
'</form>' +
'</tr></td></table>' +
'</fieldset>';
$("#query_type_box").append(run_name_search);
}
the run_name_querycreator() function sets the value of the input.
I already use almost the same thing somewhere else and there it works:
'<form method="post" action=query name="query">' +
'<input style="font-size:14px" value = "Search Database" onclick = "combine_query()" id="search" type="submit" name="search" >' +
'</form>'
If i copy the plain html part just into the main html body it works too.
This is all part of mako file used in a pyramid interface.
I think your HTML is malformed. I don't think a form element can be a child of a table element.
Your code should be like this,
var run_name_search = '<fieldset id="run_name_query_box">' +
'<form method="post" action=query name="query_runname_name">' +
'<table>'+
'<tr><td>' +
'<p style="font-size:16px"> Runname:</p>' +
'<input type="text" style="font-size:16px" id="run_name">' +
'<input style="font-size:14px" value="Search Database" onclick= "run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ';
$("#query_type_box").append(run_name_search);
This is your code generated HTML,
<fieldset id="run_name_query_box">
<p style="font-size:16px">Runname:</p>
<input style="font-size:16px" id="run_name" type="text">
<input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" name="search_run_name_name" type="submit">
<table>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<form method="post" action="query" name="query_runname_name"></form>
</tr>
</tbody>
</table>
</fieldset>
There is no form elements in within your <form>. (Including your form submit button). Then How it will work?
Your code should generate HTML like this to work,
<fieldset id="run_name_query_box">
<form method="post" action="query" name="query_runname_name">
<table>
<tbody>
<tr>
<td>
<p style="font-size:16px">Runname:</p>
<input style="font-size:16px" id="run_name" type="text">
<input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" name="search_run_name_name" type="submit">
</td>
</tr>
</tbody>
</table>
</form>
</fieldset>
See this FIDDLE
In this fiddle You can see BEFORE FIX section dynamic elements generated by you.
In AFTER FIX section you can see the correct html format.
FYI, When you are working with Dynamic html, Check you dynamically created html in developers tool.
Working example: http://jsfiddle.net/awesome/6hh8r/
Description: Added missing onclick function run_name_querycreator() in global namespace and connected it to .post() with apparent form data.
window.run_name_querycreator = function () {
//alert($('#run_name').val());
var x = '{"run_name":"' + $('#run_name') + '"}'
$.ajax({
type: "POST",
url: $form.attr('action'),
data: x,
success: alert('success'),
dataType: 'json'
});
}
$(function () {
if (document.getElementById("run_name_query_box") === null) {
var run_name_search = '<fieldset id="run_name_query_box">' +
'<table> <td><tr>' +
'<p style="font-size:16px"> Runname:</p>' +
'<input type="text" style="font-size:16px" id="run_name">' +
'<form method="post" action=query name="query_runname_name">' +
'<input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ' +
'</form>' +
'</tr></td></table>' +
'</fieldset>';
$("#query_type_box").append(run_name_search);
$form = $('[name="query_runname_name"]');
$form.submit(function (e) {
e.preventDefault();
});
}
});
EDIT: Just so I asks questions better next time. I got a -1 what did I do wrong?
I'm adding quite a lot of html dynamically and want to be able to remove them also one by one.
Below the JQuery. I want to be able to remove the whole $("#row1' + (counter) + '") div including all divs in it by clicking the remove button under it.
Here's a fiddle: http://jsfiddle.net/FullContCoder/Sf9r5/1/
Thanks a lot in advance!
$(document).ready(function() {
var counter = 0;
$(".addButton").click(function() {
var test = $( '<div id="row1' + (counter) + '" class="row"><div class="col-md-2"><p><small>Placement Name:</small></p><input id="inputPlacement' + (counter) + '" type="text" class="form-control input-sm" name="placementName" placeholder="ex: Homepage">' +
'</div><div class="col-md-3"><p><small>URL:</small></p><input id="inputURL" type="url" class="form-control input-sm" name="url" placeholder="ex: http://www.allure.com"></div>' +
'<div class="col-md-2"><div class="row"><div class="col-md-12"><p><small>Select a Date and Time:</small></p></div></div><div class="row"><div class="col-md-12">' +
'<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy"><input class="span2" size="16" type="text" value="12-02-2012" readonly=""><span class="add-on"><i class="icon-calendar"></i>' +
'</span></div></div></div><div class="row"><div class="input-append bootstrap-timepicker"><input id="timepicker1" type="text" class="input-small"><span class="add-on">' +
'<i class="glyphicon glyphicon-time"></i></span></div></div></div><div class="col-md-2"><p><small>Recurring:</small></p><select id="recurring" class="form-control input-sm">' +
'<option name="daily" value="daily">Daily</option><option name="weekly" value="weekly">Weekly</option><option name="month" value="month">Month</option></select></div>' +
'<div class="col-md-2"><p><small>Day of Week:</small></p><div class="row"><div class="col-md-6"><label class="checkbox-inline"><input id="mon" name="test" type="checkbox" value="1"> Mon</label>' +
'</div><div class="col-md-6"><label class="checkbox-inline"><input id="fri" name="test" type="checkbox" value="1"> Fri</label></div></div><div class="row"><div class="col-md-6">' +
'<label class="checkbox-inline"><input id="tue" name="test" type="checkbox" value="1"> Tue</label></div><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="sat" name="test" type="checkbox" value="1"> Sat</label></div></div><div class="row"><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="wen" name="test" type="checkbox" value="1"> Wed</label></div><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="sun" name="test" type="checkbox" value="1"> Sun</label></div></div><div class="row"><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="thu" name="test" type="checkbox" value="1"> Thu</label></div></div></div><div class="col-md-1"><p><small>Remove:</small></p>' +
'<button type="button" class="removeButton btn btn-default btn-sm"><span class="glyphicon glyphicon-minus-sign"></span></button></div></div>' )
$('.removeButton').click(function() {
$("#row1' + (counter) + '").remove();
});
counter++;
$("#row1").after(test);
});
});
You should use event delegation to add events to dynamically created elements. And use .closest() to get the first element that matches the selector. Try this:
$(document).on('click','.removeButton',function() {
$(this).closest("div.row").remove();
});
You need to move your remove button click handler outside of add button click handler.
DEMO
You can try it.
$(document).on('click', '.removeButton', function(){
$('#row1' + counter).remove();
});
1) You need to use event delegation here to bind click event to your button since it has been added dynamically to the DOM.
2) Use .closest() to remove the closest matching ancestor .row and remove redundant counter variable here:
3) You also need to move your click handler of remove button outside of the click handler of the add button.
Final code should look something like this:
$(document).ready(function () {
$(".addButton").click(function () {
var test = .....
$("#row1").after(test);
});
$('.removeButton').click(function () {
$(this).closest(".row").remove();
});
});
Updated Fiddle
Why when I add the same html code with javascript jquery I loose margin ?
Try this jsfiddle and you will understand me.
jQuery
function addphone() {
$( "#phonedetails" ).append( '<div >' +
'<label>phone :</label>' +
'<input type="text" /> ' +
'<input type="button" onclick="addphone()"/>' +
'</div>');
}
HTML
<div id="phonedetails">
<div>
<label>phone :</label>
<input type="text" />
<input type="button" onclick="addphone();"/>
</div>
</div>
It isn't a margin, it is a space (i.e. what you get when you press the space bar) between the label and the input. It is missing in the code generated from JS.
Change:
'<label>phone :</label>' +
To:
'<label>phone :</label> ' +
// ^ space here
You aren't losing margins, you're losing whitespace:
http://jsfiddle.net/3md9S/2/
$( "#phonedetails" ).append( '<div >' +
'<label>phone :</label> ' + // SINGLE SPACE ADDED HERE
'<input type="text" /> ' +
'<input type="button" onclick="addphone()"/>' +
'</div>');
That is just a white space in your html.
Also you don't have to write html again to append , you can clone it -
$( "#phonedetails" ).append($('#phonedetails div').eq(0).clone());
Demo --> http://jsfiddle.net/3md9S/7/