Member Avatar for tanha

Hi.
I have a form for book registration, so by default I have a text field with a button besides that for the author name, but when the user click the button I need the another text box with another button besides that created, and if again it click another created and so on, and the function of those new buttons created besides the text field is that when they clicked the button with its text field should be deleted.

all these should be done without refreshing the page.

can anyone help me through that ?

  • 2 Contributors
  • 3 Replies
  • 223 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by buddylee17

Dani AI

Generated

Quick diagnosis and a compact fix that ties into ’s point: AJAX is only needed if the server must be told about adds/removes immediately. For purely client-side fields (added/removed before form submit) plain DOM scripting is enough. The two likely causes of the behavior seen in ’s draft are (1) duplicate IDs for every new input (avoid this), and (2) the insert/append logic — calling tbl.appendChild(row) and then document.body.insertBefore(...) moves nodes into wrong parents, so new rows end up in unexpected places.

A straightforward, robust pattern:

  • Give inputs a PHP-friendly name like authorName[] so submitted values arrive as an array.
  • Create the row and cells with DOM calls, then insert it directly after the reference row: ref.parentNode.insertBefore(newRow, ref.nextSibling).
  • Use event delegation on the table to handle removes (no per-button handlers needed), or attach a remove handler that finds and deletes the enclosing tr.

Example (drop into a script block):

function addAuthorRow() {
  var ref = document.getElementById('my_row');
  var tr = document.createElement('tr');

  var td1 = document.createElement('td'); td1.textContent = 'Author Name:'; tr.appendChild(td1);

  var td2 = document.createElement('td');
  var input = document.createElement('input'); input.type = 'text'; input.name = 'authorName[]'; input.size = 60;
  td2.appendChild(input); tr.appendChild(td2);

  var td3 = document.createElement('td');
  var btn = document.createElement('button'); btn.type = 'button'; btn.className = 'remove-author'; btn.textContent = 'Remove';
  td3.appendChild(btn); tr.appendChild(td3);

  ref.parentNode.insertBefore(tr, ref.nextSibling);
}

var tbl = document.getElementById('tblView');
tbl.addEventListener('click', function(e){
  if (e.target && e.target.classList.contains('remove-author')) {
    var tr = e.target.closest('tr') || (function(n){ while(n && n.nodeName!=='TR') n=n.parentNode; return n; })(e.target);
    tr.parentNode.removeChild(tr);
  }
});

Extra notes: avoid reusing the same id for multiple inputs; prefer name="authorName[]". If the app needs to delete already-saved author rows on the server as soon as the user clicks Remove, send an AJAX request (and on success remove the DOM row). Sanitize and validate all submitted author values on the server side before saving.

Recommended Answers

All 3 Replies

Member Avatar for buddylee17

Making the text box and button appear can be done with basic JavaScript. However, making calls to the server to delete records without a page refresh will require AJAX.

Member Avatar for tanha

yes.
you are right, but I made a draft, it is not adding the row after the author, and istead it append new rows at the end of the table.

also I want to know, any difference between creating this by JAVA SCRIPT or AJAX?

<html>
<head>
<title>By AJAX</title>

<script type="text/javascript">
var my_row = null;

function addElement()
{


var row = document.createElement("TR");
			
			var tbl = document.getElementById("tblView");
		
			row.setAttribute("id","tr12");
			
			var td1 = document.createElement("TD");
			td1.innerHTML = "Author Name:";
			
			var td2 = document.createElement("TD");
			td2.innerHTML = "<input name='authorName' type='text' id='authorName' size='60'>";
			
			var td3 = document.createElement("TD");
			td3.innerHTML = "<input type='button' name='cmdDelete' value='Remove' />";
			
			row.appendChild(td1);
			row.appendChild(td2);
			row.appendChild(td3);
			
			//tbl.appendChild(row);
			
			
			my_row = document.getElementById("my_row");
			document.body.insertBefore(tbl.appendChild(row), my_row);
}

</script>
</head>

<body>
<form name="form1" method="post" action="">
  <table width="50%" border="0" cellpadding="3" id="tblView">
    <tr>
      <td>Book Name: </td>
      <td>
        <input name="txtBookName" type="text" id="txtBookName" size="60">
      </td>
    </tr>
    <tr>
      <td>Book Title: </td>
      <td>
        <input name="txtBookTitle" type="text" id="txtBookTitle" size="80">
      </td>
    </tr>
    <tr id="my_row">
      <td>Author Name: </td>
      <td>
        <input name="authorName" type="text" id="authorName" size="60">
        <input name="cmdAddMore" type="button" id="cmdAddMore" value="More Author" onClick="addElement()" />
      </td>
    </tr>
    <tr>
      <td>Book Subject </td>
      <td>
        <select name="selectSubject">
          <option value="Programming">Programming</option>
          <option value="Database">Database</option>
          <option value="Web-Design">Web-Design</option>
          <option value="Math">Math</option>
          <option value="Business">Business</option>
          <option value="Management">Management</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Book Shelf: </td>
      <td>
        <input name="txtBookShelf" type="text" id="txtBookShelf">
      </td>
    </tr>
    <tr>
      <td>
        <input name="cmdSaveBook" type="submit" id="cmdSaveBook" value="Save Book">
      </td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>

also the I could not figure out the remove function ?

Member Avatar for buddylee17

Kind of, AJAX is basically a buzz word used to describe a connection between the server and the client using an xmlhttp request. Somewhat similar to how you have to establish a connection between the server and the database. Here is a basic tutorial that goes over a basic PHP,AJAX, and MySQL application.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.