我有一个表单,当用户从<select></select>
中选择一个选项时,我想更改其操作。下拉菜单。
这是我的表格:
<form role="form" method="post" id="switch-customer-form" class="switch-customer-form">
{% csrf_token %}
<div class="form-group col-xs-12 floating-label-form-group controls">
<select class="form-control customers-dropdown" id="customers-dropdown" name="form_customers">
{% for c in customers %}
<option{% if customer == c %} selected="true"{% endif %}>{{ c }} - {{ c.id }}</option>
{% endfor %}
</select>
</div>
<div class="form-group col-xs-12 floating-label-form-group controls">
<input type="submit" value="View Calendar" class="btn btn-primary btn-sm">
</div>
</form>
这是我的(非工作)JS:
$("#customers-dropdown").change(function() {
var action1 = "/ac/calendar/";
var action2 = "/2014/12/";
var customer = $(this).val();
var customer_split = customer.split("-");
var customer_id = customer_split[1].trim();
var final_action = action1 + customer_id + action2;
alert(final_action);
$("#switch-customer-form").attr("action", final_action);
});
我遇到的问题是添加 .trim()
到customer_id
变量初始化。由于某种原因,添加此函数时它不再更改表单的 action
。没有.trim()
它确实正确地更改了操作,但是存在无关的空白,导致链接不定向到适当的页面。
.trim()
中有什么吗?造成这个?有没有更理想的方法来删除该变量中的空格?感谢您的帮助。
更新(为了清晰起见):
这是我成功更改表单操作的唯一 JS,尽管它仍然包含额外的空格:
$("#customers-dropdown").change(function() {
var action1 = "/ac/calendar/";
var action2 = "/2014/12/";
var customer = $(this).val();
var customer_split = customer.split("-");
var customer_id = customer_split[1];
var final_action = action1 + customer_id + action2;
alert(final_action);
$("#switch-customer-form").attr("action", final_action);
});
这没有向 <option>
添加值标签。这样做后,我遇到了同样的问题,它不更新表单操作,只是发布到当前页面。
最佳答案
这样不是更容易做到吗? (使用id作为选择选项的值)
<form role="form" method="post" id="switch-customer-form" class="switch-customer-form">
{% csrf_token %}
<div class="form-group col-xs-12 floating-label-form-group controls">
<select class="form-control customers-dropdown" id="customers-dropdown" name="form_customers">
{% for c in customers %}
<option{% if customer == c %} selected="true"{% endif %} value="{{c.id}}">{{ c }} - {{ c.id }}</option>
{% endfor %}
</select>
</div>
<div class="form-group col-xs-12 floating-label-form-group controls">
<input type="submit" value="View Calendar" class="btn btn-primary btn-sm">
</div>
</form>
$("#customers-dropdown").change(function() {
var action1 = "/ac/calendar/";
var action2 = "/2014/12/";
var customer = this.value;
var final_action = action1 + customer + action2;
alert(final_action);
$("#switch-customer-form").attr("action", final_action);
});
更新
This is without adding a value to the tag. Upon doing so I encounter the same issue where it does not update the form action and simply posts to the current page.
您将被重定向到同一页面,因为尚未触发更改事件并且表单中没有任何操作。如果更改事件被触发,操作就会改变并且它会起作用。
您需要向表单添加一个操作,或者添加 JavaScript 以将操作更改为在 DOM 准备就绪时标记为选中的选项。
例如,在 DOM 就绪时:
var changeAction = function(id) {
var action1 = "/ac/calendar/";
var action2 = "/2014/12/";
var final_action = action1 + id + action2;
$("#switch-customer-form").attr("action", final_action);
};
changeAction($("#customers-dropdown").val());// On document ready, change action to selected item.
$("#customers-dropdown").change(function () {// On change event, change action as well
changeAction(this.value);
});
关于javascript - 选择更改时的 JS 更改表单操作不适用于 .trim(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27669701/