1

素晴らしいサイト、素晴らしい貢献者の皆様、よろしくお願いします。

(暴言) > 72 時間、髪の毛が 50% 減少、グーグルで「.ajax 簡単な例」 = Web に簡単で実用的な例はありません - :-)(/rant)

フォームからデータを収集し、そのデータを javascript ルーチンに渡し、DB に書き込む php ファイルを起動します。すべてが非常にうまく機能します-これは単純で機能するスクリプトです:

<script type="text/javascript">
$(document).ready(function(e) {
$("#submitbutton").click(function() {

var ln = 'DaVinci';
var fn = 'Leonardo';
$.ajax({
        type: "POST",
        url: "testbackendinsert.php",
        data: {lastname: ln, firstname: fn}
       })
        .done( function( msg ) {alert( "Data Saved: " + msg );});

});
});     
</script>

任意の文字列を ln および fn 変数に入れることができ、データは最終的に db になります。

フォームを入力すると (EASY、1 つの入力、1 つのボタン):

<form><table>
<tr><td>First Name</td><td><input type="text" id="fn" name="FirstName"></td></tr> 
<tr><td colspan="2"><input type="submit" id="submitbutton" value="Submit" /></td></tr>
</table></form>

ラインを使用する

var ln = document.getElementById("fn");

var ln = "Somedudesname"; の代わりに 動作しない、またはクラッシュする (はい、クラッシュする、ハングする) IE (閉じて再度開く必要があります)。("fn")、('fn')、(#fn)、('#fn')、("#fn") を試しましたが、うまくいきませんでした。それは些細なことだと確信しています（常にそうです）-何が欠けていますか？

どうもありがとう！

コード全体は次のとおりです。

HTML/JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<title>test ajax frontend</title>

<style>
#divtest {
    width:40%;
    background-color:#C1C1FD;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    margin-top:5%;
    font-size:16px;
    line-height:16px;
    border: 20px solid #FCD1E3;}
</style>
</head>

<body>

<div id="divtest">
<form>
<table>
<tr><td>First Name:</td><td><input type="text" id="fn" name="FirstName"></td></tr>
<tr><td>Last Name:</td><td><input type="text" id="ln" name="FirstName"></td></tr>
<tr><td>Zip code:</td><td><input type="text" id="zp" name="FirstName"></td></tr> 
<tr><td colspan="2"><input type="submit" id="submitbutton" value="Submit" /></td></tr>
</table>
</form>
</div>

<script type="text/javascript">
$(document).ready(function(e) {
$("#submitbutton").click(function() {

var ln = document.getElementById("ln").value;
var fn = document.getElementById("fn").value;
var zp = document.getElementById("zp").value;
$.ajax({
        type: "POST",
        url: "testbackendinsert.php",
        data: {lastname: ln, firstname: fn, zip: zp}
       })
        .done( function( msg ) {alert( "Data Saved: " + msg );});

});
});     
</script>

<!--
document.getElementById("fn")
document.getElementById("ln")
-->

</body>

そして、ここに db に書き込む php があります。

<?php
echo "<title>Read db table.php</title>";

$ln = $_POST['lastname'];
$fn = $_POST['firstname'];
$z = $_POST['zip'];

$host = "name of host";
$user = "username";
$password = "password";
$dbname = "dbname";

$cxn = mysqli_connect($host,$user,$password,$dbname);
if (mysqli_connect_errno()) {echo "No connection" . mysqli_connect_error();}
echo "connection made";

$query = "INSERT INTO testtable (lastname, firstname, zip) VALUES ('$ln', '$fn', '$z')";

$result = mysqli_query($cxn, $query) or die ("No query");
mysqli_close($cxn);
?>

みなさん、ハッピーコーディング！そして、ありがとう！

4

2 に答える 2

8

おそらく、その要素の値を取得したいでしょう:

var ln = document.getElementById("fn").value;

またはjQueryで：

var ln = $("#fn").val();
于 2013-04-14T00:27:54.623 に答える
2

私はあなたが探していると思います：

var ln = document.getElementById("fn").value

入力の値を取得します。.getElementById()要素自体のみを var に格納し、value プロパティには格納しません。

于 2013-04-14T00:31:10.367 に答える