フォームの送信後に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

私は確信していません、とにかくそれを得ました。

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

それとも、AddClassメソッドを使用することができ、それは何だ - ：あなたは任意の要素のスタイルを変更する必要がある場合

、あなたが何をする必要があるか、すべてはたとえば、このjQueryのCSSの方法を使用していますので、あなたがテキストエリアに

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

をインラインスタイルを書いて、インラインスタイルは、最高の優先度を持っているので、それは/ OVを交換することを、働いていないのはなぜフィドル

にやりました「.success」

だから、それはどちらかのクラスと連携してAddClass/removeClassメソッドを使用し、タグ自体にスタイルを書かないためにあなたの選択ですのような外部のCSSクラスで記述された任意のスタイルをerwrite

OR

インラインスタイルを使用してCSSメソッドを使用して更新する

Answer 3

SynchまたはAsynchを実行しますか？非同期の場合は、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"); 
     } 
    } 
}); 
}); 

基本的にはあなたがここで何をしているか非同期呼び出しを行う、したがって、提出イベントに機能を付加するとAjaxによって、それをresubmitingています。

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"); 
 
    } 
 
});