WooBin WooYeol WooBin WooYeol - 7 months ago 14
Javascript Question

Add Textbox and Label From Hyperlink Click

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:


  1. Should be simple enough with some JavaScript, however for whatever reason my syntax does not add anything?

  2. 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>' +
'<a href="#" id="removeChild"> remove Child</a>' +
'</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>
<a href="#" id="newChild">Add Additional Child</a>
</div>
</body>
</html>

Ash Ash
Answer

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>' +
      '<a href="#" id="removeChild"> remove Child</a>' +
      '</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>' +
    '<a href="#" id="removeChild"> remove Child</a>' +
    '</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>' +
      '<a href="#" id="removeChild"> remove Child</a>' +
      '</div>'
    );
  });
  $(document).on('click', '#rmChild', function() {
    $(this).closest('#ChildInfo').remove();
  });
})
Comments