6

私は JavaScript を初めて使用するので、知識が不足していることをご容赦ください。

お問い合わせフォームをコーディングしようとしていますが、訪問者が AJAX を使用して値を入力するとすぐに特定の入力テキスト フィールドに入力された値を取得し、それを PHP 文字列に渡して、値に基づいて関連情報を表示できるようにしたいと考えています。送信ボタンを押す前に入力してください。

jQueryを使用してそれを行うにはどうすればよいですか?

フォームに使用しているコードは次のとおりです。

<form method="post" action="">
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<input type="text" id="subject" name="subject" />
<input type="text" id="url" name="url" />
<input type="checkbox" id="showdetails" name="showdetails" /> Show URL Details
<input type="submit" value="Submit" />
</form>`

URL入力フィールドの値をphp文字列に渡す必要があります（ユーザーがshowdetailsチェックボックスをチェックするとすぐに）。これにより、URLに基​​づいて情報を表示するためにバックグラウンドで処理できます。

4

2 に答える 2

8

このhtmlを考えると：

<form method="post" action="">
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<input type="text" id="subject" name="subject" />
<input type="text" id="url" name="url" />
<input type="checkbox" id="showdetails" name="showdetails" /> Show URL Details
<input type="submit" value="Submit" />
</form>

jQuery (チェックボックス)

$(function() {
  $("showdetails").on("click",function() {
    var url = $("#url").val();
    if (url && $(this).is(":checked")) {
      $.get("relevantinfo.php",
        { "url": url },
        function(data){
          // do something with data returned
        }
      );
    }
    else {
      // clear relevant info here
    }
  });
});

受信側: AJAX 呼び出しから PHP への POST データの取得

于 2013-01-07T12:56:41.587 に答える
3

テキスト フィールドでonchangeイベントを使用して入力文字列を取得します。

参照: https://developer.mozilla.org/en-US/docs/DOM/element.onchange

次に、その文字列コンテンツを使用して、AJAX 関数を呼び出します。

function load(string) {
    var xmlhttp;
    if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "YOUR_URL", true);
    xmlhttp.send();
}

コメントで提案されているように、jquery + AJAX を使用してください。jqueryの場合、

$.ajax({
    url: 'ajax/test.html',
    success: function(data) {
        $('.divClass').html(data);
        alert('Load was performed.');
    }
});
于 2013-01-07T12:40:49.213 に答える