0

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?

halfer
  • 19,824
  • 17
  • 99
  • 186
Damien
  • 4,093
  • 9
  • 39
  • 52
  • Try this: `.clone(true)` – Iskandar Reza Aug 29 '18 at 20:47
  • that didn't work :\ – Damien Aug 29 '18 at 20:52
  • Does the cloned form have values filled in? Maybe you can manually post the serialized form data ... hmm wait, is it cloning the same form id? I think you cannot have the same id on two elements. – Iskandar Reza Aug 29 '18 at 20:56
  • Change `name="submit"` to something else. – Barmar Aug 29 '18 at 21:07
  • it does have the same ID, but that is why i'm submitting the closest form. How would i change the name of the cloned submit button? – Damien Aug 30 '18 at 02:20
  • i got it to work. I wouldn't say this was a duplicate AT ALL. different things going on, but in the end it was my hidden input..... it was named submit and for some reason that was causing an issue – Damien Aug 30 '18 at 14:00

0 Answers0