No replies
Mario_Party's picture
Last seen: 10 years 6 weeks ago
Timezone: GMT+1
Joined: 2011-08-17
Posts: 1
Points: 2

Hi everyone, I have a form which uses AJAX to check for validation on certain things, however I have no idea how to get the form to diplay properly. At the moment everything is fine, until AJAX (or even JavaScript) changes the page and displays a message to the user. At this point the whole thing breaks, and the form goes all crooked, with the span dropping below the field

  <form method="post" action="" class="form form_register">
  <legend>Personal Details</legend>
  <div><label for="first_name">First Name:</label><input type="text" name="first_name" id="first_name" value="<?php echo isset($_POST["first_name"]) ? $_POST["first_name"] : ""; ?>" /><span id="ajax_first_name"></span></div>
  <div><label for="last_name">Last Name:</label><input type="text" name="last_name" id="last_name" value="<?php echo isset($_POST["last_name"]) ? $_POST["last_name"] : ""; ?>" /><span id="ajax_last_name"></span></div>
  <div><label for="email1">E-mail address:</label><input type="text" name="email1" id="email1" value="<?php echo isset($_POST["email1"]) ? $_POST["email1"] : ""; ?>" /><span id="ajax_email1"></span></div>
  <div><label for="email2">Repeat e-mail address:</label><input type="text" name="email2" id="email2" value="<?php echo isset($_POST["email2"]) ? $_POST["email2"] : ""; ?>" /><span id="ajax_email2"></span></div>
  <legend>Game Details</legend>
  <div><label for="user_name">User Name:</label><input type="text" name="user_name" id="user_name" value="<?php echo isset($_POST["user_name"]) ? $_POST["user_name"] : ""; ?>" /><span id="ajax_user_name"></span></div>
  <div><label for="password1">Password:</label><input type="password" name="password1" id="password1" onkeyup="passwordStrength(this.value)" /><span id="ajax_password1"></span></div>
  <div><label for="password2">Repeat password:</label><input type="password" name="password2" id="password2" /><span id="ajax_password2"></span></div>
  <div class="submit"><input type="submit" name="register" value="Register" /></div>

Here is the CSS

/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,  
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td
  border: 0pt none;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  padding: 0pt;
  vertical-align: baseline;
  /* Centre all elements */  
  text-align: center;
  margin-left: auto;
  margin-right: auto;  
/* Registration Form */
  width: 600px;
form.form_register span
  width: 240px;
  float: right; 
form.form_register label
  width: 150px;
  float: left;
  text-align: right;
  margin-right: 0.5em;
  display: block;
form.form_register input
  color: #000000;
  background: #EEEE00;
  width: 200px;
  float: left;
form.form_register fieldset
  width: 600px;
  background: #584217;
  border: 1px solid #EEEE00;
  padding: 0px 0px 5px 0px;
form.form_register legend
  color: #000000;
  background: #EEEE00;
  border: 1px solid #EEEE00;
  padding: 2px 6px;
  text-align: left;
  margin: 0px 0px 5px 3em;
  width: 15em;

I have attached images displaying the problem.

If anyone can help me fix this by making the text that appears through JavaScript/AJAX not mess up like this and vertically-align to the middle with the label and the input box I would be grateful.

If you require more details please let me know.

Thanks in advance!

Normal Form.png10.18 KB
Problem Form 2.png10.48 KB
Problem Form.png12.19 KB