私のphpページにはいくつかのフォームがあります。このページを処理して結果を表示するために jQuery (& Ajax) を使用しています。フォームを次のように呼び出しましょう: ToDo および Register フォーム。送信時に対応する処理が行われるように、両方のフォームに送信イベントを添付しました。ToDo フォームはページの上部にあり、Register フォームはページの下部にあります。これらのフォームのすぐ上に対応するタグがあり、フォームが処理されたときにエラー/成功メッセージを表示します。div #result_todo は、ToDo フォームが送信されたときに取得されたエラーを示します。div #result は、登録フォームが送信されたときに取得されたエラーを示しています。
実際の問題: 何も入力せずに ToDo フォームを送信しようとしたとしましょう。予想どおり、関連する php ファイルは送信された情報を処理し、div #result_todo にエラーを表示します。この div にはクロス イメージがあり、クリックすると完全な div #result_todo (およびエラーも同様) がユーザーの表示からフェードアウトします。登録フォームにスクロールして、情報を入力せずに送信しようとすると、関連する php ファイルが送信された情報を処理し、div #result にエラーが表示されます。ここでの問題は、div #result_todo でさえエラーと共に表示されることです。実際には表示されるべきではありません。登録フォームのみを送信したかったので、これは望ましくありません。ToDo フォームではなく、このフォームに関連するエラーのみを表示する必要があります。
コーディング量を減らすために、フォーム送信の成功イベント (?) でエラー メッセージを表示する関数を呼び出しています。だから私は多分それが何かがうまくいかないところだと感じています。私はjQueryとjavascriptingに非常に慣れていないので、ご容赦ください。コードは以下のとおりです。
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function removeElement(divRemove) {
$(divRemove).fadeOut(1000);
}
function theResult(data, popuDivDel) {
var popuDiv = popuDivDel;
$(popuDiv).removeClass('success'); //remove the classes to avoid overlapping
$(popuDiv).removeClass('error'); //remove the classes to avoid overlapping
//If var success received from the php file is 0, then that means there was an error
if(data.success == 0)
{
$(popuDiv).html(data.message); //attach the message to the div
$(popuDiv).addClass('error'); //attach the error class to the result div to show the errors
//Add a link to dismiss the errors
$(popuDiv).prepend('<a href=\"javascript:;\" onclick=\"removeElement(\''+popuDiv+'\')\"><img src="images/dismiss.png" alt="Dismiss Errors" title="Dismiss Errors" width="20" height="20" align="right" /></a>');
}
else if(data.success == 1) //means that our submission was good
{
$(popuDiv).html(data.message); //attach the message to the div
$(popuDiv).addClass('success'); //attach the success class to the result div to show success msg
setTimeout(function(){ $(popuDiv).fadeOut('slow'); }, 2000); //attach the animated effect as well
}
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
$('#loading_todo').show();
$('#result_todo').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
$('#loading_todo').hide();
$('#result_todo').fadeIn('slow');
});
$('#myForm').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: 'json',
success: function(data) //trigger this on successful reception of the vars from the php file
{
var popuDiv2 = '#result';
theResult(data, popuDiv2);
}
})
return false;
});
$('#frm_todo').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: 'json',
success: function(data) //trigger this on successful reception of the vars from the php file
{
var popuDivDel = '#result_todo';
theResult(data, popuDivDel);
}
})
return false;
});
})
</script>
<h4>ToDo Form</h4>
<div id="loading_todo" style="display:none;"><img src="images/loading.gif" alt="loading..." /></div>
<div id="result_todo" style="display:none;"></div>
<form id="frm_todo" name="frm_todo" method="post" action="proses2.php">
<label for="todo">Enter to-do item:</label>
<input type="text" name="todo" id="todo" />
<input type="submit" name="sbt_todo" id="sbt_todo" value="Add Item" />
</form>
<p> </p><p> </p><p> </p>
<h4>REGISTER Form</h4>
<div id="loading" style="display:none;"><img src="images/loading.gif" alt="loading..." /></div>
<div id="result" style="display:none;"></div>
<form id="myForm" method="post" action="proses.php">
<table>
<tr>
<td width="100">Name</td>
<td>
<input name="name" size="30" type="text" /><?php echo (isset($error)) ? $error['name'] : ''; ?>
</td>
</tr>
<tr>
<td>e-mail</td>
<td>
<input name="email" size="40" type="text" /><?php echo (isset($error)) ? $error['email'] : ''; ?>
</td>
</tr>
<tr>
<td>phone</td>
<td>
<input name="phone" size="40" type="text" /><?php echo (isset($error)) ? $error['phone'] : ''; ?>
</td>
</tr>
<tr>
<td>comment</td>
<td><input name="comment" size="40" type="text" id="comment" /><?php echo (isset($error)) ? $error['comment'] : ''; ?></td>
</tr>
<tr>
<td></td>
<td>
<input name="submit" type="submit" id="submit" value="Submit" />
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</form>
<?php //proses.php
//validation
if (trim($_POST['name']) == '') {
$error['name'] = '- Name Must Fill';
}
if (trim($_POST['email']) == '') {
$error['email'] = '- Email Must Fill & Valid Mail';
}
if (trim($_POST['phone']) == '') {
$error['phone'] = '- Phone must be filled';
}
if (trim($_POST['comment']) == '') {
$error['comment'] = '- Comment must be filled';
}
if ($error)
{
$success = 0;
$message = '<b>Error</b>: <br />'.implode('<br />', $error);
}
else
{
$success = 1;
$message = '<b>Thank You For Filling This Form</b><br />';
}
print json_encode(array('success' => $success, 'message' => $message));
die();
?>
<?php //proses2.php
//validation
if (trim($_POST['content']) == '')
{
$error['content'] = '- Must Fill Todo';
}
if ($error)
{
$success = 0;
$message = '<b>Error</b>: <br />'.implode('<br />', $error);
$message .= $error['content'];
}
else
{
$success = 1;
$message = '<b>Thank You For Filling This Form</b><br />';
}
print json_encode(array('success' => $success, 'message' => $message));
die();
?>
関数を効率的に使用して、共通の目的を達成するために必要なコーディング量を削減しながら、この問題の可能な解決策を提案してください (対応する効果で結果を表示するなど)。
前もって感謝します。