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
  • 209 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by buddylee17
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.