时间戳

首页 > 解决方案 > 如何根据使用单一表单选择的单选按钮修复用于不同页面的代码

javascript - 如何根据使用单一表单选择的单选按钮修复用于不同页面的代码

问题描述

我想从单个表单中选择不同的模板（页面）（单选按钮）。我想在我的表单中只包含一个按钮。

这里好像有人选择template1了我会去page template1.php。如果我选择template2我将转到 template2.php。

我已将以下代码保存为 form.php

<form method="POST" action=
                          "<?php if(($rb = $_POST('template'))=='1'){?>
                                          template1.php 
                           <?php } 
                            if(($rb = $_POST('template'))=='2'){?>
                                          template2.php 
                            <?php } ?>"
                            enctype="multipart/form-data"> 
         <label>First Name: </label>
         <input type="text" name="firstname">
         <label>Last Name: </label>
         <input type="text" name="lastname">
         <input type="radio" value="1" name="template">Template 1
         <input type="radio" value="2" name="template">Template 2
         <button type="submit" name="upload">POST</button>      

  </form>

标签： javascriptphpjqueryhtmlforms

解决方案

改为使用 JavaScript。PHP 是一种服务器端语言，这意味着您必须在 PHP 知道您选择了哪个选项之前将表单提交到服务器。当你改变它时，JavaScript 可以处理这个问题，因为它是一种客户端语言。

为单击名称为 的输入创建一个事件侦听器template。然后相应地切换操作。

$("input[name=template]").on("click", function() {
  var action = "";
  switch($(this).val()) {
    case "1":
      action = 'template1.php';
      break;
    case "2":
      action = 'template2.php';
      break;
  }
  $(this).parent("form").prop("action", action);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="" enctype="multipart/form-data"> 
         <label>First Name: </label>
         <input type="text" name="firstname">
         <label>Last Name: </label>
         <input type="text" name="lastname">
         <input type="radio" value="1" name="template">Template 1
         <input type="radio" value="2" name="template">Template 2
         <button type="submit" name="upload">POST</button>      

  </form>

推荐阅读