Adding more inputs

Dat · October 5, 2009

Im trying to dynamically add more fields into my form.

HTML:

<table id="add_episodes" class="editor" border="0" cellspacing="0" cellpadding="5">
            <tr>
                <td><input size="3" type="text" name="number" /></td>
                <td><input type="text" name="title" /></td>
                <td><input type="button" value="Add another text input" onClick="addInput('add_episodes', 'number');addInput('add_episodes', 'title');"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>
                    <input name="entry_id" type="hidden" value="<?php echo $id; ?>">
                    <input class="input submit" type="submit" name="submit" value="Add <?php echo $type; ?>">
                </td>
            </tr>
        </table>

Javascript

function addInput(divName, type)
{
    var counter = 1;
    var limit = 50;
    if (counter == limit)  {
        alert("You have reached the limit of adding " + counter + " inputs");
    }
    else {
        var tr.document.createElement('<tr>');
        if(type == 'number')
        {
        var newdiv = document.createElement(element);
        newdiv.innerHTML = '<input size="3" type="text" name="number" />';
        document.getElementById(add_input).appendChild(newdiv);
        }
        if(type == 'title')
        {
        var newdiv = document.createElement(element);
        newdiv.innerHTML = '<input type="text" name="title[]" />';
        document.getElementById(divName).appendChild(newdiv);
        }
        counter++;
        document.getElementById(add_input).appendChild(tr);
    }
}

This is one of my first times working with javascript, usually i work with PHP.

Im trying to add more input elements of

<tr>
<td><input size="3" type="text" name="number" /></td>
<td><input type="text" name="title" /></td>
</tr>

And don't reply that i should make the names into arrays for me to submit more stuff, I'll change that later. But for simplicity and a straightforward problem. I can't get it add more form elements in the correct place or nothing happens at all.

Gayner · October 5, 2009

LOL dat from lookatdat.net?

This is nick LOL

KevinM1 · October 5, 2009

You're kind of shooting yourself in the foot with the way you're trying to go about it. For one, your function has some issues (a counter defined within a function won't persist, add_input is not a variable, etc), and you're trying to do too much inside of it.

Let's make it simple:

<html>
   <head>
      <title>Adding a form input</title>
   </head>

   <body>

      <table id="add_episodes" class="editor" border="0" cellspacing="0" cellpadding="5">
         <tr>
            <td><input size="3" type="text" name="number" /></td>
            <td><input type="text" name="title" /></td>
            <td><input type="button" value="Add another text input"></td>
         </tr>
         <tr>
            <td></td>
            <td></td>
            <td>
               <input name="entry_id" type="hidden" value="<?php echo $id; ?>">
               <input class="input submit" type="submit" id="addInput" name="submit" value="Add <?php echo $type; ?>">
            </td>
         </tr>
      </table>

   </body>

   <script type="text/javascript">
      var addInput = document.getElementById('addInput');
      var count = 1;
      var limit = 50;

      addInput.onclick = function(){
         if (count == limit){
            alert("You have reached the limit of " + limit + " inputs");
            return false;
         }
         else{
            addToForm('add_episodes', 'number');
            addToForm('add_episodes', 'title');
            ++count;
            return true;
         }
      }

      function addToForm(divName, type){
         // function body goes here
      }
   </script>
</html>

I left the addToForm function body blank because you'll need to rework it a bit to get it to work (you need to figure out exactly what element to append to, as I can't see an add_input element anywhere). This should give you the basic idea, though.

Notice that I've added an id of "addInput" to the submit button, and that there's no onclick call within the element itself. I prefer an unobtrusive style of coding, and I find it makes it easier to read and maintain code when it's written like this. YMMV.

Sign In

Adding more inputs

Recommended Posts

Dat

Link to comment

Share on other sites

Gayner

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information