javascript - 有没有办法选择选项页面并按提交将信息传输到所选选项页面

Question

我有一个带有文本框和选项的表单，可以根据工作类型选择页面。我希望当最终用户在文本框中输入信息时选择页面选项，然后按提交信息传输并将其显示在所选页面中。

<div>
  <H1>SELECT A page:</H1>
  <form name="myForm" id="myForm" action="">
    <select id="ddl" name="dd1" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
      <option value=""></option>
      <option value="IT">IT.php</option>
      <option value="Health">Health.php</option>
      <option value="HR">HR.php</option>
      <option value="Education">Education.php</option>
      <option value="Art">Art.php</option>
    </select>

    <select id="ddl2" name="dd12">
    </select><br>
    <br>
    <!--<input class="SubmitButton" type="submit" name="submit"  id="submit" value="Submit" style="font-size:20px; " />-->

    <!--in this submit I want the code that makes the info transfer into selected page-->
    <button id="submit" name="submit">Submit</button>
  </form>
</div>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>

$(document).ready(function() {
  $('#submit').on('click', function(e) {
      //e.preventDefault();
      var linkTo = $('select[name="dd1"]').val();
      var goTo;

      switch (linkTo) {
        case 'IT':
          goTo = "IT.php";
          break;
        case 'Health':
          goTo = "Health.php";
          break;
      }

      case 'HR':
        goTo = "HR.php";
        break;
      case 'Education':
        goTo = "Education.php";
        break;
    }

    case 'Art':
      goTo = "Art.php";
      break;
  }

  $("#myForm").attr("action", goTo);
  $("#myform").submit();
});
});

Answer 1

您已经从选择选项中获取了链接。我认为不需要使用 switch 。

你可以试试。

<script>
  $(document).ready(function() {
  $('#submit').on('click', function(e) {
  var linkTo = $('select[name="dd1"]').val();
  $("#myForm").attr("action", linkTo+'.php');
  $("#myform").submit();
});
});
</script>

表单。

<div>
  <H1>SELECT A page:</H1>

  <form name="myForm" id="myForm" action="">
 <!-- For example you have text field with name attr textbox -->
  <input type="text" name="textbox">
    <select id="ddl" name="dd1">
      <option value=""></option>
      <option value="check">IT.php</option>
      <option value="Health">Health.php</option>
      <option value="HR">HR.php</option>
      <option value="Education">Education.php</option>
      <option value="Art">Art.php</option>
    </select>

    <select id="ddl2" name="dd12">
    </select><br>
    <br>
    <!--<input class="SubmitButton" type="submit" name="submit"  id="submit" value="Submit" style="font-size:20px; " />-->

    <!--in this submit I want the code that makes the info transfer into selected page-->
    <button id="submit" name="submit">Submit</button>
  </form>
</div>

表单正在使用 get 方法。当您提交表单时，所有表单数据都将转到所选页面，其中包含 URL 中的查询字符串。

example.com/IT.php?textbox=test&dd1=IT

因此在选定的页面上，您可以使用 $_GET 获取值。

 <?php
    $dd1 = $_GET['dd1'];
    $ddl2 = $_GET['ddl2'];
    echo $textbox = $_GET['textbox'];
    ?>