Question

我在尝试提交表单时遇到问题。我已经做了一个解决方法，以便通过使用隐藏按钮将输入发送到parse.com，该按钮在填写所有字段之前可见，然后隐藏此按钮并启用真实提交按钮。问题是我希望能够通过单击提交按钮直接提交表单，而无需单击两次按钮。我有以下HTML：

<form id="vcardForm" method="post" >
    <p>
        <input type="text" id="name" name="name" required />
    </p>
    <p>
        <input type="text" id="vorname" name="vorname" required />
    </p>
    <p>
        <input type="text" id="email1" name="email1"  required />
        <label id="atteken" >@</label>
        <input type="text" id="email2" name="email2 "  required />
        <textarea  id="fullemail" name="fullemail"></textarea>
            <p>
        <input type="text" id="telefon" name="telefon" onclick="getFullemail()"     />
    </p>
    <p>
        <input type="text" id="firma" name="firma" required />
    </p>
    <p>
       <input type="submit" id="submitBtn" onclick="functions()" value=" " disabled>
       <button type="button" id="submitKnop" onclick="validateForm()" ></button>

Javascript：

       <script type="text/javascript">
            function getFullemail() {
                document.getElementById('fullemail').value =
                        document.getElementById('email1').value + '@' +
                        document.getElementById('email2').value;
            }

</script>

<script>
function validateForm() {
var name = document.getElementById('name').value;
var vorname = document.getElementById('vorname').value;
var email = document.getElementById('fullemail').value;
var firma = document.getElementById('firma').value;
var telefon = document.getElementById('telefon').value;
if(name == '' || vorname == '' || email == '' || firma == '' || telefon == '' ) {

alert('Bitte alle Felder ausfüllen. Danke.');
e.preventDefault();
}else {
document.getElementById('submitKnop').style.visibility = 'hidden';
document.getElementById('submitBtn').disabled = false;
}
}
</script>
<script>
    function functions() {
        sendTheMail();

    }
</script>

Parse.com脚本

$(document).ready(function() {

    var parseAPPID = "bla";
    var parseJSID = "bla";

    Parse.initialize(parseAPPID, parseJSID);
    var VcardObject = Parse.Object.extend("VcardObject");

    $("#vcardForm").on("submit", function(e) {
        e.preventDefault();

        console.log("Handling the submit");
        //add error handling here
        //gather the form data

        var data = {};
        data.name = $("#name").val();
        data.vorname = $("#vorname").val();
        data.fullemail = $("#fullemail").val();
        data.telefon = $("#telefon").val();
        data.firma = $("#firma").val();

        var vcard = new VcardObject();
        vcard.save(data, {
            success:function() {
            openPage('danke');
                console.log("Success");
            },
            error:function(e) {
                console.dir(e);
            }
        });

    });

});

Answer 1

它将使您免于使用两个按钮。单击提交按钮时，检查是否填写了所有字段。使用&& operator而不是|| operator.因为您希望填写所有字段

if(name != '' && vorname != '' &&  email != '' &&  firma != '' && telefon != '' )

如果所有字段都已填写，它会提示一条消息，告知您表单已提交。否则它会提醒您填写所有字段

＆＃13;

function validateForm() {
var name = document.getElementById('name').value;
var vorname = document.getElementById('vorname').value;
var email = document.getElementById('fullemail').value;
var firma = document.getElementById('firma').value;
var telefon = document.getElementById('telefon').value;
if(name != '' && vorname != '' &&  email != '' &&  firma != '' && telefon != '' ) {

alert('form is sumbitted.');
e.preventDefault();
}else {
 alert('fill all fields !!');
}
}

＆＃13;

<form id="vcardForm" method="post" >
    <p>
        <input type="text" id="name" name="name" required />
    </p>
    <p>
        <input type="text" id="vorname" name="vorname" required />
    </p>
    <p>
        <input type="text" id="email1" name="email1"  required />
        <label id="atteken" >@</label>
        <input type="text" id="email2" name="email2 "  required />
        <textarea  id="fullemail" name="fullemail"></textarea>
            <p>
        <input type="text" id="telefon" name="telefon" onclick="getFullemail()"     />
    </p>
    <p>
        <input type="text" id="firma" name="firma" required />
    </p>
    <p>
       <input type="submit" id="submitBtn"  onclick="validateForm()" value=" submit " >

＆＃13;

Answer 2

如果我理解正确，您需要在提交表单后点击按钮，如果所有字段都有效，则应发送表单。如果是这样，您需要进行以下更改： 1）从html中删除

<input type="submit" id="submitBtn" onclick="functions()" value=" " disabled>

2）更改您的validateForm - 替换此行

document.getElementById('submitKnop').style.visibility = 'hidden';
document.getElementById('submitBtn').disabled = false;

带

functions()

Answer 3

修改validateForm

function validateForm() {
    var name = document.getElementById('name').value;
    var vorname = document.getElementById('vorname').value;
    var email = document.getElementById('fullemail').value;
    var firma = document.getElementById('firma').value;
    var telefon = document.getElementById('telefon').value;
    if(name == '' || vorname == '' || email == '' || firma == '' || telefon == '' ) {
        alert('Bitte alle Felder ausfüllen. Danke.');
        return false
    }
    return true
}

并替换

    console.log("Handling the submit");
    //add error handling here
    //gather the form data

与

if(!validateForm()) return
sendTheMail(...al your params here)

最后一步替换你的html

<input type="submit" id="submitBtn" onclick="functions()" value=" " disabled>
<button type="button" id="submitKnop" onclick="validateForm()" ></button>

与

<input type="submit" id="submitBtn" value=" ">

单击即可提交表单

3 个答案: