I have a form that I am cloning to another part of the page for mobile versions of the site. I'm trying to have one submit function work for both. Currently it works for the original form but not for the cloned form. Not sure what's going on. Here's my code:
HTML:
<div class="form-box-container">
<div class="form-box">
<div class="lets-go">Let's get started</div>
<form action="process.php" name="form" id="form" method="get">
<input type="text" name="fName" id="fName" placeholder="Name" class="text" />
<input type="email" name="email" id="email" placeholder="Email" class="text" />
<input type="text" name="phone" id="phone" placeholder="Phone" class="text" />
<textarea name="comments" rows="10" class="text" id="comments" placeholder="Tell us about your project"></textarea>
<input type="submit" name="btn-submit" id="btn-submit" class="btn-submit" value="Submit" />
<input type="hidden" name="submit" id="submit" value="true" />
</form>
</div>
</div>
<div class="mobile-form"></div>
jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
$('.form-box-container').clone().appendTo('.mobile-form');
$(document).on('click','.btn-submit',function(e){
e.preventDefault();
var fName = $(this).siblings('input[name=fName]').val();
var email = $(this).siblings('input[name=email]').val();
var phone = $(this).siblings('input[name=phone]').val();
var comments = $(this).siblings('input[name=comments]').val();
if(fName==''){
alert('Please enter your name');
return false;
}
if(email==''){
alert('Please enter your email');
return false;
}
if(phone==''){
alert('Please enter your phone');
return false;
}
$(this).closest('form').submit();
});
});
</script>
What can I try next?