选择单选按钮时，为什么javascript代码不会出现在输入标记中？

Question

我的JavaScript代码的目的是在选择单选按钮时，它们出现在总输入中，当您错过字段并按提交时，它会提示您提示填写此特定字段。

我已多次尝试调试问题。但我不能破译它。我的代码有什么问题，我该如何纠正？

 <div class="signup">       
        <form id="form1" name="form1" action="" onsubmit="return false;">
                <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= "19.99" id="radio" onchange="ontotal()"></td>
        <td>Basic</td>
        <td>$<span >19.99</span></td>
        </tr>
        <tr>
        <td><input type="radio" name="offers" value= "35.99" id="radio1" onchange="ontotal()" ></td>
        <td>Premium</td>
        <td>$<span >35.99</span></td>
        </tr>
        <tr>
        <td><input type="radio" name="offers" value= "59.99" id="radio2" 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>
        <button type="submit" onclick="doall()">Submit</button>
        <p id="sub"></p>
        </form>


        </div>


    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; 
    }
    else{
        alert("Thank you for submission. But don't forget to select a program to purchase.")
    }
    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());

Answer 1

    <form id="form1" onsubmit="submit()">

                <label>First Name:</label>
                <input type="text" name="fname" id="fname" maxlength="12" placeholder="First Name" required>

                <br>

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

                <br>

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

                <br>

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

                <br>

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

                <br>

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

                <br>

                <label>Zip Code:</label>
                <input type="number" name="zipcode" id="zipcode" placeholder="Zip Code" required>

                <br>

                <label>Email:</label>
                <input type="email" name="email" id="email" maxlength="30" placeholder="Email Address"required>

                <br>

                <label>Password:</label>
                <input type="password" name="password" id="password" maxlength="20" placeholder="Password" required>

                <br>

                <label>Retype Password:</label>
                <input type="password" name="repass" id= "repass" maxlength="20" placeholder="Re-type Password" required>

                <br>

                <p><b>Choose the Program you would like to purhase:</b></p>

                <input type="radio" value="19.99" onclick="calculate()" name="offers" id="offers1">$<span >19.99</span></input>

                <input type="radio" value="35.99" onclick="calculate()" name="offers" id="offers2">$<span >35.99</span></input>

                <input type="radio" value="59.99" onclick="calculate()" name="offers" id="offers3">$<span>59.99</span></input>

                <br><br>

                <strong>Total:</strong>
                <input type="text" id="prototal" ref="total" maxlength="8">

                <br><br>

               <button type="submit" value="Submit">Submit</button>

</form>



        function calculate()
        {
         if(document.getElementById('offers1').checked) 
             {
               document.getElementById('prototal').value = document.getElementById('offers1').value;
             }
             else if(document.getElementById('offers2').checked)   
             {
               document.getElementById('prototal').value = document.getElementById('offers2').value;
             }
             else if(document.getElementById('offers3').checked)   
             {
               document.getElementById('prototal').value = document.getElementById('offers3').value;
             }
             else
             {
               alert("Please Check any of the offers");
               return false;
             }
        } 

        function submit()
        {
          console.info("hello");
        }

Answer 2

代码有几个问题，很难解决所有这些问题。我将指出最明显的问题。

JS数组不是关联数组

此代码不正确：

var programprices = new Array();
programprices["Basic"]=19.99;
programprices["Premium"]=35.99;
programprices["Super"]=59.99;

JS中的数组不是关联数组。要在JS中执行此操作，您需要创建一个具有属性名称的对象：

var programprices = {
    Basic: 19.99,
    Premium: 35.99,
    Super: 59.99
};

使用浮点值表示货币值

使用浮点值表示货币值不是一个好主意。您应该使用字符串而不是数字，或者将值缩放到最低的货币单位，例如美分。

如果您只是需要在帖子中提交一个值，并且不需要对该值进行任何数学运算：

var programprices = {
    Basic: '19.99',
    Premium: '35.99',
    Super: '59.99'
};

或者，如果您需要对价格进行数学运算，并且您的货币是每单位100个单位，如美分：

var programprices = {
    Basic: 1999,
    Premium: 3599,
    Super: 5999
};

整数可以精确表示，十分之一/等不能。

未将合理值传递给addEventListener

您附加事件处理程序的代码，调用函数并将其返回值传递给addEventListener。

替换此代码：

form.addEventListener('submit', formval());
form.addEventListener('submit', ontotal());
form.addEventListener('submit', caltotal());

用这个：

form.addEventListener('submit', formval);
form.addEventListener('submit', ontotal);
form.addEventListener('submit', caltotal);

请注意，函数本身会传递给addEventListener，而不是调用函数并将其返回值传递给addEventListener。

从提交处理程序返回奇怪的值

您的submit处理程序返回了奇怪的值。例如，调用ontotal的提交处理程序将获取返回给它的选定值。事件回调不应该返回字符串或数字。

为innerHTML分配函数

您将功能分配给presentme.innerHTML。您可能想要致电ontotal。

替换它：

function caltotal(){
    var price = ontotal;
    var presentme = document.getElementById('prototal')
    presentme.innerHTML = price
}

与

function caltotal(){
    var price = ontotal();
    var presentme = document.getElementById('prototal')
    presentme.innerHTML = price;
}

整体风格

使用onclick，onchange等被视为不良做法。他们要求您的处理程序是全球性的。全球职能并不理想。您的所有变量都是全局变量。任何其他错误的脚本都可能会意外地破坏您的变量或函数。您应该将代码范围限制在IIFE中以保护其免受其他代码的影响。

您的验证码实际上并未停止提交。您的提交事件处理程序应该采用一个通常名为event的参数，如果需要停止提交，则应调用event.preventDefault()。

Answer 3

此

var first = document.getElementById("fname")

将HTML元素（在您的案例文本字段中）分配给变量test。要将文本字段的值分配到first，

var first = document.getElementById("fname").value

Answer 4

就像约翰尼说的那样，你没有得到元素的价值，所以你可以在if语句中使用.value，如下所示：

if (first.value == ""){
    alert("Please enter first name");
    return false; 
}