javascript - 一个表单怎么可能调用多个js函数呢？

Question

现在，当我运行这段代码时，表单的功能不会运行。为什么，我不确定。是不是因为我在 js 中放置了 doall() 函数。我这样做是专门为了告诉按钮标签这是最终运行的功能。将函数放在 1 个完整函数中是否被认为是错误的？我的 javascript 和 html 配对哪里出错了？我最终试图让表单的一部分通过警报进行验证，在选择 radio 后自动吐出一个给定的值，当您在填写所有内容后单击提交按钮时，它会创建该 var 符号。

<form name="form1" action="" onsubmit="return doall{};">
                    <label for="fname">First Name:</label>
                    <input type="text" name="fname" id="fname" size="12" placeholder="First Name">

                    <label for="lname">Last Name:</label>
                    <input type="text" name="lname" id="lname" size="12" placeholder="Last Name">

                    <label for="address">Address:</label>
                    <input type="text" name="address" id="address" size="40" placeholder="Address">

                    <label for="city">City:</label>
                    <input type="text" name="city" id="city" size="40" placeholder="City">

                    <label for="state">State:</label>
                    <input type="text" name="state" id="state" size="40" placeholder="State">

                    <label for="country">Country:</label>
                    <input type="text" name="country" id="country" size="40" placeholder="Country">

                    <label for="zipcode">Zip Code:</label>
                    <input type="text" name="zipcode" id="zipcode" placeholder="Zip Code">

                    <p><label for="email">Email:</label>
                    <input type="text" name="email" id="email" size="30" placeholder="Email Address"></p>

                    <label for="password">Password:</label>
                    <input type="password" name="password" id="password" size="20" placeholder="Password"> 

                    <p><label for="repass">Retype Password:</label>
                    <input type="password" name="repass" id= "repass" size="20" placeholder="Re-type Password"></p>
                <p><b>Choose the Program you would like to purhase:</b></p>
                <table align ="center">
            <tr>
            <td><input type="radio" name="offers" value= "Basic" id="chkbox" onchange="ontotal()"></td>
            <td>Basic</td>
            <td>$<span>19.99</span></td>
            </tr>
            <tr>
            <td><input type="radio" name="offers" value= "Premium" id="chkbox" onchange="ontotal()" ></td>
            <td>Premium</td>
            <td>$<span >35.99</span></td>
            </tr>
            <tr>
            <td><input type="radio" name="offers" value= "Super" id="chkbox" onchange="ontotal()"></td>
            <td>Super</td>
            <td>$<span >59.99</span></td>
            </tr>
            </table>
            <p>
            Total:
            <input type="text" id="prototal" size="8" value="0" >
            </p>
            </form>
            <button type="button" onclick="doall();">Submit</button>
            <p id="submit"></p>



    `  function formval() {
    var first = document.getElementById("fname")
    var second = document.getElementById("lname")
    var third = document.getElementById("address")
    var fourth = document.getElementById("city")
    var fifth = document.getElementById("state")
    var sixth = document.getElementById("country")
    var seventh = document.getElementById("zipcode")
    var fire = document.getElementById("email")
    var sense = document.getElementById("password")
    var retype = document.getElementById("repass")

    if (first == ""){
        alert("Please enter first name");
        return false; 
    }
    if (second == ""){
        alert("Please enter last name");
        return false; 
    }
    if (third == ""){
        alert("Please enter address");
        return false; 
    }
    if(fourth == ""){
        alert("Please enter city");
        return false; 
    }
    if (fifth == ""){
        alert("Please enter state");
        return false; 
    }
    if (sixth == ""){
        alert("Please enter county");
        return false; 
    }
    if (seventh == ""){
        alert("Please enter zip code");
        return false; 
    }
    if (fire == ""){
        alert("Please enter email address");
        return false; 
    }
    if (sense == ""){
        alert("Please enter a password");
        return false; 
    }
    if (retype == ""){
        alert("Please enter your typed password");
        return false; 
    }
    var sign = "Thank you for submission. Your purchase order instructions will be emailed shortly!";
    document.getElementById("sub").innerHTML = sign;
}
var programprices = new Array();
programprices["Basic"]=19.99;
programprices["Premium"]=35.99;
programprices["Super"]=59.99;

function ontotal(){
    var producttotal=0; 
    var calform = document.forms["form1"]
    var offers = calform.elements["offers"]
    for(var i = 0; i < offers.length; i++) 
    {
        if (offers[i].checked)
        {
            producttotal = programprices[offers[i].value];
            break;
        }
    }
    return producttotal; 
}
function caltotal(){
    var price = ontotal;
    var presentme = document.getElementById('prototal')
    presentme.innerHTML = price
}
function doall(){
        formval();
        ontotal();
        caltotal();

}
var form = document.getElementById('form1');
    form.addEventListener('submit', formval);
    form.addEventListener('submit', ontotal);
    form.addEventListener('submit', caltotal); `

https://jsfiddle.net/Lnehnkaz/

Answer 1

首先更正上述错误。

从另一个函数调用一些函数并没有错。如果您需要多个 submit 处理程序，请将提交按钮放在表单中，将其更改为 type="submit" 并使用 addEventListener 方法。

这有效，当你给表单属性 id="form1" 时:

var form = document.getElementById('form1');
form.addEventListener('submit', formval);
form.addEventListener('submit', ontotal);
form.addEventListener('submit', caltotal);