Two-steps form with modal window jquery + php - php

Question

I'm just learning php and js and trying for a day to make this thing work...
Here's how it's supposed to be: after filling form you push button "Show modal" it shows modal window with input field. After submitting this form all the data from the form + phone from modal are send via email. When all input fields are simply in a form it all works fine. But when I show phone field in a modal it fails...
Here's the form
<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>
And the 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");
}
});
}
Any help would be appreciated. Thanks in advance!