Question

我有一个表单，其操作设置为＆＃34; / resutls＆＃34;。但我有一个txt输入，我想检查是否为空是重定向到另一个位置而不是＆＃34; / results＆＃34;。这可能吗？代码示例如下：

<form id="results" action="/results" method="get">
<select id="country" name="country">
....
</select>
<input type="text" name="id">
<input type="submit" class="form-submit" value="Apply Search" name="submit">
</form>

有什么想法吗？这可以用jquery完成吗？

Answer 1

当然可以在提交处理程序中执行此操作。 警告：我不会将表单控件name id。它确实会造成混淆：如果this引用表单，this.id是应该引用表单的id还是带name="id"的文本字段？

    if( !!this.somefield.value ) { //did not want to write this.id.value !!!!
      this.action = '/other-url';
    } else {
      this.action = '/results';
    }

$(function() {
  $('#results').on('submit', function(e) {
    e.preventDefault(); // just so we can see that form action changes
    if( !!this.somefield.value ) {
      this.action = '/other-url';
    } else {
      this.action = '/results';
    }
    alert( this.action );
    //$(this)[0].submit(); //now submit the form
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="results" action="/results" method="get">
<select id="country" name="country">
</select>
<input type="text" name="somefield">
<input type="submit" class="form-submit" value="Apply Search" name="submit">
</form>

Answer 2

是的，这是可能的。只需使用jQuery .prop()设置表单元素的action属性。

举个简单的例子：

var valid = false;
// go though validation here

if (false === valid) {
    $('#results').prop('action', '/some/url/to/redirect/to');
}

Answer 3

HTML5提供了＆＃34; required＆＃34;属性将阻止发布表单，像这样使用它

<input type="text" name="id" required="required">

或者，如果您希望改为重定向到其他页面，则可以执行此操作

<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script>
        $("#results").submit(function (e){
            e.preventDefault();
            if($("#results input[name='id']").length < 1){
                window.location.href = "your detiny url";                    
            }
            else{
                this.submit();
            }
        });
    </script>

使用另一个网址中的操作重定向GET表单

3 个答案: