Submit button does not work

[nadiam]

Hey guys so first off this is gonna be kinda messy because the form is loooooong

i have an add_contacts page:

see "Spouse" and "Child", they have their own form when "yes" is chosen. the strange thing that is going is that if main form + spouse form OR main form + child form OR main form + spouse form + child form are filled in the submit button does work and insert the data into the database. However if ONLY the main form is filled in and "Spouse" and "Child" are "No" the submit button does not work = nothing happens after click.

i will try and clean up the forms, i've removed some parts that are not necessary so it doesnt look soooo asdfghjk(not sure if i should delete the classes and ids):

<div class="form-wrapper">
    <form method="post" action="add_contact.php">
            <fieldset class="primeC">  
                <h3>Add New Contact</h3><br>

                //MAIN FORM
                <div class="primary-label"><label>*</label><label>Salutation </label></div>
                <div class="salute-options"><label>:</label>
                    <select name="salute" id="salutes" required>
                        <option value="" disabled selected>Salutation</option>
                        <option value="Datin">Datin</option>
                        <option value="Datin Sri">Datin Sri</option>
                    </select>
                </div>
                <div class="other-salutes">

                </div><br>
                <div><label>If more than one salutation choose "Other"</label></div><br>
                <div class="primary-label"><label>*</label><label>First Name </label></div>
                <div class="input-fname"><label>:</label>
                    <input type="text" name="fname" required>
                </div>
                <div class="primary-lname"><label>Middle Name </label></div>
                <div class="input-lname"><label>:</label>
                    <input type="text" name="mname" placeholder="Optional">
                </div><br>
                <div class="primary-label"><label>*</label><label>Last Name </label></div>
                <div class="input-text"><label>:</label>
                    <input type="text" name="lname" required>
                </div>
                <div class="primary-lname"><label>*</label><label>Date of Birth </label></div>
                <div class="input-lname"><label>:</label>
                    <input type="date" name="dob" required>
                </div><br>
                <div class="primary-label"><label>Personal No. </label></div>
                <div class="input-mobile"><label>:</label>
                    <input type="text" name="personalno">
                </div>
                <div class="primary-lname"><label>House No. </label></div>
                <div class="input-lname"><label>:</label>
                    <input type="text" name="houseno">
                </div><br>
                <div class="primary-house"><label>Email Address (Personal) </label></div>
                <div class="input-house"><label>:</label>
                    <input type="text" name="personalemail">
                </div><br><br>
                <div class="primary-house"><label>*</label><label>House Address </label></div>
                <div class="input-house"><label>:</label>
                    <input type="text" name="houseadd" required>
                </div><br>
                <div class="primary-house"><label>*</label><label>Office Address </label></div>
                <div class="input-house"><label>:</label>
                    <input type="text" name="officeadd" required>
                </div><br>
                <div class="primary-label"><label>*</label><label>PA Name </label></div>
                <div class="input-fname"><label>:</label>
                    <input type="text" name="paname" required>
                </div>
                <div class="primary-lname"><label>PA No. </label></div>
                <div class="input-lname"><label>:</label>
                    <input type="text" name="pano" >
                </div><br>
                <div class="primary-label"><label style="color:red">*</label><label>Office No. </label></div>
                <div class="input-text"><label>:</label>
                    <input type="text" name="officeno" required>
                </div>
                <div class="primary-lname"><label>*</label><label>Fax No. </label></div>
                <div class="input-lname"><label>:</label>
                    <input type="text" name="faxno" required>
                </div><br>
                <div class="primary-label"><label>Email Address (PA)</label></div>
                <div class="input-text"><label>:</label>
                    <input type="text" name="emailpa" >
                </div>
                <div class="primary-lname"><label>*</label><label>Email Address (Work)</label></div>
                <div class="input-lname"><label>:</label>
                    <input type="text" name="emailwork" required>
                </div><br><br>
                <div class="dependent-label"><label>Spouse ?</label></div>
                <div class="dependent-radio">
                     <input type="radio" name="spouse" id="spouse-yes" value="Yes">Yes
                     <input type="radio" value="No" name="spouse" id="spouse-no">No</div>
                     <label>If divorced / widowed, No</label><br><br>

                     //SPOUSE FORM
                <div class="add-spouse-wrap" id="add-spouse-wrap">
                    <fieldset class="spouseF">
                        <h4>Spouse</h4>
                        <div class="primary-label"><label>*</label><label>Salutation </label></div>
                        <div class="salute-options"><label>:</label>
                            <select name="spouse-salute" id="ssalutes" required>
                                <option value="" disabled selected>Salutation</option>
                                <option value="Datin">Datin</option>
                                <option value="Datin Sri">Datin Sri</option>
                            </select>
                        </div>
                        <div class="sother-salutes">

                        </div><br>
                        <div><label>If more than one salutation choose Other</label></div><br>  
                        <div class="primary-label"><label>*</label><label>First Name </label></div>
                        <div class="input-fname"><label>:</label>
                            <input type="text" name="sfname" required>
                        </div>
                        <div class="primary-lname"><label>Middle Name </label></div>
                        <div class="input-lname"><label>:</label>
                            <input type="text" name="smname" placeholder="Optional">
                        </div><br>
                        <div class="primary-label"><label>*</label><label>Last Name </label></div>
                        <div class="input-text"><label>:</label>
                            <input type="text" name="slname" required>
                        </div>
                        <div class="primary-lname"><label>*</label><label>Date of Birth </label></div>
                        <div class="input-lname"><label>:</label>
                            <input type="date" name="sdob" required>
                        </div><br>
                        <div class="primary-label"><label>Personal No. </label></div>
                        <div class="input-mobile"><label>:</label>
                            <input type="text" name="spersonalno">
                        </div>
                        <div class="primary-lname"><label>House No. </label></div>
                        <div class="input-lname"><label>:</label>
                            <input type="text" name="shouseno">
                        </div><br>
                        <div class="primary-house"><label>Email Address (Personal)</label></div>
                        <div class="input-house"><label>:</label>
                            <input type="text" name="spersonalemail">
                        </div><br><br>
                        <div class="primary-house"><label>*</label><label>House Address </label></div>
                        <div class="input-text"><label>:</label>
                            <input type="text" name="shouseadd" required>
                        </div><br><br>
                        <div class="primary-house"><label>*</label><label>Office Address </label></div>
                        <div class="input-house"><label>:</label>
                            <input type="text" name="sofficeadd" required>
                        </div><br>
                        <div class="primary-label"><label>*</label><label>PA Name </label></div>
                        <div class="input-fname"><label>:</label>
                            <input type="text" name="spaname" required>
                        </div>
                        <div class="primary-lname"><label>PA No. </label></div>
                        <div class="input-lname"><label>:</label>
                            <input type="text" name="spano">
                        </div><br>
                        <div class="primary-label"><label>*</label><label>Office No. </label></div>
                        <div class="input-text"><label>:</label>
                            <input type="text" name="sofficeno" required>
                        </div>
                        <div class="primary-lname"><label>*</label><label>Fax No. </label></div>
                        <div class="input-lname"><label>:</label>
                            <input type="text" name="sfaxno">
                        </div><br>
                        <div class="primary-label"><label>Email Address (PA)</label></div>
                        <div class="input-text"><label>:</label>
                            <input type="text" name="semailpa" >
                        </div>
                        <div class="primary-lname"><label>*</label><label>Email Address (Work)</label></div>
                        <div class="input-lname"><label>:</label>
                            <input type="text" name="semailwork" required>
                        </div><br><br>
                    </fieldset>
                </div>

                <br>

                <div class="dependent-label"><label>Children ?</label></div>
                <div class="dependent-radio"><input type="radio" name="child" id="child-yes" value="Yes">Yes
                     <input type="radio" value="No" name="child" id="child-no">No
                </div>
                <br>
            </fieldset>

        <br>

            <div class="add-child-wrap" id="add-child-wrap">

            </div>

            <div style="margin-left:20px"><input type="submit" name="submitC" value="Submit" id="submitc">
            <input type="button" name="cancel" id="cancelc" value="Cancel"></div>

        <br>

    </form>
</div>

/*CHILD FORM*/
<div style="display:none">
<fieldset class="childF">
        <h4>Child</h4>      
        <div class="primary-label"><label>*</label><label for="child_Salutations">Salutation </label></div>
        <div class="salute-options"><label>:</label>
            <select name="child-salute[]" id="child_Salutations">
                <option value="" disabled selected>Salutation</option>
                <option value="Datin">Datin</option>
                <option value="Datin Sri">Datin Sri</option>
            </select>
        </div>
        <div class="cother-salutec">

        </div><br>

        <div><label>If more than one salutation choose Other</label></div><br> 
        <div class="primary-label"><label>*</label><label>First Name </label></div>
        <div class="input-fname"><label>:</label>
            <input type="text" name="cfname[]">
        </div>
        <div class="primary-lname"><label>Middle Name </label></div>
        <div class="input-lname"><label>:</label>
            <input type="text" name="cmname[]" placeholder="Optional">
        </div><br>
        <div class="primary-label"><label>*</label><label>Last Name </label></div>
        <div class="input-fname"><label>:</label>
            <input type="text" name="clname[]">
        </div>
        <div class="primary-lname"><label>*</label><label>Date of Birth </label></div>
        <div class="input-lname"><label>:</label>
            <input type="date" name="cdob[]">
        </div><br>
        <div class="primary-label"><label>Personal No. </label></div>
        <div class="input-mobile"><label>:</label>
            <input type="text" name="cpersonalno[]">
        </div>
        <div class="primary-lname"><label>House No. </label></div>
        <div class="input-lname"><label>:</label>
            <input type="text" name="chouseno[]">
        </div><br>
        <div class="primary-house"><label>Email Address (Personal)</label></div>
        <div class="input-text"><label>:</label>
            <input type="text" name="cpersonalemail[]" >
        </div><br><br><br>
        <div class="primary-house"><label>*</label><label>House Address </label></div>
        <div class="input-text"><label>:</label>
            <input type="text" name="chouseadd[]">
        </div><br><br>
        <div class="primary-house"><label>*</label><label>Office Address </label></div>
        <div class="input-text"><label>:</label>
            <input type="text" name="cofficeadd[]">
        </div><br><br>
        <div class="primary-label"><label>*</label><label>PA Name </label></div>
        <div class="input-fname"><label>:</label>
            <input type="text" name="cpaname[]">
        </div>
        <div class="primary-lname"><label>PA No. </label></div>
        <div class="input-lname"><label>:</label>
            <input type="text" name="cpano[]">
        </div><br>
        <div class="primary-label"><label>*</label><label>Office No. </label></div>
        <div class="input-text"><label>:</label>
            <input type="text" name="cofficeno[]">
        </div>
        <div class="primary-lname"><label>*</label><label>Fax No. </label></div>
        <div class="input-lname"><label>:</label>
            <input type="text" name="cfaxno[]">
        </div><br>
        <div class="primary-label"><label>Email Address (PA)</label></div>
        <div class="input-fname"><label>:</label>
            <input type="text" name="cemailpa[]">
        </div>
        <div class="primary-lname"><label>*</label><label>Email Address (Work)</label></div>
        <div class="input-lname"><label>:</label>
            <input type="text" name="cemailwork[]">
        </div><br><br><br>
    </fieldset>
