2016-12-31 1 views
0

두 개의 JavaScript 함수를 호출하는 데 폼에 두 개의 단추가 있습니다. 첫 번째 버튼은 onclick 이벤트에서 성공적으로 작동하지만 payroll() 함수는 성공적으로 호출되지만 두 번째 버튼은 submit 유형이며 양식 제출시 send() 함수를 호출하지 않습니다. 왜이 문제가 발생하는지 모르겠습니다.HTML onsubmit 이벤트가 JavaScript 함수를 호출하지 않습니다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 
<!DOCTYPE html> 
<html > 
<head> 
    <title>hr page</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script type="text/javascript" 
    src="/static/js/sijax/sijax.js"></script> 
    <script type="text/javascript"> 
    {{ g.sijax.get_js()|safe }}</script> 
    <link rel="stylesheet" href="{{url_for('static', filename='styles/signupcss.css')}}"> 

    <script type="text/javascript" > 
function payroll() { 
     var basic=document.forms["salary"]["bsalary"].value; 
     var empid=document.forms["salary"]["empid"].value; 
     var ta,hra,da,pf,netsalary,grosssalary; 
     if (empid == ""||basic == "") { 
     alert("Employee ID and Salary details must be filled out"); 
     return false; 
     } 
     if(isNaN(basic)) 
     {alert("Salary must be in Numbers"); 
     return false; 
     } 
     hra=basic*40/100; 
     da=basic*15/100; 
     pf=basic*12/100; 
     basic=parseInt(basic); 
     hra=parseInt(hra); 
     da=parseInt(da); 
     grosssalary=basic + hra + da; 
     ta=basic*6.2/100; 
     netsalary=grosssalary-ta; 



     document.getElementById("hra").innerHTML=hra; 
     document.getElementById("ta").innerHTML=ta; 
     document.getElementById("da").innerHTML=da; 
     document.getElementById("netsalary").innerHTML=netsalary; 
     document.getElementById("pf").innerHTML=pf; 


     document.getElementById("grosssalary").innerHTML=grosssalary; 
     window.alert("HI"+grosssalary); 
     return true; 


    } 
    function send() 
    { 
     var id = document.forms['salary']['empid'].value; 
     var basic = document.forms['salary']['bsalary'].value; 
     var hra = document.forms['salary']['hra'].value; 
     var da = document.forms['salary']['da'].value; 
     var ta = document.forms['salary']['ta'].value; 
     var pf = document.forms['salary']['pf'].value; 
     var gross_sal = document.forms['salary']['grosssalary'].value; 
     window.alert("HI"+gross_sal); 
     var net_sal = document.forms['salary']['netsalary'].value; 
     Sijax.request('send',[id, basic, hra, ta, da, pf, gross_sal, net_sal]); 

    } 

</script> 
</head> 
<body style="font-family:Lato"> 
    <div style="padding-left:5%;padding-top:0.2%;height:1%;width:100%;background-color:#11557c"> 
    <h2>Welcome to HR Department</h2><br> 
    </div> 
<div style="margin-left:15%" > 
    <h2>Name</h2> 
<form id="salary" name="salary" style="margin-top: 2%" method="post" onsubmit="return send()" > 
    <label id = "empid">Employee ID</label><br> 
    <input type = "text" name = "empid" placeholder = "Employee ID" /><br><br> 
    <label id = "bsalary">Basic Salary</label><br> 
    <input type = "text" name = "bsalary" placeholder = "Basic salary" /><br><br> 
    <input type="button" value="Calculate" onclick="return payroll()"><br><br> 

    <label for ="hra">House Rent Allowance(HRA)</label> 
    <p id="hra" name="hra"></p><br> 
    <label for ="ta">Travel Allowance(TA)</label> 
    <p id="ta" name="ta"></p><br> 
    <label for ="da"> Dearness Allowance(DA)</label> 
    <p id="da" name="da"></p><br> 
    <label for ="netsalary">Net Salary</label> 
    <p id="netsalary" name="netsalary"></p><br> 
    <label for ="pf">Provident Fund(PF)</label> 
    <p id="pf" name ="pf"></p><br> 
    <label for ="grosssalary">Gross Salary</label> 
    <p id="grosssalary" name="grosssalary"></p><br><br> 
    <input type="submit" value="Upload Salary"> 
</form> 
    </div> 




</body> 
</html> 
+1

코드에 몇 가지 오류가 있습니다. – Eddie

+0

제발 내가 sijax 요청에 대한 양식 제출에 어떤 영향을 주는지 설명해 주시겠습니까 –

답변

0

<p> 요소는 양식 요소와 같이 작동 할 수 없습니다. 각각 <input type="hidden"> 요소를 만들고 payroll()에 채우거나 단락의 .innerHtml 값을 가져올 수 있습니다.

P. 실제로 TypeError 예외가 발생하여 document.forms['salary']['grosssalary']과 같이 선언되지 않은 양식 요소가 호출됩니다.

+0

이유가 그것이 왜 내 sijax 요청이 감지되지 않았습니까? –

+0

예,이 코드에 연결할 수 없습니다. –

0

좋아, 빠른 수정, 당신이 때문에 jQuery를 아약스에 대한 파이썬 플라스크 라이브러리 Sijax을 사용하고 있기 때문에, 당신은 send 기능이처럼 자바 스크립트를 변경할 수 있습니다 :

function send(e){ 
     e.preventDefault(); //it is as good as returning 
          //false from the function in all cases 

     var id = document.forms['salary']['empid'].value; 
     ... 
} 

및처럼 onsubmit 핸들러 선언을 변경 이 :

<form id="salary" name="salary" style="margin-top: 2%" method="post" 
      onsubmit="return send(event)" > 

이벤트 체인 전파를 중지하면 fo의 수동 제출을 수행해야합니다. rm. 따라서 사용자의 기준에 따라 .preventDefault을 수행하도록 송신 기능을 수정할 수 있습니다. 그렇지 않으면 양식 제출

+0

내보기 기능이 sijax 요청을 감지하지 못하기 때문에 내 send 메소드의 sijax 요청이 처리되었는지 여부를 알아야합니다. –

0

이 코드를 스택 오버플로에서 코드 단편으로 실행하는 경우 코드가 실제로 작동합니다. 양식 제출 실제로 기본적으로 차단됩니다. codepen에서 코드를 실행 해보십시오. 나는 그것을 시도하고 실제로 일하고있다. http://codepen.io/jhonix22/pen/VPZagb

0

확인해보세요. 완벽한 솔루션은 아니지만 도움이된다고 생각합니다. 양식 입력 요소처럼 단락에 액세스 할 수 없습니다. 나는 Sijax가 무엇인지 완전히 모르고있다. 나는 그것이 CSRF 보안 필터의 일종으로 정상적인 AJAX HTTP 일 뿐이라고 믿는다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 
<!DOCTYPE html> 
<html> 
<head> 
    <title>hr page</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script type="text/javascript" 
      src="/static/js/sijax/sijax.js"></script> 
    <script type="text/javascript"> 
     { 
      { 
       g.sijax.get_js() | safe 
      } 
     }</script> 
    <link rel="stylesheet" href="{{url_for('static', filename='styles/signupcss.css')}}"> 

    <script type="text/javascript"> 
     function payroll() { 
      var basic = document.forms["salary"]["bsalary"].value; 
      var empid = document.forms["salary"]["empid"].value; 
      var ta, hra, da, pf, netsalary, grosssalary; 
      if (empid == "" || basic == "") { 
       alert("Employee ID and Salary details must be filled out"); 
       return false; 
      } 
      if (isNaN(basic)) { 
       alert("Salary must be in Numbers"); 
       return false; 
      } 
      hra = basic * 40/100; 
      da = basic * 15/100; 
      pf = basic * 12/100; 
      basic = parseInt(basic); 
      hra = parseInt(hra); 
      da = parseInt(da); 
      grosssalary = basic + hra + da; 
      ta = basic * 6.2/100; 
      netsalary = grosssalary - ta; 

      document.getElementById("hra").innerHTML = hra; 
      document.getElementById("ta").innerHTML = ta; 
      document.getElementById("da").innerHTML = da; 
      document.getElementById("netsalary").innerHTML = netsalary; 
      document.getElementById("pf").innerHTML = pf; 

      document.getElementById("grosssalary").innerHTML = grosssalary; 
      window.alert("HI" + grosssalary); 
      return true; 
     } 

     function send() { 
      var id = document.forms['salary']['empid'].value; 
      var basic = document.forms['salary']['bsalary'].value; 

      var hra = document.getElementById('hra').innerHTML; 
      var da = document.getElementById('da').innerHTML; 
      var ta = document.getElementById('ta').innerHTML; 
      var pf = document.getElementById('pf').innerHTML; 
      var gross_sal = document.getElementById('grosssalary').innerHTML; 
      window.alert("HI" + gross_sal); 
      var net_sal = document.getElementById('netsalary').innerHTML; 

      // I think you are missing something here. 
      Sijax.request('send', [id, basic, hra, ta, da, pf, gross_sal, net_sal]); 
     } 
    </script> 
</head> 
<body style="font-family:Lato"> 
<div style="padding-left:5%;padding-top:0.2%;height:1%;width:100%;background-color:#11557c"> 
    <h2>Welcome to HR Department</h2><br> 
</div> 
<div style="margin-left:15%"> 
    <h2>Name</h2> 
    <form id="salary" name="salary" style="margin-top: 2%" method="post" onsubmit="return false"> 
     <label id="empid">Employee ID</label><br> 
     <input type="text" name="empid" placeholder="Employee ID"/><br><br> 
     <label id="bsalary">Basic Salary</label><br> 
     <input type="text" name="bsalary" placeholder="Basic salary"/><br><br> 
     <input type="button" value="Calculate" onclick="return payroll()"><br><br> 

     <label for="hra">House Rent Allowance(HRA)</label><br> 
     <p id="hra" readonly name="hra"></p> 
     <label for="ta">Travel Allowance(TA)</label><br> 
     <p id="ta" readonly name="ta"></p> 
     <label for="da"> Dearness Allowance(DA)</label><br> 
     <p id="da" readonly name="da"></p> 
     <label for="netsalary">Net Salary</label><br> 
     <p id="netsalary" readonly name="netsalary"></p> 
     <label for="pf">Provident Fund(PF)</label><br> 
     <p id="pf" readonly name="pf"></p> 
     <label for="grosssalary">Gross Salary</label><br> 
     <p id="grosssalary" readonly name="grosssalary"></p><br> 
     <input type="button" onclick="send()" value="Upload Salary"> 
    </form> 
</div> 


</body> 
</html> 
+0

이것은 내 답변에서 정확히 무엇을 의미합니까? –

관련 문제