私は初めてフォームデータをMySQLデータベースに送信するという目標を達成するため、最初のAjax動力フォーム(here)をまとめました。私はPHPとJavascriptで最小限の経験を持っているので、JQuery Formwizardを私の選択肢として採用しました。フォームは素晴らしいですが、私は私の 'process.php'スクリプトを書くのを助けるリソースを見つけるのは大した運がありませんでした。JQuery検証エラーメッセージにCSSを追加する
デフォルトでは、フォームはitem1 = foo & item2 = bar ...のような文字列を返します。これはsubmit時に表示されます。私は以下のJSと私のprocess.phpファイルの要点を添付しましたが、どのように2つのタイが一緒になっているか分かりません。送信ボタンは、スクリプトに全く指示していないようです。フォームはちょっと長いですが、シンプルなので、ちょうどその一部を含んでいます。 おかげでたくさん、
マイク
HTML(SNIPPET)
<form action="path/to/process-form.php" method="POST" id="demoForm" class="bbq">
<div id="fieldWrapper">
<span class="step" id="first">
<span class="font_normal_07em_black">Manufacturer Information</span><br />
<p class="section-desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non est est. Quisque sit amet tellus nulla,
eget molestie velit. Morbi dapibus ornare purus eget ultrices. In et massa ac diam vulputate auctor.
Curabitur ut velit nisi, vel suscipit ligula. Donec non tellus id mauris ornare laoreet sed quis massa.
</p>
<br />
<div class="clear-line"></div>
<br />
<label for="manu_name">Manufacturer</label><br />
<input class="input_field_12em" name="manu_name" id="manu_name" /><br />
<label for="manu_web">Website</label><br />
<input class="input_field_12em" name="manu_web" id="manu_web" value="http://" /><br />
<label for="manu_email">Email</label><br />
<input class="input_field_12em" name="manu_email" id="manu_email" /><br />
<label for="manu_phone">Phone</label><br />
<input class="input_field_12em" name="manu_phone" id="manu_phone" />
<label for="manu_phone_ext">ext</label>
<input class="input_field_12em" name="manu_phone_ext" id="manu_phone_ext" /><br />
<label for="manu_info">Additional Info</label><br />
<textarea class="input_field_12em" name="manu_info" id="manu_info"></textarea><br />
</span>
は...
0 JS <div id="demoNavigation">
<input class="navigation_button" id="back" value="Back" type="reset" />
<input class="navigation_button" id="next" value="Next" type="submit" />
</div>
</form>
を続け、
$(function(){ $("#demoForm").formwizard({ formPluginEnabled: true, validationEnabled: true, focusFirstInput : true, formOptions :{ type:'POST', success: function(data){$("#status").fadeTo(5000,1,function(){ $(this).html("Product successfully submitted!").fadeTo(5000, 0); })}, beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));}, dataType: 'json', resetForm: true }, validationOptions : { rules: { <!-- Manufacturer validation --> manu_name: "required", manu_email: { email: true }, }, messages: { required: "This field is required.", email: "Please enter a valid email address." } } }); });
PHP(プロセス-form.php)
<?php
include('dbconnect.php');
/* manufacturer */
$manu_name = $_POST['manu_name'];
$manu_web = $_POST['manu_web'];
$manu_email = $_POST['manu_email'];
$manu_phone = $_POST['manu_phone'];
$manu_phone_ext = $_POST['manu_phone_ext'];
$manu_info = $_POST['manu_info'];
$manu_name = mysqli_real_escape_string($manu_name);
$manu_web = mysqli_real_escape_string($manu_web);
$manu_email = mysqli_real_escape_string($manu_email);
$manu_phone = mysqli_real_escape_string($manu_phone);
$manu_phone_ext = mysqli_real_escape_string($manu_phone_ext);
$manu_info = mysqli_real_escape_string($manu_info);
$query = "INSERT INTO pd_products
(manu_name,manu_web,manu_email,manu_phone,manu_phone_ext,manu_info)
VALUES ('$manu_name','$manu_web','$manu_email','$manu_phone','$manu_phone_ext','$manu_info')";
if (!mysqli_query($query,$con))
{
die('Error: ' . mysqli_error());
}
mysqli_close($con)
?>
感謝。私は単に投稿のアクションパスを変更しました。 JavaScriptを削除することで、フォームに必要なAjax機能が失われると思います。フォーム送信用のJavaScriptだけです。私はそれを試して、返信します。 – TheNally
私が疑うように、上記のjavascriptはajaxを開始し、フォームデータの処理方法のオプションを提供します。私の問題は、プラグインによってすでに正しく出力されているデータ文字列を送信し、それをデータベースに送信することです。 – TheNally
提出ボタンがフォームを提出しないとお考えでしたか?フォームが機能し、情報がデータベースに送信されない場合は、 "mysqli_query"関数を "mysql_query"関数に置き換えてみてください。そして、私は上記のように、エラーを引き起こす可能性のある「mysqli_query」関数を後方に持っていると信じています。http://php.net/manual/en/mysqli.query.php。また、エラーハンドラを使用すると、洞察が得られるかもしれません:http://www.w3schools.com/php/php_error.asp – squarephoenix