如何使用javascript提交表单，而无需按钮触发新页面

How to submit a form with javascript without having the button trigger a new page?

本文关键字：按钮 新页面 javascript 何使用 提交 表单      更新时间：2023-09-26

我有一个简单的表单，我想用Ajax提交。不管我怎么做，这个表单总是坚持刷新页面。

我希望表单与GET请求提交，与javascript提交，因为我需要一个js响应从服务器返回。

<div id='form_wrapper'>
  <div class='gradient'></div>
   <form action='' class='my-form' method='get' name='my-form'>
    <div class='header'>
      <h1>Submit this form</h1>
      <span>Please fill out all fields, and then submit the form.</span>
    </div>
    <div class='content'>
      <input class='input full_name' name='full_name' placeholder='Your full name' type='text'>
      <div class='full_name-icon input-icon'></div>
      <input class='input address' name='address' placeholder='Your full address' type='text'>
      <div class='address-icon input-icon'></div>
    </div>
    <div class='form-footer'>
      <input class='button' name='submit' type='submit' value='SUBMIT'>
      <input class='help' name='submit' type='submit' value='HELP?'>
    </div>
  </form>
</div>

另外，我希望我的提交按钮看起来不像它被按下了——这意味着我想避免按钮周围有蓝色边框，一旦它被按下了。我通常通过让我的按钮有href='javascript:void(0)'来避免蓝色边框，但由于这是一个表单按钮，我不认为我可以应用自己的href。

首先，我不认为你应该有两个提交按钮，但有一个其他的机制，为两个不同的提交操作，然而，除了，我给你一个jQuery的答案，因为它更快:

$(document).on('submit','.my-form',function(e){
        e.preventDefault();
        $.ajax({
          url: "processing_page.php",
          type : 'get',
          data: { name : $('.full_name').val(), address: $('.address').val },
          dataType: 'json'
        }).success(function(data){
           // do something here 
           console.log(data); //this is an object in my example
        });
    });

您还需要一个php处理页面(在我的示例中名为processing_page.php)来返回一些数据。例如(没有完成任何一方的所有验证步骤，但您将获得要点):

<?php
$myData = ['name' => '', 'address' => ''];
$name = $_POST['name'];
$address = $_POST['address'];
$myData['name'] = $name;
$myData['address'] = $address;
echo json_encode($myData);
?>

这么长的答案是为了让您可以在基本级别验证您的代码。希望我没有打错字。

摘自jQuery文档:

$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});

event.preventDefault()阻止提交触发新页面

如果您使用的是普通JavaScript，则可以执行以下操作;

function myFunc(){
  alert(1);
}
<form id="formID" onsubmit="myFunc(); return false;">
<input type="submit" value="Submit">
</form>

单击submit按钮时,它会激活myFunc () JavaScript函数和使用返回false以这种方式将防止页面改变。然后只需调用document.getElementById('formID')来加载表单的详细信息。或者，你可以使用一个活动选择器或jQuery $("#formID")。

编码快乐!

相关文章：