jQuery CSS Property

Question

I used the .css() for changing the border color for an element, and every time I perform the action that trigger the jQuery script, the border changes like it supposed to, but changes back after a second.

This is the code:

$("#form1").submit(function() {
  if (!$('#foo').val().length) {
    $("#foo").css('border', '3px solid red');
  }
  $("#foo").css('border', '3px solid red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<div>
  <form id="form1" name="form1" method="post">
    <div class="textInput">
      PO: <input type="text" class="txtBox" name="foo" id="foo"><br /><br />
    </div>
    <input type="submit" name="Submit" value="Submit" />
  </form>
</div>

No additional JS or css file.

Your form submit reloads the page. which brings you back to the initial style.. — Rajshekar Reddy
– Rajshekar Reddy, Commented Jul 6, 2017 at 8:07
So how can I make it stick? Is there a property to add this to to the css file or something? — John Ellis
– John Ellis, Commented Jul 6, 2017 at 8:09
if you want to prevent the form to reload the page for your tests: .submit(function(e) { e.preventDefault(); /* the rest */ }. You can also submit it manually after some operations if you prevented the submit this way — Kaddath
– Kaddath, Commented Jul 6, 2017 at 8:09
@JohnEllis if the page reloads you loose the changes and get back to the state as if you came in the first time.. if you want the changes to stick in there are couple of options.. submit form via AJAX, so there is no page reload.. Else use LocalStorage to save a variable that acts as a flag to say if style needs to stick in or not.. so everytime you load the page you check this variable and act accordingly.. I do not prefer 2nd method.. using AJAX must be elegant.. — Rajshekar Reddy
– Rajshekar Reddy, Commented Jul 6, 2017 at 8:11

Grant Thomas · Accepted Answer · 2017-07-06 08:15:07Z

1

Without knowing but taking the hint this is some form of validation, the suggestion to stop the page being submitted appears to be the correct one - but an adjustment to Ebrahim's answer would be something like this:

$("#form1").submit(function(e) {
  // do your validation
  if (!$('#foo').val().length) {
    // if it doesn't meet the constraints, do your things to highlight it
    $("#foo").css('border', '3px solid red');
    // then halt the submission process for the user to review
    e.preventDefault();
    // jump from control of this method so it doesn't continue
    return;
  }
  // otherwise, do anything else you need and allow the form to submit
});

answered Jul 6, 2017 at 8:15

Grant Thomas

45.1k10 gold badges88 silver badges129 bronze badges

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

Comments

Ebrahim Poursadeqi · Accepted Answer · 2017-07-06 08:14:20Z

0

because when you submit the form your page reload again you can prevent it from load again

$("#form1").submit(function(e) {
  e.preventDefault();
  $("#foo").css('border', '3px solid red');
});

also i removed

if (!$('#foo').val().length) {
    $("#foo").css('border', '3px solid red');
  }

because it will execute by the way in below this if

edited Jul 6, 2017 at 8:14

answered Jul 6, 2017 at 8:08

Ebrahim Poursadeqi

1,8362 gold badges18 silver badges27 bronze badges

Comments

Wordica · Accepted Answer · 2017-07-06 08:16:48Z

0

If You don't want to reload page after submit, use ajax like:

$("#form1").submit(function(event) {
    event.preventDefault();

    $.ajax({
      url: '/your_url',
      dataType: 'json', // or other
      success: function(data) {
        if (data > 0) {
          $('#foo').css('border', '3px solid red');
        }
      }
      error: function (xhr, ajaxOptions, thrownError) {
        $('#foo').css('border', '3px solid red');
      }
    });
});

answered Jul 6, 2017 at 8:16

Wordica

2,6033 gold badges36 silver badges59 bronze badges

Collectives™ on Stack Overflow

jQuery CSS Property

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related