將提交欄填寫爲空白。使用Javascript隱藏和顯示字段

Question

我的問題是，當我填寫此表格並提交。它始終提交Origin_Radius爲空時我在origin_city_search分區

我在這個問題上的推論是，因爲我有兩個相同的字段命名相同（Origin_Radius）是它總是採取最後一個值。在下面的形式中，它是origin_zip_search DIV中的一個...半徑形式工作的女巫...只是不是origin_city_search DIV中的那個。

任何關於如何讓它在每個div上提交Origin_Radius的指針都會很棒。

HTML

<form accept-charset="UTF-8" action="/searches" id="search_form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="KXseapxrgZ3SwnhQZNAG+D0RD+/ydVxAXFQ2OkyaDb4=" /></div> 
<input id="search_user_id" name="search[user_id]" type="hidden" value="10181" /> 
<div class='control-group'> 
<label class="control-label" for="origin_cs_Origin">Origin</label> 
<div class='controls'> 
<div id='origin_city_search' style='display:block;'> 
<input autocomplete="true" class="appendedInput span7" data-autocomplete-internal="true" id="search_origin_cs" name="search[origin_cs]" placeholder="City, ST" style="z-index:3;" type="text" value="" /> 
<input class="appendedInput span3" id="search_origin_radius" name="search[origin_radius]" placeholder="Radius" type="text" value="" /> 
</div> 
<div id='origin_zip_search' style='display:none;'> 
<input class="span7" id="search_origin_zip" name="search[origin_zip]" placeholder="Zipcode" type="text" value="" /> 
<input class="appendedInput span3" id="search_origin_radius" name="search[origin_radius]" placeholder="Radius" type="text" value="" /> 
</div> 
<div id='origin_state_search'> 
<input class="span10" data-states="" id="search_origin_states" name="search[origin_states]" placeholder="Enter Multiple States" style="display:none;" type="text" value="" /> 
</div> 
<div class='btn-group'> 
<a class='active btn' href='javascript:void()' id='origin_city_search_boolean'>City Search</a> 
<a class='btn' href='javascript:void()' id='origin_state_search_boolean'>State Search</a> 
<a class='btn' href='javascript:void()' id='origin_zip_search_boolean'>Zip Search</a> 
</div> 
</div> 
</div> 

查看：

.control-group 
    =label :origin_cs, "Origin", {:class => "control-label"} 
    .controls 
     -(zip_display = "none";state_display = "none";city_display = "block";city_active ="active";state_active="";zip_active = "") if search.origin_states.blank? and search.origin_zip.blank? 
     -(zip_display = "none";state_display = "block";city_display = "none";state_active = "active";city_active="";zip_active = "") unless search.origin_states.blank? and search.origin_zip.blank? 
     -(zip_display = "block";state_display = "none";city_display = "none";zip_active = "active";state_active = "";city_active="") unless search.origin_states.blank? and search.origin_cs.blank? 
     #origin_city_search{style: "display:#{city_display};"} 
     =text_field_tag "search[origin_cs]", "", {:placeholder =>ADDRESSHOLDER, :class => "appendedInput span7", style: "z-index:3;", autocomplete: "true", "data-autocomplete-internal" => "true"} 
     =text_field_tag "search[origin_radius]","", {:placeholder =>"Radius", :class => "appendedInput span3"} 
     #origin_zip_search{style: "display:#{zip_display};"} 
     =text_field_tag "search[origin_zip]", "", {:placeholder => "Zipcode", class: 'span7'} 
     =text_field_tag "search[origin_radius]","", {:placeholder =>"Radius", :class => "appendedInput span3"} 
     #origin_state_search 
     =text_field_tag "search[origin_states]", "", {placeholder: "Enter Multiple States", class: 'span10', "data-states" => states_searched(search.origin_states), style: "display:#{state_display};"} 
     .btn-group 
     %a.btn{href: "javascript:void()", id: "origin_city_search_boolean", class: "#{city_active}"} City Search 
     %a.btn{href: "javascript:void()", id: "origin_state_search_boolean", class: "#{state_active}"} State Search 
     %a.btn{href: "javascript:void()", id: "origin_zip_search_boolean", class: "#{zip_active}"} Zip Search   

的Javascript

$(document).on "click", "#origin_state_search_boolean", -> 
    $(this).addClass("active") 
    $('#origin_city_search_boolean').removeClass("active") 
    $("#origin_city_search").hide() 
    $("#origin_city_search input").each -> 
    $(this).val("") 
    $('#origin_zip_search_boolean').removeClass("active") 
    $("#origin_zip_search").hide() 
    $("#origin_zip_search input").each -> 
    $(this).val("") 
    $("#origin_state_search").show() 
    unless $('#origin_state_search .token-input-list-facebook').length 
    $("#search_origin_states").tokenInput("/searches/states.json", theme: "facebook", prePopulate: $.parseJSON($('#search_origin_states').attr("data-states")), placeHolderText: "Enter States Here") 

$(document).on "click", "#origin_zip_search_boolean", -> 
    $(this).addClass("active") 
    $('#origin_city_search_boolean').removeClass("active") 
    $("#origin_city_search").hide() 
    $("#origin_city_search input").each -> 
    $(this).val("") 
    $('#origin_state_search_boolean').removeClass("active") 
    $("#origin_state_search").hide() 
    $("#origin_state_search input").each -> 
    $(this).val("") 
    $("#origin_zip_search").show() 

$(document).on "click", "#origin_city_search_boolean", -> 
    $(this).addClass("active") 
    $('#origin_state_search_boolean').removeClass("active") 
    $("#origin_city_search").show() 
    $("#search_origin_states").val("") 
    $("#origin_state_search .token-input-token-facebook").remove() 
    $("#origin_state_search").hide() 
    $('#origin_zip_search_boolean').removeClass("active") 
    $("#origin_zip_search").hide() 
    $("#search_origin_zip").val("") 

Answer 1

使用不同的名稱爲每個字段，你不能有2場使用相同的名稱，使用的東西如「origin_radius_cs」和「origin_radius_zip」