CODEWITHSUNDEEP
javascriptphpjqueryhtml
WooBin WooYeol
WooBin WooYeol

Reputation: 53

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>

Upvotes: 2

Views: 62

Answers (1)

Ash
Ash

Reputation: 2585

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();
  });
})

Upvotes: 2

Related Questions