如何在单击输入按钮时提交表单以及执行 javascript 函数？

Posted 2023-03-23

【中文标题】如何在单击输入按钮时提交表单以及执行 javascript 函数？

【英文标题】：How to submit a form as well as execute a javascript function in clicking an input button?

【发布时间】：2017-08-03 22:39:54

【问题描述】：

这段代码有效，但它只显示了一个瞬间的标题，我们如何执行 sql 查询以及 javascript 函数来更改表单提交时的 innerhtml。

//HTML

<div id='heading'> </div>

//表格

<form method='post'>
<input type='submit name='option' value='option' onclick='myFunction()' > 
</form>

//sql查询

if(isset($_POST['option'])===true && empty($_POST['option']===true))
                $sql2= 'SELECT * from maptable ORDER by price';
                $result = $mysql->query($sql2);

  

//javascript函数

 <script>
    function myFunction()
     document.getElementById('heading').innerHTML ='OptionName';
    
    </script>

【问题讨论】：

您是否使用 AJAX 进行服务器端执行？

不，这是基本的javascript

【参考方案1】：

<input type='submit name='option' 

在此处查看您的代码。你跳过一个报价应该是这样的<input type='submit' name='option'

我看到你的表单提交时没有使用 AJAX，所以一旦你点击“提交”按钮，页面将被重新加载并返回 php 脚本执行的结果。

如果您想在提交之前运行“myFunction”，您可以这样做：

<form id="myForm">
  ...
</form>

<input type='button' name='option' onclick="myFunction()">

还有“myFunction”：

function myFunction()
    document.getElementById('heading').innerHTML ='OptionName';
    document.getElementById('myForm').submit();

或者，如果您希望“标题” div 显示一段时间，您可以使用超时提交表单：

function myFunction() 
  document.getElementById('heading').innerHTML = 'OptionName';
  setTimeout(function() 
    document.getElementById('myForm').submit();
  , <timeout of submitting in milliseconds>);

【参考方案2】：

如果我的理解是正确的，你想在 PHP 代码执行之前调用函数。 只需将onclick="myFunction()" 更改为onsubmit= "return myFunction()"。

用 try catch 块包围您的 document.getElemen.... 也是一个好习惯。

【讨论】：

你不需要用 try/catch 包裹getElementById。如果您真的担心它没有拉出元素，只需在变量中获取元素并使用if (el) 对其进行测试。在这种情况下，#heading 将始终存在。

还是同样的问题，return 有什么作用？

@SomeShinyObject 对不起，我没听懂。

@SomeShinyObject 可能你的想法会更好，因为我们这里有一两个电话：)

@PrabhjotKaur 我的错误，将onclick 更改为onsubmit

【参考方案3】：

您目前执行此操作的方式行不通。您正在使用您的表单直接发布到同一页面，而没有 AJAX，这意味着页面会刷新。由于 JavaScript 是客户端，它不会保留您设置的标题 innerHTML。有一百万零一种方法可以解决这个问题。

“修复”此问题的最快方法是声明您希望在 PHP 处理中使用的标题，然后在 H1 元素中输出（如果存在）：

#PHP
if(isset($_POST['option'])===true && empty($_POST['option']===true))
    $sql2= 'SELECT * from maptable ORDER by price';
    $result = $mysql->query($sql2);
    // Depending on what you want your Heading to be
    // $headingName = $_POST['option'];
    $headingName = "OptionName";

像这样设置你的 HTML 标题：

<div id='heading'><?php echo isset($headingName) ? $headingName : '' ?></div>

此外，您的输入缺少引号，并且通过此更改，您不再需要 JavaScript 部分：

<input type='submit' name='option' value='option'>