Question

我有一个表格，我使用两个选择框。问题是，当我点击显示所需字段消息的提交按钮时，它会重定向页面。如果选择值为空并且显示正常的必填字段消息，我想在单击继续按钮时停止重定向。我尝试过使用e.preventDefault（）;但它仍然重定向。以下是代码：

HTML CODE：

<select class="form-control input_wrap" name="answer[31]" id="property" required/>
    <option value="">Select property type</option>
    <option value="Independent House">Independent House</option>
    <option value="Villa">Villa</option>
    <option value="Individual Flat">Individual Flat</option>
    <option value="Plot or Land">Plot or Land</option>
</select>

<select class="form-control input_wrap" name="answer[42]" id="jurisdiction" onchange='CheckColors();' required />
    <option value="">Select Jurisdiction</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="Others">Others</option>
</select>


<button type="submit" class="btn btn-default proceed_btn">Proceed</button>

JS CODE：

$('.proceed_btn').bind('click',function(e){
    // e.preventDefault();
    // e.stopPropagation();
    $(".select_wrap").bind('click', function(){
        if($("#property").val()==""){
            return false;
        }
        if($("#jurisdiction").val()==""){
            return false;
        }
    })
 })

请为此问题提出任何解决方案。

Answer 1

嘿，您应该在表单级别进行验证，然后应该重定向。例如：

  <!DOCTYPE html>
    <html>
    <body>

    <p>When you submit the form, a function is triggered which alerts some text.</p>

    <form action="demo_form.asp" onsubmit="return myFunction()">
      Enter name: <input type="text" name="fname">
      <input type="submit" value="Submit">
    </form>

    <script>
    function myFunction() {
        alert("The form was submitted");
        return false;
    }
    </script>

    </body>
    </html>

所以onsubmit你可以验证表格然后如果一切正常则返回true。或者在select选项中出现错误并返回false。

Answer 2

您不能将按钮标记与提交类型一起使用，因为提交也会提交您的表单而您正在尝试

 <button type="submit" class="btn btn-default proceed_btn">Proceed

你可以这样使用

 <button type="button" class="btn btn-default proceed_btn">Proceed</button>

或

 <input type="button" class="btn btn-default proceed_btn" value="Proceed">

Answer 3

请检查这是否有帮助〜

 $(document).ready(function() {

          $('.proceed_btn').bind('click', function(e) {

              // e.preventDefault();
              // e.stopPropagation();
              if ($("#property").val() == "") {
                  alert('Display what you want to say!!');
                  return false;
              }
              if ($("#jurisdiction").val() == "") {
                  alert('Display what you want to say!!');
                  return false;
              }
              alert('Ready to go~');

          });
      });

即使选择框为空，也会重定向页面

3 个答案: