olx.comはカテゴリ変更のフォームフィールドをどのように表示し、それに応じて提出しますか？

私はolxのようなポスト広告フォームをデザインする方法を知りたいです。olx.comはカテゴリ変更のフォームフィールドをどのように表示し、それに応じて提出しますか？

2016-05-20 Shaun

を確認し、一度送信ボタンを、フォーム上では発生しません提出するには、それは彼らがデータを形成し、AJAXを行いますカテゴリ別の関数を呼び出し、その関数になりますクリック投稿 –

私はカテゴリの変更でフォームフィールドがどのように変化するかを知る必要があります。車を選ぶと、フィールドがスピード、マイレージとして現れ、私が家を選ぶと、フィールドはエリア、レート、価格のようになります。 – Shaun

すべてのカテゴリのすべてのフィールドが作成されますが、デフォルトではすべてのフィールドが非表示になります。フラグを使用するとフィールドが非表示になります –

var subs = document.querySelectorAll(".sub"); 
 

 
function modeChanged() { 
 
    removeDisp(); 
 
    var chooser = document.querySelector("#chooser").value; 
 
    if (chooser !== "") { 
 
    document.querySelector("." + chooser).style.display = "block"; 
 
    } 
 
} 
 
removeDisp(); 
 

 
function removeDisp() { 
 
    for (var a = 0; a < subs.length; a++) { 
 
    subs[a].style.display = "none"; 
 
    } 
 
}

.sub { 
 
    margin-top: 10px; 
 
} 
 
label { 
 
    margin-top: 5px; 
 
    display: block !important; 
 
} 
 
label span { 
 
    width: 200px; 
 
    display: inline-block; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <select name="chooser" id="chooser" onchange="modeChanged()"> 
 
    <option value="">Select</option> 
 
    <option value="home">Home</option> 
 
    <option value="shop">Shop</option> 
 
    <option value="car">Car</option> 
 
    </select> 
 
    <div class="sub home"> 
 
    <label><span>Type Of Home:</span> 
 
     <input/> 
 
    </label> 
 
    <label><span>Price Range:</span> 
 
     <input/> 
 
    </label> 
 
    </div> 
 
    <div class="sub shop"> 
 
    <label><span>Shop Size:</span> 
 
     <input/> 
 
    </label> 
 
    <label><span>Shop Area:</span> 
 
     <input/> 
 
    </label> 
 
    </div> 
 
    <div class="sub car"> 
 
    <label><span>Car Modal:</span> 
 
     <input/> 
 
    </label> 
 
    <label><span>Date of purchase:</span> 
 
     <input/> 
 
    </label> 
 
    </div> 
 
</body> 
 

 
</html>

それを簡単なthatsの

出典

2016-05-20 08:53:24

olx.comはカテゴリ変更のフォームフィールドをどのように表示し、それに応じて提出しますか？

答えて

関連する問題