Как изменить div после отправки формы?

Question

Как изменить фон div формы и результата после отправки формы? Я хочу изменить фон формы и результат от изображения к цвету.

Как это сделать? Я пытаюсь это решение, которое я нашел, но это не работает, http://jsfiddle.net/tymeJV/YL6Da/

Jsfiddle

<form action="" method="post" name="locator"> 
    <div class="locator-div"> 
     <select name="locator1_list" id="filterby"> 
      <option name="default" class="filter_by" value="Select by">Select by</option> 
     </select> 
    </div> 
    <span class="or">or</span> 
    <div class="locator-div"> 
     <select name="locator1_list" id="filterby"> 
      <option name="default" class="filter_by" value="Select by">Select by</option> 
     </select> 
    </div> 
    <input type="submit" value="List all locations" class="location-submit"> 
</form> 

<div class="records"><div><span class="icons-tabbed-store icon-icon-stores"> Location 1</span></div></div> 

Answer 1

попробовать так:

$("form").submit(function(e) { 
 

 
    e.preventDefault(); 
 
    var bool = false; 
 
    
 
    if (bool) { 
 
     $("form").addClass("success"); 
 
     $(".records").addClass("error"); 
 
    } else { 
 
     $("form").addClass("error"); 
 
     $(".records").addClass("success"); 
 
    } 
 
});

скопировать этот CSS классы и добавить фоновое изображение: нет

Answer 2

Я не уверен, я все понял.

Если вам нужно изменить стиль любого элемента, все, что вам нужно сделать, это с помощью этого метода CSS JQuery, например: -

$("#message").css("background-color","green") 

Или вы можете использовать метод AddClass, и это то, что вы сделал на скрипке

Почему это не работает, потому что вы написали встроенный стиль в текстовом поле

style="color: white; background-color: grey; display: none 

И встроенный стиль имеет наивысочайший приоритет, поэтому он будет заменить/ов erwrite любого стиля, написанный на внешнем классе CSS, как «.success»

Так что ваш выбор либо работать с классами и использовать методы/removeClass AddClass, и не писать стиль в самом теге

ИЛИ

Использовать встроенный стиль и использовать метод css для его обновления

Answer 3

Вы хотите сделать синхронизацию или асинхронную работу? Если асинхронная, вам нужно использовать AJAX:

$("#id-of-form").submit(function(e) { 
e.preventDefault(); 

$.ajax({ 
    url: 'url-of-form', 
    type: 'post', 
    success: function (response) 
    { 
     var bool = false; 

     if (bool) { 
      $("#message").fadeIn("slow").removeAttr("style").addClass("success").text("Successful!"); 
     } else { 
      $("#message").fadeIn("slow").removeAttr("style").addClass("error").text("Failed"); 
     } 
    } 
}); 
}); 

В основном то, что вы здесь делаете прикрепляет функцию к событию и представить resubmiting его Ajax, таким образом, делая асинхронная вызов.

Если вы хотите Synch, вам нужно использовать PHP или любой другой язык, который вы используете.

Answer 4

$("form").submit(function(e) { 
 

 
    e.preventDefault(); 
 
    var bool = false; 
 
    
 
    if (bool) { 
 
     $("form").addClass("success"); 
 
     $(".records").addClass("error"); 
 
    } else { 
 
     $("form").addClass("error"); 
 
     $(".records").addClass("success"); 
 
    } 
 
});