HTML-onsubmit-Ereignis ruft die JavaScript-Funktion nicht auf

Ich habe zwei Schaltflächen in meinem Formular zum Aufrufen von zwei JavaScript-Funktionen. Die erste Schaltfläche funktioniert gut in seinem onclick-Ereignis, das die payroll()-Funktion erfolgreich aufruft, aber die zweite Schaltfläche ist vom Typ Senden und ruft nie die send()-Funktion beim Senden von Formularen auf. Ich weiß nicht, warum dieses Problem auftritt.HTML-onsubmit-Ereignis ruft die JavaScript-Funktion nicht auf

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

Quelle

2016-12-31 Gautham Pughaz

Sie haben mehrere Fehler in Ihrem Code. – Eddie

Können Sie bitte erklären, wie es meine Formularübergabe auf eine Sijax-Anfrage betrifft –

Sie können nicht mit <p> Elemente wie als Formularelemente handeln. Sie können entsprechende <input type="hidden"> Elemente erstellen und sie in payroll() ausfüllen oder Werte von .innerHtml für Absätze abrufen.

P.S. Sie haben tatsächlich eine TypeError-Ausnahme, die nicht deklarierte Formularelemente wie document.forms['salary']['grosssalary'] usw. aufruft.

Quelle

2016-12-31 07:51:12

Ist das der Grund Warum wurde meine Sijax-Anfrage nicht erkannt? –

Ja, dieser Code ist nicht erreichbar. –

in Ordnung, schnelle Lösung, da Sie Python Kolben Bibliothek Sijax für Ajax und daher jQuery verwenden, können Sie Ihre Javascript send Funktion wie folgt ändern:

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

und Ihre onsubmit Handler Erklärung ändern wie dies:

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

bitte beachten Sie, dass, wenn Sie die Ereigniskette Ausbreitung zu stoppen, werden Sie eine manuelle Übermittlung des fo zu tun haben, rm. So können Sie Ihre Sendefunktion zu tun .preventDefault basierend auf Ihren benutzerdefinierten Kriterien ändern, ansonsten lassen Sie das Formular senden

Quelle

2016-12-31 07:39:02

Ich muss wissen, ob die Sijax-Anfrage in meiner send-Methode verarbeitet wurde oder nicht, weil meine View-Funktion keine Sijax-Anfrage erkennt –

Ihr Code funktioniert tatsächlich, wenn Sie diesen Code als ein Schnipsel hier im Stapelüberlauf ausführen, Formularübergabe ist eigentlich standardmäßig blockiert. Versuchen Sie, Ihren Code in codepen auszuführen. Ich habe es versucht und es funktioniert tatsächlich.

Quelle

2016-12-31 07:41:13 Roljhon

Überprüfen Sie dies. Es ist nicht annähernd eine perfekte Lösung, aber ich denke, es hilft. Sie können nicht auf die Absätze zugreifen, als würden Sie die Formulareingabeelemente verwenden. Ich bin mir nicht ganz sicher, was Sijax ist. Ich glaube, es ist nur eine normale AJAX-HTTP-Sache mit einigen CSRF-Sicherheitsfiltern.

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

Quelle

2016-12-31 08:16:10 Eddie

Genau das meine ich in meiner Antwort ... –

HTML-onsubmit-Ereignis ruft die JavaScript-Funktion nicht auf

Antwort

Verwandte Themen