0

ここからいくつかの投稿とw3schoolsからいくつかの投稿を読みましたが、頭を悩ませることができないようです。

基本的に、2 つの日付の間にシステムにログインしたユーザーのリストをロードする必要があるページがあります。上司がログインし、そのグループ ID、dateto および datefrom を使用して、その期間中にログインしたすべてのユーザーを表示するドロップダウン リストを生成します。

これまでのところ、1 つの選択値を ajax によって呼び出された php に渡すことができましたが、複数の入力選択を「投稿」する方法を見つけることができません。

    <!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Operator Portal</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />


  <style type="text/css">
  .smallfont
        {
        font-size: 9px;
        }
  </style>
  <script>
  $(function() {
    $('.datepicker').datepicker({ minDate: -21, maxDate: "+1D" });
  });
  </script>
</head>

<body>


<form action="results.php" method="post" target="_blank" class="ui-dialog-content" title="Owner Operator Web Portal">

      <?php

include 'joomla-auth.php';

$name = JFactory::getUser() ->username;


?>

 <input type="hidden" name="operatorID" value="<?php echo $name; ?>">


<p><strong>To show job details select the Car Number and Date Range below :</strong></p>
<table width="374" border="0" cellpadding="1">
  <tr>
    <td width="93"><strong>Car Number:</strong></td>
    <td width="271"><select name="CarNumber" size="1" id="CarNumber" type="text">


    </td>
  </tr>
  <tr>
    <td><strong>Date From: </strong></td>
    <td><input type="text" class="datepicker" name="DateFrom" id="DateFrom" />
      <span class="smallfont">(date format: mm/dd/yyyy)</span></td>
  </tr>
  <tr>
    <td><strong>Date To:</strong></td>
    <td>
      <input type="text" class="datepicker"  name="DateTo" id="DateTo" />
      <span class="smallfont">(date format: mm/dd/yyyy)</span></td>

  </tr>
  <tr>
    <td height="50">&nbsp;</td>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="4">
      </table>
      <input name="Submit" type="submit" class="ui-buttonset" id="Submit" formaction="results.php" formmethod="POST" title="Submit" value="Submit">
<input name="Reset" type="reset" class="ui-buttonset" id="Reset" title="Clear All" value="Reset"></td>
  </tr>
</table>


</form>



</body>
</html>

私ができるようにしたいのは、前述の ajax 呼び出しによって入力される別のフォーム要素を追加することです

このように見えるはずだと思いますが、うまく機能させることができません。

<html>
<head>
<script>
function showUser() {
    // Retrieve values from the selects
    var u = document.getElementByID('DateFrom').value;
    var g = document.getElementByID('DateTo').value;

    if (u=="" || g=="") {
        document.getElementById("txtHint").innerHTML="";
        return;
    }

    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    } else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","getuser.php?u="+u+"&g="+g,true);
    xmlhttp.send();
}
</script>
</head>
<body>

<form>
        <div id="u">

    <input type="text" class="datepicker" name="DateFrom" id="DateFrom" />
  <span class="smallfont">(date format: mm/dd/yyyy)</span></td>

</div>
<div id="g">
    <input type="text" class="datepicker"  name="DateTo" id="DateTo" />
  <span class="smallfont">(date format: mm/dd/yyyy)</span></td>

</div>

</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html>

私は明らかに非常に明白な何かを欠いています。今、私は隠された「入力」をコードのこの 2 番目のセクションに入れていないことに気付きました。

ありがとう、マイケル

4

1 に答える 1

1

JavaScriptのスペルを間違えたようです

var u = document.getElementByID('DateFrom').value;
var g = document.getElementByID('DateTo').value;

「ID」は「ID」である必要があります。小文字の D. それを試してみてください - 何も渡されない理由はこれでしょう

var u = document.getElementById('DateFrom').value;
var g = document.getElementById('DateTo').value;

また、関数が呼び出されたときに DOM 要素が構築され、存在することを確認します。ページの最後に JS を配置すると役立ちます。

AJAX を理解するのに役立つもう 1 つのことは、getuser.php指定したように、コントローラー () が $_GET を介してその変数を受け取ることです。したがって、ボタンをクリックすると、AJAX 関数を呼び出して変数 ( u & g) を撃ち、コントローラーが を介してそれらを処理します$_GET。

コントローラーは出力を吐き出し、それが元のページに返されたものです。したがって、正しく解析できる形式で、好きなだけ多くの変数を含む文字列を単純にエコーすることができます。例えば：

getuser.php からの出力をエコーし​​ます。

echo $var1.'|'.$var2.'|'.$var3;

次に、元のページをさらに処理するか、次のものが必要です。

data = xmlhttp.responseText.split ( "|" );
var1 = data[0];

したがって、AJAX を使用する場合、従来の HTML フォームは必要ありません。Javascript 関数を使用して変数をコーディングするだけです。例えば：

<div id="fancyButton" onclick="sampleAJAXfunction(var1,var2,var3)"></div>

これが元の質問に役立つことを願っています。

于 2013-06-25T23:52:13.360 に答える