Deciding between form confirmation methods

2019-08-29 09:17发布

So I originally wanted to create a form that generated a lightbox ON successful submission of the form data saying thanks for submitting the form but I read that just taking the user to a thank you page was the safest and most assuring way for the user to be notified is with that classic method stated earlier. IF using the fancy box proves effective how exactly would I go about doing this? Where would the call for the javascript go? In the PHP or the HTML file the form is on? Since the page is mobile and tablet only and so simple I thought it would be a good idea to use the lightbox (I'm looking at adding fancybox) instead of making more pages.

I'm having trouble finding resources on the net as well, as I'm just getting lightbox forms and sending submission results back in the form of a lot box. I just want a simple Thank You or Error message honestly. That is if this is a good workable solution for a form at all.

Thanks in advance!

Here is a basic form for ref.

<form id="fusion_form" name="fusion_form" method="post" action="fusion_form.php" target="_blank">
                        <p><input name="first_name" type="text" id="first_name" style="width:140px" value="" placeholder="First Name" /></p>
                        <p><input name="last_name" type="text" id="last_name" style="width:140px"  value="" placeholder="Last Name" /></p>
                        <p><input name="email" type="text" id="email" style="width:140px"  value="" placeholder="Email Address" /></p>
                        <p><textarea name="comments" cols="20" rows="3" id="comments" class="FormText" style="width:200px; padding-left:2px" placeholder="Comments"></textarea></p>
                        <p><input type="image" src="images/submit-button.jpg" id="send_email" value="Submit Form" onclick="return verify_form();" /></p>
</form>

1条回答
ゆ 、 Hurt°
2楼-- · 2019-08-29 09:44
$('form').on('submit', function(e){
    e.preventDefault(); // stop the form submission
    var $d = $(this).serialize(); //serialize form to be submit to server
    $.ajax({
        url: $(this).prop('action'),
        type: $(this).prop('method'),
        data: {formData : $d},
        success: function(data){
            if(false != data){
               //form submission did NOT return false
               //build lightbox, extrapolate what is needed from `data` variable
            }
        }
    });
});

php.

if(isset($_POST['formData'])):
    $formData = $_POST['formData]';
    //do whatever with the form
    if(someCondition):
       return '<h4> Thank you for submitting the form!</h4>';
    else:
       return false;
    endif;
endif;
查看更多
登录 后发表回答