Can't apply CSS to form input through Ajax

Question

Okai, so I have this Ajax form that returns the data successfully and echoes it into #register_msg.

However I also wish to style the input forms, this is my Ajax code, followed by my form. For some reason it doesn't style the form. How come?

if(html.indexOf("Verification mail sent") > -1){
    $("#register-wrap").html(html);
}
// FILL OUT FORMS
else if(html.indexOf("You need to fill out all forms.") > -1){
    $("#register_msg").html(html);
    $("#reg_fullname").css("-webkit-box-shadow: 0px 0px 14px 1px #FF0000; -moz-box-shadow: 0px 0px 14px 1px #FF0000; box-shadow: 0px 0px 14px 1px #FF0000;");
    $("#reg_email").css("-webkit-box-shadow: 0px 0px 14px 1px #FF0000; -moz-box-shadow: 0px 0px 14px 1px #FF0000; box-shadow: 0px 0px 14px 1px #FF0000;");
    $("#reg_password1").css("-webkit-box-shadow: 0px 0px 14px 1px #FF0000; -moz-box-shadow: 0px 0px 14px 1px #FF0000; box-shadow: 0px 0px 14px 1px #FF0000;");
    $("#reg_password2").css("-webkit-box-shadow: 0px 0px 14px 1px #FF0000; -moz-box-shadow: 0px 0px 14px 1px #FF0000; box-shadow: 0px 0px 14px 1px #FF0000;");
    $("#reg_register").val('<?php echo $database_reg_f_2; ?>');
}

HTML Form

<h1>Register</h1><br>
<div id="register_msg"></div>
<form method="POST"><br>
    <input type="text" name="fullname" id="reg_fullname" /><br>
    Email<br>
    <input type="text" name="email" id="reg_email" /><br>
    Password<br>
    <input type="password" name="password1" id="reg_password1" /><br>
    Repeat Password<br>
    <input type="password" name="password2" id="reg_password2" /><br>
    <input type="submit" name="register" value="register" id="reg_register" />
</form>

No, and the html gets correctly changed by $("#register_msg").html(html); — Gjert
– Gjert, Commented Jan 29, 2016 at 23:06
There is no AJAX in the code you are showing. Are you aware you are repeating the same CSS settings 4 times. Imagine you want to change something, you will have to adjust all 4 lines. Find information on CSS classes. Define a class for your input fields and specify the class properties only once, preferably in a .css file. It will make your life easier. — RST
– RST, Commented Jan 29, 2016 at 23:15

zero point · Accepted Answer · 2016-01-29 23:09:54Z

4

The issue is your css command in jQuery. The correct way is like this:

  $("#reg_fullname").css({
      "-webkit-box-shadow": "0px 0px 14px 1px #FF0000",
      "-moz-box-shadow": "0px 0px 14px 1px #FF0000",
      "box-shadow": "0px 0px 14px 1px #FF0000"
  });

Check out the working example CODEPEN

answered Jan 29, 2016 at 23:09

zero point

1,3083 gold badges10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zero point Over a year ago

Did you do it for all of CSS command? Definitely, this is one issue in your code.

Gjert Over a year ago

Okai, this is weird.. it shows up in the inspection of the element. However, it's not displayed on the page. How come? Checked in Firefox and Ajax didn't work at all...

RST · Accepted Answer · 2016-01-30 10:35:08Z

To keep things managable and clean you should separate HTML, CSS and script as much as possible. Another thing to keep in mind is, stick to the DRY (Don't Repeat Yourself) principle when putting any code together.

A better way of dealing with your code is

Script

if(html.indexOf("Verification mail sent") > -1){
    $("#register-wrap").html(html);
}
// FILL OUT FORMS
else if(html.indexOf("You need to fill out all forms.") > -1){
    $("#register_msg").html(html);
    $("#reg_register").val('<?php echo $database_reg_f_2; ?>');
}

CSS (either in separate file or <style></style> tags)

.myclass {
    -webkit-box-shadow: 0px 0px 14px 1px #FF0000;
    -moz-box-shadow: 0px 0px 14px 1px #FF0000;
    box-shadow: 0px 0px 14px 1px #FF0000;
}

HTML

<h1>Register</h1><br>
<div id="register_msg"></div>
<form method="POST"><br>
    <input type="text" name="fullname" id="reg_fullname" class="myclass" /><br>
    Email<br>
    <input type="text" name="email" id="reg_email" class="myclass" /><br>
    Password<br>
    <input type="password" name="password1" id="reg_password1" class="myclass" /><br>
    Repeat Password<br>
    <input type="password" name="password2" id="reg_password2" class="myclass" /><br>
    <input type="submit" name="register" value="register" id="reg_register" class="myclass" />
</form>

Collectives™ on Stack Overflow

Can't apply CSS to form input through Ajax

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related