在表单操作与复选框或单选按钮之间交替进行

Alternate between form action with check box or radio button

本文关键字：之间 单选按钮 表单 操作 复选框      更新时间：2023-09-26

我有两个独立的insert.php文件…我该如何根据用户是否勾选了复选框或单选按钮来在它们之间进行切换呢?

例如，如果我的html设置为....

<form action="x.php" method="post">

，然后用户选中复选框，所以表单需要更改为y.php

<form action="y.php" method="post">

这将如何实现?

你可以在单选按钮上使用javascript函数，

<script type="text/javascript">
function OnSubmitForm()
{
  if(document.myform.operation[0].checked == true)
  {
    document.myform.action ="x.php";
  }
  else
  if(document.myform.operation[1].checked == true)
  {
    document.myform.action ="y.php";
  }
  return true;
}
</script>
<form name="myform" onsubmit="return OnSubmitForm();">
   <input type="radio" name="operation" value="1" checked>radio1
   <input type="radio" name="operation" value="2">radio2
   <p>
   <input type="submit" name="submit" value="save">
   </p>
</form>

表单是一个标签，它有属性。动作实际上是表单标签的一个属性。

当用户选择复选框，单选按钮时，你可以用javascript改变表单标签的属性(通过javascript中的catch事件)

你应该这样做。

<form id="myForm" action="x.php" method="post">
    <input type="checkbox" id="chkbox" />
</form>
<script type="text/javascript">
    $(document).ready(function(){
        $('#chkbox').click(function() {
            // `this` keyword is the native DOM object
            $('myForm').attr('action', this.checked? 'y.php' : 'x.php');
        });
    });
</script>

如果你需要改变表单的动作，并允许使用javascript有一个相当简单的

  1. 给表单一个名字，这样你就可以用javascript瞄准它。
  2. 创建一个带有ID的复选框，然后使用if语句更改表单的属性'action'。

示例代码如下:

<form name="form1" action="x.php" method="post">
    <input id="changeAction" type="checkbox" />
</form>
<script type="text/javascript">
    var checkBox = document.getElementById('changeAction');
    var form = document.form1;
    checkBox.onclick = function() {
        (checkBox.checked ? form.setAttribute('action', 'y.php') : form.setAttribute('action', 'x.php'))
        console.log(form);
    }
</script>

使用jQuery和低调的JavaScript…

<script type="text/javascript">
$(function(){
  $('#MyForm').submit(function(){
    var action = $(this).find('input[name=operation]:checked').val();
    $(this).attr('action', action);
  });
});
</script>
<form id="MyForm" method="post">
   <input type="radio" name="operation" value="x.php" checked>radio1
   <input type="radio" name="operation" value="y.php">radio2
   <p>
   <input type="submit" name="submit" value="save">
   </p>
</form>

一些内联javascript可以快速完成这个任务

jQuery的例子:

<input type="radio" name="operation" value="1" checked onclick="$(this).parent().attr('action', 'x.php');">radio1
<input type="radio" name="operation" value="2" onclick="$(this).parent().attr('action', 'y.php');">radio2

普通js 

<input type="radio" name="operation" value="1" checked onclick="this.parentNode.action='x.php';">radio1
<input type="radio" name="operation" value="2" onclick="this.parentNode.action='y.php';">radio2
相关文章：