Jump to content

dynamic textfields using ajax


zohab

Recommended Posts

Hi everybody

 

I have one problem , i have one textfield and one link besides it (MORE).

When user click on MORE, it need to have one more textfield below it

And it need to be unlimited.user click on more it need create more and more textfields.

 

 

I need to implement this using ajax or javascript.

I am not getting how to implement this?(any script to solve above problem)

any help?

 

regards

zohab.

 

 

 

Link to comment
https://forums.phpfreaks.com/topic/45420-dynamic-textfields-using-ajax/
Share on other sites

  • 2 weeks later...

Hi Johab

i am giving a simple example of DHML which would be solve your problem

 

<html>
   <head>
      <script>
      var divCounter = 0;

      function addDiv()
      {
         divCounter ++;
         var divId     = document.getElementById('fieldList');
         var newDivId  = 'fieldDiv_' + divCounter;

         var newDiv    = document.createElement('div');

         newDiv.setAttribute('id', newDivId);

         var fieldName = "fieldName_" + divCounter ;
         var fieldId   = "fieldId_"   + divCounter ;

         var contents = "<input type='text' name='" +fieldName+ "' id='" +fieldId+ "'>";
         contents += "  <input type='button' name='del' value='Delete' onclick='delDiv(\""+newDivId+"\");'>";
         contents += "<br>";

         newDiv.innerHTML = contents;
         divId.appendChild(newDiv);
         newDiv.style.display = "block";
      }

      function delDiv(deldiv)
      {
         var delDivId  = document.getElementById(deldiv);
         delDivId.parentNode.removeChild(delDivId);
      }

      </script>
   </head>
   <body>
      <div id="fieldList">

      </div>
      <input type="button" name="Add One" value="Add One" onclick="addDiv();">
   </body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.