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

【问题标题】：How to submit a form as well as execute a javascript function in clicking an input button?如何在单击输入按钮时提交表单以及执行 javascript 函数？
【发布时间】：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

标签： javascript php sql forms dom

【解决方案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'>

【讨论】：