Jump to content

Dynamically creating forms.


genu

Recommended Posts

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.
Link to comment
Share on other sites

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 :)
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.