PHP contact form needs to call Javascript to show a hidden div on main .html page

Question

I have a one page website in the works that has a contact form where its contact error and contact thank you messages are placed further down the page as hidden divs.

The contact form calls an external php file that calls the anchor links of the error and thank you message divs in the index.html file.

www.photograsurfer.com/test/index.html

www.photograsurfer.com/test/code/contact-panel.php

Everything works successfully as long as the divs are not hidden. So now I need to use the following javascript to get the hidden divs to display when needed.

<script type="text/javascript">
function showContactPanelError() {
document.getElementById('contact-panel-error').style.display = "block";
}
</script>

My problem, besides being a complete PHP beginner, is that I don't know how to get the PHP file to reference the Javascript code to display the hidden divs properly on the main page.

Any help is appreciated.

Thanks.

Answer 1

使用jQuery表单（ http://malsup.com/jquery/form/ ）通过AJAX提交表单，然后根据从PHP脚本返回的值显示/隐藏div 。

Answer 2

you could assign php variable to javascript as

var error="<?php echo $_GET['error']; ?>";

the $error is the data passed along with the url like wwww.example.com/test.php?error=1

Now you could check var error and call your function showContactPanelError().

Answer 3

You can add a onclick event on submit button. On clicking it will create an ajax call send data to the required external PHP file and then on success will display the hidden division properly on the main page.

here's a sample code just for an explanation

**
 * Description : Function that will trigger the AJAX request.
 * @param    none
 */

function CategorySubscriber_Unsubscribe(){

var data = {    
    'data-1':        data-1,
    'data-2':        data-2,
             // as per your need you can put any number of data
};


var url =  // your url

jQuery.post(url, data, function(response){
     jQuery.show("#your-div-id");
});

}

function(response) will be executed when ajax call will be in success status.

You can learn it from these links

http://www.w3schools.com/jquery/ajax_post.asp

http://api.jquery.com/jQuery.post/

Answer 4

I ended up going with a mixture of the 2 methods on these pages.

http://trevordavis.net/blog/ajax-forms-with-jquery

https://spruce.it/noise/simple-ajax-contact-form/#contact

Ditched the div idea since the Ajax method allowed me to not reload the page and enter error and thank you messages within the contact form itself. Seemed like an easier approach.

Thanks for all of the suggestions, as I never would have looked at using Ajax otherwise.