JavaScriptを使用してHTMLフォームを作成すると、ajaxはそれを一切処理せず、空白のアクションPHPページに送信されるという問題があります。フォームフィールドが空であるかどうかをチェックするために、このページは空白です。 JavaScriptで作成されたJavaScriptが生成したフォームをAjaxで処理しない
フォーム:Javascriptをせずに作成
function createForm() {
var f = document.createElement('form');
f.setAttribute('method','post');
f.setAttribute('action','action.php');
f.setAttribute('class', 'ajax');
f.innerHTML = '<span style="color: black; display: inline;">Name: <input class="popup-form-fields" id="inputName" onkeyup="validateName(); theCheck();" onkeydown="validateEmail(); theCheck();" onclick="validateName();" type="text" name="name" autocomplete="off"></span><label id="commentName" class="label1"></label>';
f.innerHTML += '<div class="space"></div>';
f.innerHTML += '<span style="color: black; display: inline;">Email address: <input class="popup-form-fields" id="inputEmail" onkeyup="validateEmail(); theCheck();" onkeydown="validateEmail(); theCheck();" onclick="validateEmail();" type="email" name="email" autocomplete="off"></span><label id="commentEmail" class="label1"></label>'
f.innerHTML += '<div class="space"></div>';
f.innerHTML += '<span style="color: black; display: inline;">Phone number: <input class="popup-form-fields" id="inputPhone" onkeyup="validatePhone(); theCheck();" onkeydown="validatePhone(); theCheck();" onclick="validatePhone();" type="tel" name="phone" autocomplete="off"></span><label id="commentPhone" class="label1"></label>';
f.innerHTML += '<div class="space"></div>';
f.innerHTML += '<span style="vertical-align: top; color: black; display: inline;">Details: <textarea class="popup-form-fields" id="inputDetail" onkeyup="validateDetail(); theCheck();" onkeydown="validateDetail(); theCheck();" onclick="validateDetail();" name="details" autocomplete="off"></textarea></span><label id="commentDetail" class="label1"></label>';
f.innerHTML += '<div class="space"></div>';
f.innerHTML += '<input id="sub" type="submit" value="Send">';
}
フォーム:
<form method="POST" action="book-priv-party-complete.php" class="ajax">
<span style="color: black; display: inline;">Name: <input class="popup-form-fields" id="inputName" onkeyup="
validateName(); theCheck();" onkeydown="validateName(); theCheck();" onclick="validateName();" type="text"
name="name" autocomplete="off"></span><label id="commentName" class="label1"></label>
<div class="space"></div>
<span style="color: black; display: inline;">Email address: <input class="popup-form-fields" id="inputEmail"
onkeyup="validateEmail(); theCheck();" onkeydown="validateEmail(); theCheck();" onclick="validateEmail();" type=
"email" name="email" autocomplete="off"></span><label id="commentEmail" class="label1"></label>
<div class="space"></div>
<span style="color: black; display: inline;">Phone number: <input class="popup-form-fields" id="inputPhone"
onkeyup="validatePhone(); theCheck();" onkeydown="validatePhone(); theCheck();" onclick="validatePhone();" type=
"tel" name="phone" autocomplete="off"></span><label id="commentPhone" class="label1"></label>
<div class="space"></div>
<span style="vertical-align: top; color: black; display: inline;">Details: <textarea class="popup-form-fields"
id="inputDetail" onkeyup="validateDetail(); theCheck();" onkeydown="validateDetail(); theCheck();" onclick="
validateDetail();" name="details" autocomplete="off"></textarea></span><label id="commentDetail" class="label1
"></label>
<div class="space"></div>
<input id="sub" type="submit" value="Send">
</form>
AJAX:
$('form.ajax').on('submit', function() {
var that = $(this),
url = 'action.php',
type = 'post',
data = {};
that.find('[name]').each(function (index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function() {
removeElement();
document.getElementById('errorCode').innerHTML = "Your message was sent";
document.getElementById('errorCode').style.color = "green";
setTimeout(function() {document.getElementById('errorCode').style.display = "none";}, 2000);
alert("It worked");
},
error: function() {
removeElement();
document.getElementById('errorCode').innerHTML = "Your message was not sent";
document.getElementById('errorCode').style.color = "red";
setTimeout(function() {document.getElementById('errorCode').style.display = "none";}, 2000);
}
});
return false;
});
この問題の原因は、Javascriptが実行されている場所と場所である可能性がありますか?あなたはこのform
要素を動的を作成するので、あなたのjavascript関数でトリガーなっていないsubmit
機能について
説明をいただきありがとうございます。 –