时间戳

首页 > 解决方案 > 使用 jQuery 基于选择动态更改表单操作 - 默认提交问题

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

问题描述

我有带有电子邮件选项字段的简单表格。我想使用 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>

标签： javascriptjqueryhtml

解决方案

一些更正

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

建议

  • 尽可能使用语义元素。

    • <main>, <section>, 和<fieldset>被添加来定义层次结构和目的。更技术性的原因是可以更流畅地分配样式。

  • 我将 id 更改<form>为#mainfrom #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>

推荐阅读