フォームを送信するだけでなく、入力ボタンをクリックしてjavascript関数を実行する方法？

Question

このコードは動作しますが、フォーム提出のinnerHTMLを変更するためのjavascript関数と同様に、SQLクエリをどのように実行できるか、という瞬間の見出しのみを示しています。

// 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()"に変更してください。

document.getElemen....をtry catchブロックで囲むのもよい方法です。

Answer 2

これを今実行している方法は機能しません。 AJAXを使わずにフォームを使って同じページに直接投稿すると、ページが更新されます。 JavaScriptはクライアント側であるため、設定した見出しのinnerHTMLは保持されません。これを修正するには、百万と一つの方法があります。

これを「修正」する最も簡単な方法は、それが存在する場合、H1要素にすることをあなたは見出しがあなたのPHPの処理になりたいものを宣言してから出力されます：

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

したい場合はOR、 "見出し" をdivをしばらく表示するには、タイムアウトを使用してフォームを送信してください：

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