1

希望这是基本的 JavaScript，因为我是新手，所以答案很简单。我只想确保在用户继续之前所有必填字段都不为空。在我<form> action = payment.php的和提交按钮中包含onclick="insert();"当 child_name 留空时，它只是进入下一页而不是警报。这是代码：

    <script type="text/javascript">
    function insert() {
        if (window.XMLHttpRequest) {
            xmlhttp = new XLMHttpRequest();
        } else {
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        }



        cn1 = 'child_name'+document.getElementById('child_name').value;
        ag2 = 'age'+document.getElementById('age').value;
        hm3 = 'hometown'+document.getElementById('hometown').value;
        bg4 = 'boy_girl'+document.getElementById('boy_girl').value;
        fn5 = 'first_name'+document.getElementById('first_name').value;
        ln6 = 'last_name'+document.getElementById('last_name').value;
        email = 'email'+document.getElementById('email').value;
        ad8 = 'address1'+document.getElementById('address1').value;
        ad9 = 'address2'+document.getElementById('address2').value;
        ct10 = 'city'+document.getElementById('city').value;
        st11 = 'state'+document.getElementById('state').value;
        zp12 = 'zip'+document.getElementById('zip').value;

        if (cn1.equals("")) {


        xmlhttp.open('POST', 'payment.php', true);
        xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12); 
        } else {
        alert ("Please enter all required fields.");
        }
    }
</script>
4

3 回答 3

2

这里有几个问题：

cn1 = 'child_name'+document.getElementById('child_name').value;

在这种情况下，您将 cn1 分配给字符串'child_name'+ 您的 child_name 文本框的值...它永远不会等于空字符串。

其次，您希望您的insert()方法返回false错误以停止按钮的预期操作。

于 2012-10-19T13:58:19.090 回答
1

如果我是你，我会给这些元素中的每一个一个通用名称或一个类。

例如：

<input id="child_name" class="not_blank" type="text">
<input id="age" class="not_blank" type="text">
<input id="hometown" class="not_blank" type="text">

由于您将所有这些元素按类分组。

然后你的javascript会容易得多：

var flagInvalid = false;
var tempArray = document.getElementsByClassName("not_blank");
for (var i = 0; i < tempArray.length; i++)
{
    if (tempArray[i].value == "" || tempArray[i].value === undefined || tempArray[i].value == null){
        flagInvalid = true;
        break; 
    }
}

if (flagInvalid == false){
    xmlhttp.open('POST', 'payment.php', true);
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12); 

} else { alert ("Please enter all required fields."); }

顺便说一句，我强烈建议不要使用“警报”。尝试在文档本身上创建一个消息传递系统。喜欢：

<span id="log" class="hidden" style="color:red"><b>"Please enter all required fields." <b></span>

你的 CSS 看起来像这样：

.hidden { display: none; }
.show { display: inline; }

您的 javascript 将更改为：

if (flagInvalid == false){
    var log = document.getElementById("log");
    log.className = 'hidden';
    xmlhttp.open('POST', 'payment.php', true);
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12); 

} else { 
    var log = document.getElementById("log");
    log.className = 'show';
}
于 2012-10-19T14:13:28.427 回答
1

尝试将函数更改为：（注意：您必须在 if 子句中为其余元素添加更多测试）

function insert() {
    if (window.XMLHttpRequest) {
        xmlhttp = new XLMHttpRequest();
    } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }


    if (document.getElementById('child_name').value === '' ||
        document.getElementById('age').value === '' || 
        ...more tests... || 
        document.getElementById('zip').value === '') {
        alert ("Please enter all required fields.");
        return false;
    } else {
        cn1 = 'child_name'+document.getElementById('child_name').value;
        ag2 = 'age'+document.getElementById('age').value;
        hm3 = 'hometown'+document.getElementById('hometown').value;
        bg4 = 'boy_girl'+document.getElementById('boy_girl').value;
        fn5 = 'first_name'+document.getElementById('first_name').value;
        ln6 = 'last_name'+document.getElementById('last_name').value;
        email = 'email'+document.getElementById('email').value;
        ad8 = 'address1'+document.getElementById('address1').value;
        ad9 = 'address2'+document.getElementById('address2').value;
        ct10 = 'city'+document.getElementById('city').value;
        st11 = 'state'+document.getElementById('state').value;
        zp12 = 'zip'+document.getElementById('zip').value;

        xmlhttp.open('POST', 'payment.php', true);
        xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12); 
    }
}
于 2012-10-19T14:03:06.697 回答