QA@IT
«質問へ戻る

質問を投稿

jqueryでフォームをajax送信する事についての質問です。

jqueryでフォームをajax送信する事についての質問です。
下記のソースコードにて、フォーム送信後、送信元と同じフォームが再度読み込まれるプログラムなのですが、
1回目のフォーム送信後、もう一度フォーム送信をしようとすると、「入力内容を確認する」ボタンをクリックしても、何も反応が起きません。

原因と改善方法について教えて頂けませんでしょうか?

宜しくお願い致します。

【送信元ソースコード(index.html)】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

$(function(){
$('#button').on("click",sayhello);

function sayhello(){
$.ajax({
type: 'POST',
url: "hello.php",
data: $('form').serialize(),

success: function(data) {
$('#input_form').html(data);
}
});
}

});

【送信先ソースコード(hello.php)】
<?php
echo $_POST['name'];
echo '';
?>

jqueryでフォームをajax送信する事についての質問です。
下記のソースコードにて、フォーム送信後、送信元と同じフォームが再度読み込まれるプログラムなのですが、
1回目のフォーム送信後、もう一度フォーム送信をしようとすると、「入力内容を確認する」ボタンをクリックしても、何も反応が起きません。

原因と改善方法について教えて頂けませんでしょうか?

宜しくお願い致します。

【送信元ソースコード(index.html)】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script src="jquery-2.0.2.js"></script>

<script type="text/javascript">

$(function(){
$('#button').on("click",sayhello);

function sayhello(){
$.ajax({
type: 'POST',
url: "hello.php",
data: $('form').serialize(),

success: function(data) {
$('#input_form').html(data);
}
});
}

});


</script>

</head>

<body>

<section id="input_form">

<form id="form">

<input type="text" name="name" id="name" />
<input id="button" type="button" value="入力内容を確認する" />

</form>

</section>

</body>
</html>

【送信先ソースコード(hello.php)】
<?php
echo $_POST['name'];
echo '<br>';
?>

<form id="form">

<input type="text" name="name" id="name" />
<input id="button" type="button" value="入力内容を確認する" />

</form>