A
A
AlexanZem2017-02-09 23:21:01
JavaScript
AlexanZem, 2017-02-09 23:21:01

After submitting the form, all the set properties go astray, how to fix it?

There is a form:

<form id="personal-form" action="" method="POST" role="form">						
  <input type="text" class="form-control req-input">
  <input type="email" class="form-control req-input">
  <input type="tel" class="form-control" placeholder="+ 380 (___) ___ __ __">
  
  <button id="profile-sub" type="submit" class="btn btn-primary">СОХРАНИТЬ ИЗМЕНЕНИЯ</button>
</form>


When handling the onsubmit event in jQuery:
$(document).ready(function() {
  $("#personal-form").on("submit", function(e){
    $("#test").css("border","5px solid red");
    
  });
});


The CSS property is added for a fraction of a second and after submitting the form, everything remains as it was.

If you cancel sending everything applies.
$(document).ready(function() {
  $("#personal-form").on("submit", function(e){
    $("#test").css("border","5px solid red");
    return false;
  });
});


And if you put type="button" on the button and do the onclick processing, everything works.
But I need it to work like this, tell me where I have an error or why is this happening?

Answer the question

In order to leave comments, you need to log in

3 answer(s)
R
Roman Shcherbokov, 2017-02-09
@drogwur

The form is submitted - the page is refreshed.
And everything is logical.

D
Dima Pautov, 2017-02-09
@bootd

So your page is then updated when it is sent. The default form doesn't care if the field is filled in or not. She immediately sends it, even if it is empty. You need to block the form first, all of it, check the fields are filled, and then send it. Not like you!

T
tommy_13, 2017-02-10
@tommy_13

use ajax submit

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question