Dynamically creating forms.

[genu]

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.

[Caesar]

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.

[sumityadav]

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.

[Zubaz]

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:

[code]
<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;
        elements.push(element);
    }
    return elements;
}

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

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:

[code]
<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;

             }
         }
        
         XMLHttpRequestObject.send(post);
     } else {
         alert('no request made');
     }
}

ajaxGetCallback('path.to.my/phpfile.php', 'vars=iwant&tosend=toit')
</script>
[/code]

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 :)

[.josh]

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:

[code]
<?php
  session_start();
  
    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;
?>
[/code]

and here's pretty much the same thing, except with using POST:
[code]
<?php
    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;
?>
[/code]

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.