Jump to content

Dynamic for additions


CurtHolland

Recommended Posts

  Hello,  I  can use the following to dynamically add fields one at a time.  I need a way for the "onclick" to provide multiple dynamic fields.    e.g.(first,middle,last) 

 

 

if(isset($_POST['submit'])){
        $children = "";
        $more = TRUE;
        $i = 1;
        
        while($more){
            if((isset($_POST['child_'.$i])) && ($_POST['child_'.$i] != "")){
                $children .= $_POST['child_'.$i];
                $children .= "</br>";
            }else{
                $more = FALSE;
            }
            $i++;

        }
        mysqli_query($con, "INSERT INTO content ( `children`) VALUES ( '$children')");
    }
?>
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/fields.js"></script>
<title>Add/Remove Form Fields</title>
</head>
<body>
    <div id="container">
        <form action="index.php" method="post">
        Children
        <div id="children">
            <input type="text" name="child_1" placeholder="Child's Name" style="width:250px; margin-left:7px; margin-right:4px;">
            <input type="text" name="title_1" placeholder="Title" style="width:250px; margin-left:7px; margin-right:4px;">
            <input type="button" id="add_field()" onClick="addField()" value="+">
        </div>
            <input type="submit" name="submit" value="Submit">
        </form>
    </div>
</body>
</html>

 

SCRIPT

 

var i = 1;

function addField(){
    i++;
    var div = document.createElement('div');
    div.innerHTML = "<input type='text' name='child_"+i+"' style='width:250px; margin-left:7px; margin-right:7px;'><input type='button' id='add_field()' onClick='addField()' value='+'><input type='button' onClick='removeField(this)' value='-'>";

    document.getElementById('children').appendChild(div);

}

function removeField(div){
    document.getElementById('children').removeChild(div.parentNode);
    i--;
}

Link to comment
Share on other sites

i recommend using a 'template' method, where the first instance of your form field(s) is(are) inside of a <div></div> container and become a source template that you use when appending the dynamically added form fields. this eliminates the need to duplicate the markup for the form fields in both the html and in the javascript, i.e. DRY (Don't Repeat Yourself) programming.

 

next, you need to use an array name for your form fields. this eliminates the need to maintain a counter in the javascript code and allows you to use php's array functions to loop over the submitted data.

 

see the following example -

<script type="text/javascript">

function addField()
{
    // create an empty div element
    var div1 = document.createElement('div');

    // get the template html and put it into the empty div
    div1.innerHTML = document.getElementById('template').innerHTML + "<input type='button' onClick='removeField(this)' value='-'>";

    // append the new div to the target area on the page
    document.getElementById('add_here').appendChild(div1);
}

function removeField(div){
    document.getElementById('add_here').removeChild(div.parentNode);
}
</script>

<body>

<form method='post' action='formaction.php'>
    Children
    <!-- Template. This first instance of "whatever" will be appended in the add_here div -->
    <div id="template">
        <input type="text" name="child[]" placeholder="Child's Name" style="width:250px; margin-left:7px; margin-right:4px;">
        <input type="text" name="title[]" placeholder="Title" style="width:250px; margin-left:7px; margin-right:4px;">
        <input type="button" onClick="addField()" value="+">
    </div>
    <!-- container to hold the dynamically added instances of "whatever" -->
    <div id="add_here">
    </div>
<input type='submit'>
</form>
Edited by mac_gyver
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.