单选按钮值未传递给变量并停止提交

Question

我在这里查看了其他单选按钮问题，并且无法解决为什么我的单选按钮值没有传递给变量或为什么它停止提交。

当我注释掉与“pet”相关的脚本/标记/ php时，提交发生了，我可以在我的地址栏中看到查询字符串，但当我在其中发表评论时没有做任何事情，没有错误，只是什么都不做。

违规脚本

var radio = document.getElementsByName('pet');

        for (var i = 0, length = radio.length; i < length; i++) {
            if (radio[i].checked) {
            // do whatever you want with the checked radio
                var pet = (radio[i].value);

        // only one radio can be logically checked, don't check the rest
        break;
    }
}

整个脚本

function validateFormOnSubmit(contact) {
    reason = "";
    reason += validateName(contact.name);
    reason += validateEmail(contact.email);
    reason += validatePhone(contact.phone);
    reason += validatePet(contact.pet);
    reason += validateNumber(contact.number);
    reason += validateDisclaimer(contact.disclaimer);

    console.log(reason);
    if (reason.length > 0) {

        return false;
    } else {
        alert("Test alert"); // Show some loading image and submit form
        submitFormAjax();
    }
}

// validate required fields
function validateName(name) {
    var error = "";

    if (name.value.length == 0) {
        name.style.background = 'Red';
        document.getElementById('name-error').innerHTML = "The required field has not been filled in";
        var error = "1";
    } else {
        name.style.background = 'White';
        document.getElementById('name-error').innerHTML = '';
    }
    return error;
}

// validate email as required field and format
function trim(s) {
    return s.replace(/^\s+|\s+$/, '');
}

function validateEmail(email) {
    var error = "";
    var temail = trim(email.value); // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/;
    var illegalChars = /[\(\)\<\>\,\;\:\\\"\[\]]/;

    if (email.value == "") {
        email.style.background = 'Red';
        document.getElementById('email-error').innerHTML = "Please enter an email address.";
        var error = "2";
    } else if (!emailFilter.test(temail)) { //test email for illegal characters
        email.style.background = 'Red';
        document.getElementById('email-error').innerHTML = "Please enter a valid email address.";
        var error = "3";
    } else if (email.value.match(illegalChars)) {
        email.style.background = 'Red';
        var error = "4";
        document.getElementById('email-error').innerHTML = "Email contains invalid characters.";
    } else {
        email.style.background = 'White';
        document.getElementById('email-error').innerHTML = '';
    }
    return error;
}

// validate phone for required and format
function validatePhone(phone) {
    var error = "";
    var stripped = phone.value.replace(/[\(\)\.\-\ ]/g, '');

    if (phone.value == "") {
        document.getElementById('phone-error').innerHTML = "Please enter a phone number";
        phone.style.background = 'Red';
        var error = '6';
    } else if (isNaN(parseInt(stripped))) {
        var error = "5";
        document.getElementById('phone-error').innerHTML = "The phone number contains illegal characters.";
        phone.style.background = 'Red';
    } else if (stripped.length < 10) {
        var error = "6";
        document.getElementById('phone-error').innerHTML = "The phone number is too short.";
        phone.style.background = 'Red';
    } else {
        phone.style.background = 'White';
        document.getElementById('phone-error').innerHTML = '';
    }
    return error;
}

function validatePet(pet) {
    if ((contact.pet[0].checked == false) && (contact.pet[1].checked == false) && (contact.pet[2].checked == false)) {
        document.getElementById('pet-error').innerHTML = "Pet required";
        var error = "2";
    } else {
        document.getElementById('pet-error').innerHTML = '';
    }
    return error;
}

function validateNumber(number) {
    var num = document.forms["contact"]["number"];
    var y = num.value;
    if (!isNaN(y)) {

        //alert('va');

        if (y < 1 || y > 50) {
            //Wrong
            number.style.background = 'Red';
            document.getElementById("number-error").innerHTML = "Must be between 1 and 50.";
            var error = "10";
        } else {
            //Correct
            number.style.background = 'White';
            document.getElementById("number-error").innerHTML = "";
        }
        return error;
    } else {
        document.getElementById("number-error").innerHTML = "Must be a number.";
        var error = "3";
    }
    return error;
}

function validateDisclaimer(disclaimer) {
    var error = "";

    if (document.getElementById("disclaimer").checked === false) {
        document.getElementById('disclaimer-error').innerHTML = "Required";
        var error = "4";
    } else {
        document.getElementById('disclaimer-error').innerHTML = '';
        var disclaimer = document.getElementById("disclaimer").checked;
    }
    return error;
}

function submitFormAjax() {
    var xmlhttp= window.XMLHttpRequest ?
        new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            alert(xmlhttp.responseText); // Here is the response
    }

    var name = document.getElementById('name').innerHTML;
    var nickname = document.getElementById('nickname').innerHTML;
    var email = document.getElementById('email').innerHTML;
    var number = document.getElementById('number').innerHTML;
    var radio = document.getElementsByName('pet');

        for (var i = 0, length = radio.length; i < length; i++) {
            if (radio[i].checked) {
            // do whatever you want with the checked radio
                var pet = (radio[i].value);

        // only one radio can be logically checked, don't check the rest
        break;
    }
}

    xmlhttp.open("GET","form.php?name=" + name + "&nickname=" + nickname + "&email=" + email + "&phone=" + phone + "&pet=" + pet + "&number=" + number + "&disclaimer=" + disclaimer, true);
    xmlhttp.send();
}

