0

I am creating a form that allows the user to supply additional addresses they are located at. I have a drop down that asks "How many additional locations do you have?" based on the number they select I clone the fields "Address, City, State, Zip" and place them directly underneath of each other inside the same form.

What I described above is working but now I am attempting to retrieve the data from these additional fields I added. When the user clicks the submit button the form submits to the same page where I have PHP listening to see if the form has been submitted or not. If it has been submitted I echo the values of the form to the screen.

Now here is the problem. If I leave the dropbox alone so that it is at the default value of "1" fill out the form and click submit I see what I entered. But if I select any other value from the drop down and submit the information from all of the forms I only see the information from the last form and not all of them. Why is this? I have included my code below.

Here is the form :

<form id="blah" method="post">
    <div class="Page" id="AdditionalLocations">
        <fieldset name="first" class="additional">
            <legend>Additional Locations</legend>
            <p><label for="Address">Address</label> <input name="Address" type="text" id="Address" /><br /></p>
            <p><label for="City">City</label> <input type="text" name="City" id="City" /></p>
            <p>
                <label for="State">State</label>
                <select id="State" name="State">
                    <option selected="selected">Select your state...</option>
                    <?php foreach($states as $key=>$value) { ?>  
                    <option value="<?php echo $key; ?>"><?php echo $value; ?></option>  
                    <?php } ?>
                </select>
            </p>
            <p><label for="Zip">Zip Code</label><input type="text" name="Zip" maxlength="6" /></p>
            <p><label for="Country">Country</label><select id="Country" name="Country">
                <option value="US" selected="selected">United States</option>
                <option value="CA">Canada</option>
            </select></p>

            <input type="submit" value="SUBMIT FORM" />
        </fieldset>
    </div>
</form>

This is how the fields are created based on the dropdown

var cloneIndex = 0,
    cloneObj = $('.additional').eq(0);

$(document).on('change', "#NumberOfLocations", function() {
    if ( $(this).val() !== "" ) {
        for( var x = 2; x < $(this).val(); x++ ) {
            $('#AdditionalLocations').append( cloneObj.clone( true ).attr(''   ,'data-index', ++cloneIndex) )  
        }
    }
});

This is how I echo the results of the form. It works if I don't create new additional fields based on the drop down.

<?php
if($_SERVER['REQUEST_METHOD'] == "POST") {
    var_dump($_POST);
    foreach( $_POST as $field ) {
        if( is_array( $field ) ) {
            foreach( $field as $field2 ) {
                echo $field2;
            }
        } else {
            echo $field2;
        }
    }
}
?>

If I select 2 as the value in the number of locations field this is the html output I get:

<form id="blah" method="post">
    <div class="Page" id="AdditionalLocations">
        <fieldset name="first" class="additional"></fieldset>
        <fieldset name="first" class="additional" data-index="1"></fieldset>
    </div>
</form>

Inside the fieldset all of the fields are identical. Why do I not get both fieldsets echoed when I click submit?

UPDATE: So I changed the names of the second field set by adding a "1" at the end inside the chrome inspector and submitted now I see all of the values I need. So I guess every field in the form has to have a unique name.

3
  • In the bottom of the post you said 'this is the html output I get' but I do not see the output?
    – VIDesignz
    Feb 8, 2014 at 20:06
  • Also, I am having trouble finding script that is creating the values into an array...
    – VIDesignz
    Feb 8, 2014 at 20:07
  • Correct! Either they need unique names or the values should be built into an array before posting and then extracted upon post
    – VIDesignz
    Feb 8, 2014 at 20:08

1 Answer 1

2

your field names should have array notation at the end of their names:

<input type="text" name="City[]" id="City" />
<select id="State" name="State[]">

when php gets these values they will then be in array so you will need to loop over each of the arrays to get the info

for($i=0; $i<count($_POST['City']); $i++){
   $city = $_POST['City'][$i];
   $state = $_POST['State'][$i];
   ...
}

There is probably a better way of getting the info out of the arrays, but this is quick and dirty

3
  • After adding the array brackets when I use the drop down that creates the duplicate AdditionalLocations fields I get an error Uncaught InvalidCharacterError: The string contains invalid characters. called from the jQuery script Feb 8, 2014 at 20:13
  • what line is that being caused by? Feb 8, 2014 at 20:18
  • Never mind I added a character by accident in my clone function thanks for the help! Feb 8, 2014 at 20:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.