Form placement in a div [closed]

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 8 years ago.

I tried to create a form that covers almost all of the content of my page. Since the input field is scattered, it verifies but still proceeds to the next page afterwards. I don't know what the problem is; it works fine in HTML and PHP formats when I try it offline. The problem happens when I upload it to the server.

The script:

<form method="post" action="step.php" id="form1">
<div id="content">
<center>
<br><br><br>
      <input  id="sig" name="sig" type="text" class="validate[sign] text-input" style="margin-left:-180px;visibility:hidden;height:0px;"/>


    <div id="signatureparent">
    <div id="signature"></div>
    </div>
</div>

</center>

<!====================================================================================>




<div id="content">
<div id="wrapper">
<div id="form-div">
<center><strong>Please enter the information for the person who will be the primary contact for our account set up team. If left blank we will use the information in the billing section.</strong></center>
<div id="wrapper3">
<div id="form-div">

<center>
<table cellpadding='0' cellspacing='27'>
<tr>
<td>
<!====================================================================================>
<div style="display:none">
<label for="name"><strong>First Name<font color=red size=3> *</font></strong></label>
      <p class="name">
         <input name="name" readonly="readonly" type="text" class="validate[custom[name]] text-input" id="Name" value="<?php echo $_POST["name"]; ?>" />

      </p>
<label for="last" style="margin-left:45px;"><strong>Last Name<font color=red size=3> *</font></strong></label>
      <p class="last">
         <input name="last" style="margin-left:45px;" readonly="readonly" type="text" class="validate[custom[last]] text-input" id="last" value="<?php echo $_POST["last"]; ?>" />

      </p>
</div>

<!====================================================================================>
<label for="cname"><strong>First Name<font color=red size=3> *</font></strong></label>
      <p class="cname">
         <input name="cname" type="text" class="validate[custom[cname]] text-input" id="cname" value="" />
        </p>

<label for="cemail"><strong>E-mail<font color=red size=3> *</font></strong></label>
      <p class="cemail">
        <input name="cemail" type="text" class="validate[custom[cemail]] text-input" id="cemail" value=""  />

      </p>

<!====================================================================================>
</td><td>

<label for="clast" style="margin-left:45px;"><strong>Last Name<font color=red size=3> *</font></strong></label>
      <p class="clast">
         <input name="clast" style="margin-left:45px;"  type="text" class="validate[custom[clast]] text-input" id="clast" value="" />

      </p>

<label for="cphone" style="margin-left:45px;"><strong>Phone<font color=red size=3> *</font></strong></label>
      <p class="cphone">
        <input type="text" class="validate[custom[mob]] text-input" name="cphone" id="cphone"  style="margin-left:45px;width:100px" /> 

 <b>ext</b><input style="width:25px; margin-left:5px;" type="text" class="validate[custom[ext]] text-input" name="cext1" id="cext1" />
        </p>

</td><td>


<!====================================================================================>   
<label for="ccom" style="margin-left:45px;"><strong>Company<font color=red size=3> *</font></strong></label>
      <p class="com">
        <input type="text" class="validate[custom[ccom]] text-input"name="ccom" id="ccom" onblur="this.value = this.value.toTitleCase();" style="margin-left:45px;" />
      </p>

<label for="cmob" style="margin-left:45px;"><strong>Mobile#</strong></label>
      <p class="mob">
        <input type="text" class="validate[custom[mob]] text-input" name="cmob" id="cmob" style="margin-left:45px;width:100px;" /> 


<b>ext</b><input style="width:25px; margin-left:5px;" type="text" class="validate[custom[ext]] text-input" name="cext2" id="cext2" />
        </p>

</div></div></div></div></div>
</center>
</td></tr></table>

<div>

<!====================================================================================>
<br>
<div id="wrapper">
<div id="form-div">

<table><tr><td><div style="margin-left:210px;" >
<p><font color=red size=2%><b>Clicking this button means that you accept the terms and conditions of our service  </b></font></td><td>
<div id="accept"><button style="margin-left:10px;border: 0; background: transparent" type="submit"><img src=img/acept.png height=30 /></button>
 </div>
</tr></td></table>
</div>
</div>  
<br><br><br>

</form>

It should first verify the contents, then proceed.

Answer 1

It appears that your form does not run any code on submitting it. You'd want your form to have:

<form method="post" action="step.php" id="form1" onsubmit="return validate()">

This is assuming that your validation code is as a JavaScript function.