HTML

<form id="contact" name="contact" onsubmit="return validateFormOnSubmit(this)" action="form.php" method="get">
    <div>
        <label>First Name</label>
        <input placeholder="First Name" type="text" name="name" id="name" tabindex="1" autofocus />
        <div id="name-error" class="error"></div>
    </div>
    <div>
        <label>Nickname</label>
        <input placeholder="Nickname" type="text" name="nickname" id="nickname" tabindex="2" autofocus />
    </div>
    <div>
        <label>Email</label>
        <input placeholder="Email" type="email" name="email" id="email" tabindex="3" autofocus />
        <div id="email-error" class="error"></div>
    </div>
    <div>
        <label>Phone</label>
        <input placeholder="Phone" type="tel" name="phone" id="phone" tabindex="4" autofocus />
        <div id="phone-error" class="error"></div>
    </div>
    <div>
        <label>I prefer</label>
        <input type="radio" name="pet" id="Dogs" tabindex="5" autofocus />Dogs
        <input type="radio" name="pet" id="Cats" tabindex="6" autofocus />Cats
        <input type="radio" name="pet" id="Neither" tabindex="7" autofocus />Neither
        <div id="pet-error" class="error"></div>
    </div>
    <div>
        <label>My favorite number between 1 and 50</label>
        <input placeholder="Favorite number between 1 and 50" type="text" name="number" id="number" tabindex="8" autofocus />
        <div id="number-error" class="error"></div>
    </div>
    <div>
        <label>Disclaimer</label>
        <input type="checkbox" name="disclaimer" id="disclaimer" tabindex="9" autofocus />I confirm that all the above information is true.
        <div id="disclaimer-error" class="error"></div>
    </div>
    <div>
        <button type="submit" name="submit" id="submit" tabindex="10">Send</button>
    </div>
</form>

PHP

<?php
$name = $_GET['name'];
$nickname = $_GET['nickname'];
$email = $_GET['email'];
$phone = $_GET['phone'];
$pet = $_GET['pet'];
$number = $_GET['number'];
$disclaimer = $_GET['disclaimer'];
$from = 'From: Test From'; 
$to = 'euteneier@gmail.com'; 
$subject = 'Hello';
$message = "This is a message.";

if ($_GET['submit']) {               
    if (mail ($to, $subject, $message)) { 
        echo '<p>Your message has been sent!</p>';
} else { 
    echo '<p>Something went wrong, go back and try again!</p>'; 
} 
}
?>

谢谢！

Answer 1

您需要在单选按钮中添加value="Dog\cat\etc"属性，如果您发布表单，该属性将被发送。

Answer 2

我在@ToniAlmeida的帮助下找到答案。它需要

var error = "";

添加到validatePet（）函数

相关脚本：

function validatePet(pet) {
    var error = "";

    if ((contact.pet[0].checked == false) && (contact.pet[1].checked == false) && (contact.pet[2].checked == false)) {
        document.getElementById('pet-error').innerHTML = "Pet required";
        var error = "2";
    } else {
        document.getElementById('pet-error').innerHTML = '';
    }
    return error;
}

var radio = document.getElementsByName('pet');

        for (var i = 0, length = radio.length; i < length; i++) {
            if (radio[i].checked) {
            // do whatever you want with the checked radio
                var pet = (radio[i].value);

        // only one radio can be logically checked, don't check the rest
        break;
    }
}

xmlhttp.open("GET","form.php?name=" + name + "&nickname=" + nickname + "&email=" + email + "&phone=" + phone + "&pet=" + pet + "&number=" + number + "&disclaimer=" + disclaimer, true);

我希望这有助于其他人。