单击时提交表单答案

【问题标题】：Form submitting when clicked单击时提交表单
【发布时间】：2015-06-11 15:37:22
【问题描述】：

我的登录系统有问题，当我点击登录按钮或注册按钮时，它会将我重定向到一个写有文字的白页，据说它干扰了我的日志在行动中。

这是我认为导致问题的代码，

  <form method="POST" action="" accept-charset="UTF-8">

在 HTML 代码的第 16 行，我尝试删除该代码，它停止了重定向，但文本框不合适，并且白色背景/背景框也不存在，

链接，HERE

【问题讨论】：

添加 preventDefault() 以防止表单发布
取消所有内容，就像表单中的所有按钮
<form> 的数据是如何处理/处理的？ <form> 本身只会在提交时导航到action（使用""，它将重用当前地址），从它包含的输入中发送名称和值。这些数据会发生什么在应用程序的服务器端代码中的其他地方定义。

标签： javascript jquery

【解决方案1】：

如果这是纯 Javascript，您想使用 preventDefault()：您应该能够在创建按钮按下事件时将其传递给侦听器：

$('.login').on('click', function(e) {
  e.preventDefault();
  // Will be executed on press
}

<form method="POST" class="login" accept-charset="UTF-8">

如果在这种情况下不涉及 JS，那么您希望完全摆脱 action 参数——将其保留为空字符串在某些情况下仍会导致它重定向。

【讨论】：

【解决方案2】：

正如上面 Jonathan Lonowski 所解释的，当点击 log in / signup 按钮时，表单会将数据发布到 action= 属性中提到的页面.由于该属性在您的表单标签中为空，因此它将重新加载同一页面，并将数据发布到自身。

数据将以key=value 变量对的形式到达。变量值将是字段的内容，变量名将是元素上name="" 属性的值。

例如，对于这个字段：

<input id="fname" name="first" value="Bobby" />

数据会这样接收：

$fn = $_POST['first']; //value is Bobby, or whatever user enters

在包含表单的页面上，在顶部添加一个部分，如下所示：

<?php
    if (isset($_POST['fname']) == true){
        $fn = $_POST['fname'];
        echo "Received First Name: " . $fn;
        die();

    }else{
?>
        //Your current page, in its entirety, goes here

<?php
    } //close the PHP if statement
?>

这就是处理普通 HTML <form> 构造的方式。

但是，如果您希望使用 AJAX 与 PHP 文件进行通信而不更改页面，那么：

(1) 无需使用<form> 构造，只需使用带有输入按钮的DIV：<input type="button" id="sub_btn" value="Submit" />

(2) 使用标准 js/jQuery 捕获按钮按下：

$('sub_btn').click(function(){
    var fn = $('#first').val();
    //etc.

    $.ajax(function(){
        type: 'post',
         url: 'my_php_processing_file.php',
        data: 'fname=' +fn+ '&lname=' etc
    });
});

在您的 PHP 处理器文件中，数据将被这样接收：

<?php
    $fn = $_POST['fname'];
    $ln = $_POST['lname'];

    //Do your MySQL lookup here...

    echo 'Received ' .$fn. ' ' .$ln;

(3) 如果你确实使用了表单结构，你仍然可以像上面那样做所有事情，但是你需要禁止默认表单操作导航到action=中指定的页面属性（action="" 的属性设置会将数据发布到您所在的同一页面并重新加载）。

要禁止导航到action= 中指定的页面（涉及页面刷新，即使只是action=""），请使用event.preventDefault()，如下所示：

$('#buttonID').click(function(event){
    event.preventDefault();
    //remainder of button click code goes here
});

【讨论】：