表单提交字段为空白.使用Javascript隐藏和显示字段
Form submitting field as Blank. Using Javascript to hide and show fields
我的问题是,当我填写这份表格并提交时。当我在Origin_city_searchdiv 上时,它总是将Origin_Radius提交为空
我在这个问题上的不足之处在于,由于我有两个相同的字段命名相同(Origin_Radius),所以它总是取最后一个的值。在下面的形式中,它是origin_zip_search DIV.…开关中radius形式工作的那个。。。只是不是original_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="✓" /><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("")
每个字段使用不同的名称,不能有两个字段具有相同的名称,请使用类似"origin_radius_cs"answers"origin_radius_zip"的
相关文章:
- JavaScript 检查隐藏字段中的值并将其设置为隐藏字段值
- 带有验证和隐藏字段值的提交按钮
- 主干窗体隐藏字段未呈现
- 清除以前的$_GET值或不获取仅隐藏字段的值
- 添加和删除隐藏字段数组中的值,而不提交表单
- 在控制器上使用“$watch”时,为什么不更新此隐藏字段
- 将选项值附加到隐藏字段
- JQuery获取隐藏字段的值
- HTML提交表单,同时包含空字段检查和按钮隐藏
- MVC+访问控制器中的隐藏字段
- 如何隐藏&使用jQuery禁用依赖于另一个字段值的字段
- ASP.net Javascript函数中的隐藏字段为null
- 在第一页加载时隐藏字段,而不是在php发布之后
- 使用JavaScript获取隐藏的Django字段
- 提交表单时,显示或识别隐藏的必填字段并将其集中
- 表单使用js、html,而不是隐藏字段
- HTML5要求隐藏文件字段-反馈位置
- 当javascript中的强制字段隐藏在条件中时,如何限制它们的验证
- 为隐藏字段隐藏jquery验证器消息
- 如何使一些字段隐藏取决于其他字段的值AngularJS, Razor, c#