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

Question

该代码有效，但仅显示了标题，即如何执行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>

Answer 1

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

用try catch块替代document.getElemen....也是一种好习惯。

Answer 2

您目前执行此操作的方式将无法正常工作。 您直接将表单发布到同一页面，而没有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'> 

Answer 3

<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>);
}