一些更正

Question

我有一个带有电子邮件选项字段的简单表格。我想根据使用jQuery的选择进行动态更改表单操作，效果很好。

唯一的问题是，如果不单击“ Motoristi” /“ Navtika”选项之一，则不会发生任何事情。我希望默认操作有效。

<html>
  <script>
    $(document).ready(function () {
      // Function to change form action.
      $("#db").change(function () {
        var selected = $(this).children(":selected").text();
        switch (selected) {
          case "Motoristi":
            $("#myform").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&id=75956a3bb4');

            break;
          case "Navtika":
            $("#myform").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&id=2463b3ce5c');
            break;

          default:
            $("#myform").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&id=75956a3bb4');
        }
      });

      // Function For Back Button
      $(".back").click(function () {
        parent.history.back();
        return false;
      });
    });     
  </script>
  <div id="main">
    <div id="first">
      <form id="myform" method="post" name="myform">
        <label>E-poštni naslov:</label>
        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
        <label>Zanimanje:</label>
        <select id="db">
          <option>Motoristi</option>
          <option>Navtika</option>
        </select>
        <input class="submit" id="submit" type="submit" value="Submit">
      </form>
    </div>
  </div>
</html>

Answer 1

仅当用户单击“更改”下拉菜单时，才会执行您的开关/案例。如果下拉列表保持不变，则不会发生任何事情。

只要用户更改选择，只需将表单默认操作直接添加到表单中并替换即可。

<form id="myform" method="post" name="myform" action="YOUR DEFAULT ACTION">

然后根据您的情况进行替换：

$("#myform").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&amp;id=75956a3bb4');

Answer 2

仅在您选择的change事件被触发后才触发switch语句。因此，默认情况下，您的表单没有操作。为了使您的表单具有默认操作，请给表单一个action属性。选择开关中的一种情况后，操作将更改。如果没有一个案例匹配，则什么也不会发生。因此：

<form id="myform" method="post" name="myform" action="https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&amp;id=75956a3bb4">
    <!-- rest of your form -->
</form>

和类似的开关：

switch (selected) {

    case "Motoristi":
        $("#myform").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&amp;id=75956a3bb4');
        alert("Form Action is Changed to 'mysql.html'n Press Submit to Confirm");
    break;
    case "Navtika":
        $("#myform").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&amp;id=2463b3ce5c');
        alert("Form Action is Changed to 'oracle.html'n Press Submit to Confirm");
    break;
}

Answer 3

一些更正

将<form> [action]设置为默认值，因为用户可以跳过<select>，否则就没有默认值。
在第一个位置添加默认的<option>。
将value添加到每个<option>
直接使用<select>获取所选值。
- var selected = $('#db').val()
使用confirm()代替alert()
- 当用户单击OK时，将<form> [action]设置为新值，并将return设置为新值。
- 当用户单击Cancel时，将<select>设置为默认值：$('#db').val('')
使用模板文字而不是字符串文字。
- TL：使用 ` 包装。 `字符串'
- TL：可以有多行

建议

在可能的情况下使用语义元素。
- <main>，<section>和<fieldset>来定义层次结构和用途。技术上的原因是样式可以更流畅地分配。
我将<form>的ID从#main更改为#myForm。这样做没有任何好处，只是我讨厌名为my*的任何东西，这只是我的意见。

演示

$(document).ready(function() {
  // Function to change form action.
  $("#db").change(function() {
    var selected = $(this).val();
    switch (selected) {
      case "Motoristi":
        if (window.confirm(`
        Form Action is Changed to 'mysql.html'
        Press OK to Confirm.
        `)) {
          $("#main").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&id=75956a3bb4');
          return;
        }
        $(this).val('');
        break;

      case "Navtika":
        if (window.confirm(`
        Form Action is Changed to 'oracle.html' 
        Press OK to Confirm.
        `)) {
          $("#main").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&id=2463b3ce5c');
          return;
        }
        $(this).val('');
        break;

      default:
        $("#main").attr('action', 'https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&id=75956a3bb4');
        break;
    }
  });

  // Function For Back Button
  $(".back").click(function() {
    parent.history.back();
    return false;
  });
});

<!DOCTYPE html>
<html>

<head></head>

<body>
  <main>
    <section class="first">
      <form id="main" action='https://kmc.us20.list-manage.com/subscribe/post?u=90bdfa6b0ea17ba9839f78143&id=75956a3bb4' name="main" method="post">
        <fieldset>
          <label>E-poštni naslov:</label>
          <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required><br>
          <label>Zanimanje:</label>
          <select id="db">
            <option value=''>Odaberite zanimanje</option>
            <option value='Motoristi'>Motoristi</option>
            <option value='Navtika'>Navtika</option>
          </select>
          <input type="submit">
        </fieldset>
      </form>
    </section>
  </main>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

基于使用jQuery的选择动态更改表单操作-默认提交问题

3 个答案:

一些更正

建议

演示