Question

我有以下问题：

需要使用一个按钮提交的2个表单。我将解释它应该如何工作。当然，我的代码到目前为止。

#frmOne包含一个url字段，我需要将数据复制到我的#frmTwo，这是有效的。（它强迫访问者使用www。而不是http：// etc）

当我按下1提交按钮时

验证字段#frmOne（现在只有url工作，其他人需要帮助）

调用#frmTwo并在iframe中显示结果。结果显示进度条（工作）   但欢迎除了iframe之外的Div，模态或任何其他解决方案。

关闭#frmOne（不起作用）

最后进程（提交）#frmOne如果#frmTwo完成（不起作用）

在iframe =

中处理完成的#frmTwo代码

<div style='width' id='information'>Process completed</div>

<ol class="forms">
<iframe width="100%" height="50" name="formprogress" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
<div id="txtMessage"></div>
</ol>

<div id="hide-on-submit">
<form id="frmOne" method="post">
<input type="text" name="company" id="company" >
<input type="text" name="url" id="url" >
<input type="text" name="phone" id="phone" >
<input type="text" name="occupation" id="occupation" >
<textarea rows="20" cols="30" name="summary" id="summary" >
<button type="submit" class="btn btn-danger">Submit</button>
</form>
</div>

<form id="frmTwo" method="post" target="formprogress"></form>

<script>
jQuery(document).ready(function(){  

    //Cache variables
    var $frmOne             = $('#frmOne'),     
        $frmTwo             = $('#frmTwo'),
        $txtMessage         = $('#txtMessage'),
        frmTwoAction        = 'http://www.mydomainname.com/form.php?url=';

    //Form 1 sumbit event
    $frmOne.on('submit', function(event){
        event.preventDefault();

        var strUrl = $frmOne.find('#url').val();

        //validation
        if(strUrl === ''){

            $txtMessage.html('<b>Missing Information: </b> Please enter a URL.'); 
        }        
        else if(strUrl.substring(0,7) === 'http://'){
            //Clear field
            $frmOne.find('#url').val('');            
            $txtMessage.html('<b>http://</b> is not supported!');            
        }
        else if(strUrl.substring(0,4) !== 'www.'){
             //Clear field
            $frmOne.find('#url').val('');            
            $txtMessage.html('<b>Invalid URL</b> Please enter a valid URL!'); 
        }
        else{
           //set form action and submit form
           $frmTwo.attr('action', frmTwoAction +  strUrl).submit();

  $('#hide-on-submit').hide(0).fadeIn(1000);
    $('form#frmOne').submit(function(e) {

        $(this).hide(1000);

            return true; // let form one submit now!
        }   

       return false;

    }); 

});
</script>

Answer 1

在这里阅读https://api.jquery.com/jQuery.ajax/。基本上你需要用$ .ajax提交第一个，然后，当你得到服务器响应时（在success（）函数中）你需要发送第二个表单，再次宽度ajax（）。

类似的东西：

$form1.on('submit', function(e) {
    e.preventDefault(); //don't send the form yet
    $.ajax(
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize()
    ).success(function(data) {
        alert('form one sent');
        $.ajax(
            url: $('#form2').attr('action'),
            type: $('#form2').attr('method'),
            data: $('#form2').serialize()
        ).success(function(data) {
            alert('form two sent');
        })
    });
});

此代码尚未准备好进行复制/粘贴，它只是为您提供了解决方法的指导。这是一个很大的问题，请尝试使用此解决方案，如果您发现自己被阻止，请回答较小的问题。

在表单2完成后，使用1个按钮提交2个表单，form1

1 个答案: