文章/答案/技术大牛

发布

社区首页 >问答首页 >根据两个选择的值设置表单提交操作

问根据两个选择的值设置表单提交操作
EN

Stack Overflow用户

提问于 2018-09-17 07:34:41

回答 2查看 42关注 0票数 0

我有一个表格和两个选择在里面。我需要修改表单提交操作url，这取决于2的值的变化，选择inputes.Form应该是子的，点击按钮。这是我的代码，我可以得到更改后的select输入的值，但是我想如何使它工作，并使它成为短代码+正确

$(document).ready(function() {
  $('#myform').submit(function(event) {

    event.preventDefault();

    var select1_val = $("#select1").val();
    var select2_val = $("#select2").val();

    alert(select1_val + select2_val);

    if (select1_val == '1-1' && select2_val == '2-1') {
      var url = 'example.html';
    } else if (select1_val == '1-2' && select2_val == '2-2') {
      var url = 'example2.html';
    }
    $('#myform').attr('action', url);

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="myform">
  <select id="select1">
    <option value="">Select</option>
    <option value="1-1">Something 1</option>
    <option value="1-2">Something 2</option>
  </select>

  <select id="select2">
    <option value="">Select</option>
    <option value="2-1">Something 1</option>
    <option value="2-2">Something 2</option>
  </select>

  <button id='submitBTN'>Search</button>
  <form>

jquery

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-09-17 08:22:39

我修正了密码。最好的方法是获取select输入的值，在jquery代码中编写条件if和else if之后，get URL依赖于条件并通过Jquery将其写入attr。这是工作代码

$(document).ready(function() {
  $('#myform').submit(function(event) {

    var select1_val = $("#select1").val();
    var select2_val = $("#select2").val();

    if (select1_val === "" || select2_val === "") {
      event.preventDefault();
    } else {
      //alert(select1_val + select2_val);

      if (select1_val == '1-1' && select2_val == '2-1') {
        var url = 'example.html';
      } else if (select1_val == '1-2' && select2_val == '2-2') {
        var url = 'example2.html';
      }

      //alert(url);
      $('#myform').attr('action', '/' + url);
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="myform">
  <select id="select1">
    <option value="">Select</option>
    <option value="1-1">Something 1</option>
    <option value="1-2">Something 2</option>
  </select>

  <select id="select2">
    <option value="">Select</option>
    <option value="2-1">Something 1</option>
    <option value="2-2">Something 2</option>
  </select>

  <button id='submitBTN'>Search</button>
  <form>

票数 0

Stack Overflow用户

发布于 2018-09-17 08:26:20

不确定您想要的验证，但是我只是尝试开发基于2种验证的basic。

如果其中任何一个是空的，什么也不做。
如果两者都不是空的，那么进行验证检查并相应地更改url。

$(document).ready(function() {
  $('#select1').on('change', function(){urlValidation()});
  $('#select2').on('change', function(){urlValidation()});
});

function urlValidation() {
  var val1 = $('#select1').val();
  var val2 = $('#select2').val();
  
  if (val1 === "" || val2 === "") {
    // Do nothing
     alert ("Doing Nothing!");
  } else if (val1 != "" && val2 != "") {
    if (val1 === "1-1") {
      // Next step validation to check select2 value and apply URL
      if (val2 === "2-1") {
        $('#myForm').attr('action', '1-1-2-1.html');
      } if (val2 === "2-2") {
        $('#myForm').attr('action', '1-1-2-2.html');
      }
    } else if (val1 === "1-2") {
      // Next step validation to check select2 value and apply URL
      if (val2 === "2-1") {
        $('#myForm').attr('action', '1-2-2-1.html');
      } if (val2 === "2-2") {
        $('#myForm').attr('action', '1-2-2-2.html');
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="depend_on_selections.html" id="myForm">
  <select id="select1">
    <option value="">Select</option>
    <option value="1-1">Something 1</option>
    <option value="1-2">Something 2</option>
  </select>

  <select id="select2">
    <option value="">Select</option>
    <option value="2-1">Something 1</option>
    <option value="2-2">Something 2</option>
  </select>

  <button id='submitBTN'>Search</button>
<form>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52362829

复制

相似问题

问根据两个选择的值设置表单提交操作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据两个选择的值设置表单提交操作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据两个选择的值设置表单提交操作
EN