堆棧內存溢出
  簡體   English   中英

HTML onsubmit事件未調用JavaScript函數

[英]HTML onsubmit event is not calling the JavaScript function

 原文  2016-12-31 07:22:22  4   4    javascript/ html/ sijax

問題描述

我的表單中有兩個按鈕，用於調用兩個JavaScript函數。 第一個按鈕在其onclick事件中很好地調用了payroll()函數，效果很好，但是第二個按鈕的類型為Submit，並且從不在表單提交時調用send()函數。 我不知道為什么會發生這個問題。 

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

4 個解決方案

解決方案1
 0  2016-12-31 07:39:02

好吧，快速修復，因為您使用的是Ajax的python flask庫Sijax，因此是jQuery，因此您可以像這樣更改javascript 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)" >

請注意，當停止事件鏈傳播時，您將必須手動提交表單。 因此，您可以根據自定義條件將send函數修改為.preventDefault ，否則，讓表單提交

解決方案2
 0  2016-12-31 07:41:13

您的代碼實際上是有效的，如果您在堆棧溢出中以片段的形式運行此代碼，則默認情況下實際上阻止了表單提交。 嘗試在codepen運行代碼。 我嘗試過，它實際上正在工作。 http://codepen.io/jhonix22/pen/VPZagb

解決方案3
 0 已采納  2016-12-31 07:51:12

您不能像表單元素那樣使用<p>元素。 您可以創建相應的<input type="hidden">元素，並將其填充在payroll() ，或者通過.innerHtml獲取段落上的值。

PS：您實際上有一個TypeError異常，調用未聲明的表單元素，例如document.forms['salary']['grosssalary']等。

解決方案4
 0  2016-12-31 08:16:10

看一下這個。 它離完美解決方案還差得遠，但我認為它會有所幫助。 您無法像訪問表單輸入元素一樣訪問段落。 我不確定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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在onsubmit中調用javascript函數 HTML表單-通過onsubmit事件處理程序調用JavaScript HTML按鈕onClick偵聽器，調用HTML表單onSubmit javascript函數 JavaScript：Form onSubmit不調用函數 HTML Form onSubmit不調用javascript腳本 HTML 表單未調用 JS function onsubmit Javascript：調用函數onsubmit不會攔截參數 HTML Javascript onsubmit忽略了我的JavaScript函數 html onsubmit無法啟動Javascript函數 Javascript onchange事件阻止HTML表單中的onsubmit事件？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM