On Click RUN PHP code and Javascript

Question

I have a form with a div as a button, which acts as a close button for another div.

When I click on the form, I want two things to happen:

Close the parent div (I already managed that), and
Run a PHP script (I'm stuck here).

This is how far I got:

<form action="/alert.php" method="post">
  <div class="alert-close">×</div>
</form>

<script>
  $(document).ready(function(c) {
    $('.alert-close').on('click', function(c) {
      $(this).parent().fadeOut('slow', function(c) {});
    });
  });
</script>

I thought about implementing a code like this:

$.ajax({
  url: $form.attr('action'),
  method: $form.attr('method'),
});

but I don't know where it belongs as I'm a noob with AJAX and JavaScript. What do I need to do?

At [so] you are expected to try to **write the code yourself**. After **[doing more research](//meta.stackoverflow.com/questions/261592)** if you have a problem you can **post what you've tried** with a **clear explanation of what isn't working** and providing a [**Minimal, Complete, and Verifiable example**](//stackoverflow.com/help/mcve). I suggest reading [ask] a good question and [the perfect question](http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/). Also, be sure to take the [tour] and read **[this](//meta.stackoverflow.com/questions/347937/)**. — John Conde, May 08 '17 at 23:50
you can find help to run `ajax` here, [http://stackoverflow.com/questions/9436534/ajax-tutorial-for-post-and-get](http://stackoverflow.com/questions/9436534/ajax-tutorial-for-post-and-get) — Mahesh Singh Chouhan, May 08 '17 at 23:59
@john conde i've been researching for the past 2 hours, yet i haven't found anything for my solution. i won't be studying informatics anytime soon, so giving me this form of response is just below the guts. — , May 09 '17 at 00:02

Jose Marques · Accepted Answer · 2017-05-09T00:43:34.080

You can use $( "#target" ).submit();

This method is a shortcut for .on( "submit", handler ) in the first variation, and .trigger( "submit" ) in the third.

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to elements. Forms can be submitted either by clicking an explicit , , or , or by pressing Enter when certain form elements have focus.

$(document).ready(function(c) {
 $('.alert-close').on('click', function(c){
  $(this).parent().fadeOut('slow', function(c){
    });
      //$( "#myform" ).submit(); //use this for submitting the form
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id = "myform" action="/alert.php" method="post">    <div class="alert-close">×</div>
</form>

If you want to use ajax for the page not reloading, you only have to fix what you have.

$.ajax({
  method: "POST",
  url: "alert.php",
  success: function(result){
    alert( "Success"); // Use the success function to make sure that ajax was successful 
  }
});

For more about AJAX use this link: http://api.jquery.com/jquery.ajax

thank you for your answer! the problem that remains is that on clicking, it still loads the target page (//$( "#myform" ).submit(); ). i need that to prevent from happening. i want to load the php script without leaving the page. do you know a solution? — , May 09 '17 at 00:24

On Click RUN PHP code and Javascript

1 Answers1