Jump to content


Dynamically creating forms.

  • Please log in to reply
4 replies to this topic

#1 genu

  • Members
  • PipPipPip
  • Advanced Member
  • 32 posts

Posted 10 May 2006 - 07:48 PM

How do I make it so that a person can click a button, and form elements are dynamically added to a form. For example, there is a text box, and a button. When they click the button, a new text box is added everytime they click it. I looked everywhere for a javascript example, but wasnt able to find one.

#2 Caesar

  • Members
  • PipPipPip
  • Advanced Member
  • 1,025 posts

Posted 10 May 2006 - 07:52 PM

You want to look into some Ajax stuff...but something comparable can be done using simple Javascript...won't be as smooth or appealing, though.
PHP Ninja

#3 sumityadav

  • New Members
  • Pip
  • Newbie
  • 7 posts

Posted 11 May 2006 - 06:05 AM

YOu need some AJAX or search for DOM. I used somewhere REFERING MY PAGE to someone. I dynamically added two fields and the <div> to search for the location. Google for equivalent DOM example. This may help you.

#4 Zubaz

  • Members
  • PipPip
  • Member
  • 12 posts

Posted 11 May 2006 - 06:26 AM

This might be a little more than you wanted, but this is my favorite related Javascript function and should teach you a little bit about what you're trying to do if you try it out:

<div id="testDiv">I'm learning about innerHTML!</div>
<script language="Javascript">
 function $() {
    var elements = new Array();
    for (var i = 0; i < arguments.length; i++) {
        var element = arguments[i];
        if (typeof element == 'string')
            element = document.getElementById(element);
        if (arguments.length == 1)
            return element;
    return elements;

$('testDiv').innerHTML = 'I <i>learned</i> about innerHTML. Sucka.';

You don't need to use the $() function there, but it makes things a lot easier. Typing getElementById gets real old.

What these guys are talking about with ajax is a little more complicated, but by doing an example script like below, you can learn stuff:

<script language="Javascript">
function ajaxGetCallback(url, post) {

   var XMLHttpRequestObject = false;

     if (window.XMLHttpRequest) {
         XMLHttpRequestObject = new XMLHttpRequest();
     } else if (window.ActiveXObject) {
         XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
     if(XMLHttpRequestObject) {
         XMLHttpRequestObject.open("POST", url, true);
         XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

         XMLHttpRequestObject.onreadystatechange = function ()
             if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
                 var response = XMLHttpRequestObject.responseText;
                 $('testDiv').innerHTML = response;
                 delete XMLHttpRequestObject;
                 XMLHttpRequestObject = null;

     } else {
         alert('no request made');

ajaxGetCallback('path.to.my/phpfile.php', 'vars=iwant&tosend=toit')

Notice that the post vars are just like you'd append to a url after a ?

if your postvars variable is an empty string, that'll work too.

Using that in conjunction with PHP doing MySQL queries means you can do pretty much whatever you want without changing the page.

Sorry if that was way more than you wanted - or wrong :)

#5 .josh

  • Staff Alumni
  • .josh
  • 14,871 posts

Posted 11 May 2006 - 08:05 AM

well, it's POSSIBLE to do it strictly PHP, using post or get vars or even with a session. here's an example using a session:

    if ($_SESSION['num']) { $_SESSION['num']++; }
    else { $_SESSION['num'] = 1; }

      $form = "<form method='post' action = '$PHP_SELF'>";     
    for ($x = 0; $x < $_SESSION['num']; $x++) {
        $form.= "<input type = 'text' name='blah[]'> text field #".($x+1)."<br>";
    $form.="<input type = 'submit' value='add text field'>";
    echo $form;

and here's pretty much the same thing, except with using POST:
    if ($_POST['num']) { $_POST['num']++; }
    else { $_POST['num'] = 1; }

    $form = "<form method='post' action = '$PHP_SELF'>";     
    for ($x = 0; $x < $_POST['num']; $x++) {
        $form.= "<input type = 'text' name='blah[]'> text field #".($x+1)."<br>";
    $form.="<input type = 'hidden' name='num' value='".$_POST['num']."'>";
    $form.="<input type = 'submit' value='add text field'>";
    echo $form;

the reason why something like ajax is better, is because as you can see, the page has to completely reload in order for it to work. ajax allows you to submit information to the server behind the scenes, and update only a portion of the page, not the whole thing, so it's faster.
Did I help you? Feeling generous? Buy me lunch! 
Please, take the time and do some research and find out how much it would have cost you to get your help from a decent paid-for source. A "roll-of-the-dice" freelancer will charge you $5-$15/hr. A decent entry level freelancer will charge you around $15-30/hr. A professional will charge you anywhere from $50-$100/hr. An agency will charge anywhere from $100-$250/hr. Think about all this when soliciting for help here. Think about how much money you are making from the work you are asking for help on. No, we do not expect you to pay for the help given here, but donating a few bucks is a fraction of the cost of what you would have paid, shows your appreciation, helps motivate people to keep offering help without the pricetag, and helps make this a higher quality free-help community :)

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users