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

関数を次のように変更してみてください: (注: 残りの要素の 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 に答える
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 に答える