两个步骤形式与模态窗口jquery + php

时间:2016-03-27 22:35:34

标签: php jquery forms modal-dialog

我只是学习php和js并试着让这一天工作......

以下是它应该如何:在填写表格之后按下按钮"显示模态"它显示带有输入字段的模态窗口。提交此表格后,表格+手机中的所有数据都将通过电子邮件发送。当所有输入字段都只是一个表单时,一切正常。但是当我以模态显示手机字段时,它会失败......

这是表格

<div class="form">   
        <form class="form-deal form-deal1" id="form-order-3" name="special-price">



            <input type="text" class="sqmeters" name="sqmeters" value="" />
    <label>Select option:</label>
                        <div class="selectWrap">
                            <select class="formSelect" name="filmtype">
                                <option>Option one</option>
                                <option>ТOption two</option>
                            </select>
                        </div>
    <label>Radio buttons</label>
                        <input type="radio" id="rb1" class="radio" name="regulator" value="r1"><label class="radioLabel" for="rb1">r1</label>
                        <input type="radio" id="rb2" class="radio" name="regulator" value="rb2"><label class="radioLabel" for="rb2">rb2</label>
                        <input type="radio" id="rb3" class="radio" name="regulator" value="rb3"><label class="radioLabel" for="rb3">rb3</label>



    <label>Options:</label>
                        <div class="selectWrap">
                            <select class="formSelect" name="mount">
                                <option>opt1</option>
                                <option>opt2</option>
                                <option>opt3</option>
                            </select>
                        </div>

<div class="modal">
<input class="step2 hidden" type="text" name="phone" maxlength="14" placeholder="Phone:" required="" />
                        <button type="submit" class="btn step2 hidden">Submit form</button>
<span class="message"></span>
</div>               

</form>

         <a class="btn topcalcbtn">Show modal</a>

和JS

$("form").submit(function(e){
    e.preventDefault();
});
$(document).on('click', '.form-deal .btn', function () {
    if ($(this).parent('form').find('input[name="phone"]').val().length>0 &&
 $(this).parent('form').find('input[name="sqmeters"]').val().length>0)          
        AjaxFormRequest($(this).parent('form').attr('id'),'../mail_order.php');
});

function AjaxFormRequest(form_id, url) {
    jQuery.ajax({
        url: url,
        type: "POST",
        dataType: "html",
        data: jQuery("#" + form_id).serialize(),
        success: function (response) { 
            $('#'+form_id+' .message').text("Thanks!");
             $('#'+form_id+' *:not(".message")').fadeOut(500);
            $('.overlay, .popup').delay(2000).fadeOut(500);
            $(window).attr('location','http://lp.tsk-energy.ru/thanx.html');
        },
        error: function (response) { 
            $('#'+form_id+' .message').text("Error");
        }
    });
}

任何帮助将不胜感激。提前谢谢!

0 个答案:

没有答案