자바 스크립트 확인 및 동적으로 버튼이

Question

은 기본적으로 내 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> 

, FIRST_NAME 텍스트 필드는 경우, 빈 태그의 onsubmit() 이벤트를 확인하는 경우 그러면 왼쪽에 레이블 또는 범위가 추가되어 "이름 *"+ "성을 입력해야합니다"라는 출력과 성 및성에 유사하게 출력됩니다.

문제는 테이블의 텍스트가 appendchild로 업데이트되지 않는다는 것입니다. 디버깅을 위해 경고 문구를 동봉하면 메시지가 추가되어 사라집니다.

아래 JavaScript 코드는 onsubmit = "checkFields()"에 대한 것입니다. 사전에

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 
    } 
} 

덕분에, 당신의 도움이 많이 감사합니다. 자바 스크립트 디버거도 있습니까?

안부

데이비드 D

Answer 1

나는 당신의 샘플 코드가 잘못 HTML로 인해 작동하지 않습니다 생각합니다. document.getElementById("last_name")은 정의되지 않은 값을 반환합니다.

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

Answer 2

모두 감사합니다, 임 JFiddle의 밧줄을 받고 분할 화면 오류 메시지가 디버깅에 유용 아니지만 매우 유용합니다. 다음은 완성 된 코드 (1) HTML (2) 자바 스크립트입니다.

<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> 

형태로 태그의 onsubmit 버튼의 채워지지 않은 필드에 반응하는 자바 스크립트 코드는 다음과 같습니다

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() 등을 사용합니다.

내가 가진 한 가지 질문은 JQuery를 사용하는 것이 훨씬 간단하다는 것입니다. 전에 JQuery ... 대신 Jquery로 건너 뛸해야합니다. 또한 JQuery는 AJAX 프레임 워크를 지원합니까?

많은`추가 code`에서