2

基本的に、私の HTML は次のようになります。

<form method="post" name="htmlform" onsubmit = "checkFields()">
  <table style="width: 479px;" border="30" cellspacing="3" cellpadding="10">
  <tbody>
  <tr>
  <td valign="top"><span id="firstNameSpan" >First Name *</span></td>
  <td valign="top"><input type="text" name="first_name" id="first_name"
                    size="30" maxlength="50" /></td>
  </tr>
  <tr>
  <td valign="top"><span id = "lastNameSpan" >Last Name *</span></td>
  <td valign="top"><input type="text" name="last_name" size="30" maxlength="50"/> 
      /td>
  </tr>
  <tr>
  <td style="text-align: center;" colspan="2"><input type="radio" name="sex" 
  value="male" /> Male <input type="radio" name="sex" 
  value="female" /> Female</td>
  </tr>
  <tr>
  <td style="text-align: center;" colspan="2"><input type="submit" value="submit" 
       /></td>
  </tr>
  </tbody>
  </table>
  </form>

フォームが送信されると、onsubmit() イベントは first_name テキストフィールドが空白かどうかをチェックします。空白の場合は、その左側のラベルまたはスパンが出力に追加されます。"first name*" + "you must enter a first name" など姓と性別。

問題は、テーブル内のテキストが appendchild で更新されないことです。ステートメントをデバッグ用のアラートに含めると、メッセージが追加されてから消えます。

onsubmit = "checkFields()" の JavaScript コードは以下のとおりです。

function checkFields() {
    var firstName = document.getElementById("first_name").value;
    var lastName = document.getElementById("last_name").value;
    if (firstName == "") {
        //<span style='color:red'> Please enter a first name </span>
        var nameHint = " Please enter a first name";
        var node = document.getElementById("firstNameSpan");
        //alert(node.appendChild(document.createTextNode(nameHint)) );
        //not working
        node.appendChild(document.createTextNode(nameHint));

    } if (lastName == "") {
        //additional code
    }
}

よろしくお願いします。また、JavaScript デバッガーはありますか?

よろしく

デビッド・D

4

2 に答える 2

0

html が正しくないため、サンプル コードが機能していないと思います。document.getElementById("last_name")undefined を返します。

http://jsfiddle.net/5E6my/1/

于 2012-11-16T16:55:21.860 に答える
0

エラーメッセージはデバッグには役立ちませんが、分割画面は非常に便利です。完成したコード (1) HTML (2) JavaScript は次のとおりです。

<form method="post" name="htmlform" onsubmit="return checkFields();">
  <table style="width: 479px;" border="30" cellspacing="3" cellpadding="10">
  <tbody>
  <tr>
  <td valign="top"><span id="firstNameSpan" >First Name *</span></td>
  <td valign="top"><input type="text" name="first_name" id="first_name"
                                            size="30" maxlength="50" /></td>
  </tr>
  <tr>
  <td valign="top"><span id = "lastNameSpan" >Last Name *</span></td>
  <td valign="top"><input type="text" name="last_name" id="last_name" size="30" 
  maxlength="50" /></td>
  </tr>
  <tr>
  <td style="text-align: center;" colspan="2" id = "sexMessage">
      Please select Male or Female*</td>
  </tr>
  <tr>
  <td style="text-align: center;" colspan="2"><input type="radio"
   name="sex" value="male" /> Male <input type="radio" name="sex"
  value="female" /> Female</td>
  </tr>
  <tr>
  <td style="text-align: center;" colspan="2"><input type="submit" value="submit"    
   /></td>
  </tr>
  </tbody>
  </table>
  </form>

フォームの送信ボタンの未入力フィールドに反応する JavaScript コードは次のとおりです: (このコードを簡単にする方法はありますか??)

window.checkFields = function()
  {
  var firstName = document.getElementById("first_name");
  var lastName = document.getElementById("last_name");
  if(firstName.value == "")
  {
  //<span style='color:red'> Please enter a first name </span>
    var nameHint = " *Please enter a first name ";
    var fnNode = document.getElementById("firstNameSpan");
    while(fnNode.firstChild)
    {
        fnNode.removeChild(fnNode.firstChild)
    }
    fnNode.appendChild(document.createTextNode(nameHint));
    fnNode.style.color="red";

  } else{
      var nameHint = " First Name *";
      var fnNode = document.getElementById("firstNameSpan");
      while(fnNode.firstChild)
      {
        fnNode.removeChild(fnNode.firstChild)
      }
      fnNode.appendChild(document.createTextNode(nameHint));
      fnNode.style.color="black";
  }
  if (lastName.value == "")
  {
  //additional code
    var nameHint = " *Please enter a last name";
    var lnNode = document.getElementById("lastNameSpan");
    while(lnNode.firstChild)
    {
        lnNode.removeChild(lnNode.firstChild)
    }
    lnNode.appendChild(document.createTextNode(nameHint));
    lnNode.style.color="red";
  } else{
      var nameHint = " Last Name *";
      var lnNode = document.getElementById("lastNameSpan");
      while(lnNode.firstChild)
      {
        lnNode.removeChild(lnNode.firstChild)
      }
      lnNode.appendChild(document.createTextNode(nameHint));
      lnNode.style.color="black";
  }
      var radios = document.getElementsByName("sex");
      var radioValue = ""
      for(var i=0; i<radios.length; i++)
      {
          if(radios[i].checked)
          {
              radioValue = radios[i].value;
          }

      }
      if(radioValue === "")
      {
          var sexNode = document.getElementById("sexMessage");
          var nameHint = "*You did not choose a sex";
          while(sexNode.firstChild)
          {
              sexNode.removeChild(sexNode.firstChild);
          }
          sexNode.appendChild(document.createTextNode(nameHint));
          sexNode.style.color="red";
      } else {
          var sexNode = document.getElementById("sexMessage");
          var nameHint = "Please select Male or Female*";
          while(sexNode.firstChild)
          {
              sexNode.removeChild(sexNode.firstChild);
          }
          sexNode.appendChild(document.createTextNode(nameHint));
          sexNode.style.color="black";
      }               
      return false;
  }

Yury が提案したように onsubmit="return checkfields()" を使用し、コード ブロックで window.checkFields = function() { などを使用するのがコツです。

私が持っている 1 つの質問は... JQuery の使用がはるかに簡単で、JQuery の前に JavaScript を学習していることです...代わりに JQUEry にスキップする必要があります。また、JQuery は AJAX フレームワークをサポートしていますか?

とても有難い

デビッド

于 2012-11-16T20:14:43.730 に答える