</div>

</body>
</html>

please help me. and if i need to add more info or clean up the code more in order fo you guys to help me out please let me know. TIA

[pritaeas]

Is there Javascript involved, specifically when you click submit?

[nadiam]

no there isnt.

[pritaeas]

But there is when you click Yes/No for spouse?

My reasoning being that that triggers something that influences your form.

[dany4ev_1]

Hi Nadiam,

First of all I'd like to mention that you should put your child form elements within the form tag as in this case I take you are trying to separate the two forms logic only by separating them in div's it's not gonna work cuz when you are submitting form elements you have to place them inside of a form tag. Then most probably when you will submit this some action (function) will be called on the server. It's up to you to decide how to handle child and parent form logic inside a form tag using javascript. Try displaying the appropriate spouse or child forms when the yes is checked on their respective checkboxes, again this can be acheived using javascript or you can use jquery if you don't like long scripts :) once this is done you can take the values convert them in some DTO (Data Transfer Object) and send them onto the server. Again you can use this technique in ASP.net, PHP etc. It doesn't matter which server language you are using. Hope this solves your issue.

[nadiam]

for the yes/no for spouse and child jquery is used:

 $("#spouse-no").click(function() {
      $("#add-spouse-wrap.desc").show();
      $("#add-spouse-wrap").hide();
}); 
$("#spouse-yes").click(function() {
      var address = $("#houseadd").val();
      $("#add-spouse-wrap.desc").hide();
      $("#add-spouse-wrap").show();
      $("#shouseadd").val(address);
});

$(".how-many").hide();
$("#child-yes").click(function() {
      $(".how-many").show();
      $("#add-child-wrap.desc").hide();
      $("#add-child-wrap").show();
}); 

$("#child-no").click(function() {             
      $("#add-child-wrap").empty();
      $(".how-many").hide();
}); 

$('select[name=numc]').change(function()
{
     var number_of_forms_to_create = $(this).val();
     var table = $('.childF').clone();
     var target = $('div#add-child-wrap');
     for(var i = 0; i < number_of_forms_to_create; i++)
     {
        var clone = table.clone();
        clone.attr({"id":"","style":""});
        clone.prependTo(target);
     }
});

how-many is:

<div class="how-many">    
    <label>How many?</label>&nbsp;&nbsp;&nbsp;
    <select name="numc" id="numc" class="numc">
        <option value="0" disabled selected>How many?</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
</div>

[nadiam]

nvm. i just redid the whole thing coz theres just too much going on there.