0

I have a form where the data is sent through an email when I click on a button.
The issue I have is that I want the same data to be inserted into a table.

I found a solution on here: send the form values to multiple pages
but I don't know how to insert that portion of code in mine.
This is the code I put in my page:

<script language="Javascript">
<!--
$('form').submit(function() {
    $.ajax({
        async: false,
        method: 'POST',
        url: 'submit.php',
        data: $( this ).serialize(),
        success: function() {
            window.location.href = "http://stackoverflow.com"; //redirect to this page
        }
    });

    $.ajax({
        async: false,
        method: 'POST',
        url: 'appuntamento.php',
        data: $( this ).serialize(),
        success: function() {
             window.open("http://www.stackoverflow.com"); //this page will be open in new tab
        }
    });
});
-->
</script>

The fact is that I don't know if I inserted it right and I don't know how to call the function on the button.
gigiopasticcio
  • 51
  • 1
  • 5
  • You could start by learning how to send form data via an ajax request, and it will come naturally. Seems like you might have a small gap on the how-to section in general. ref: [https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form](https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) – Nikos Gkogkopoulos May 14 '21 at 08:18
  • 1
    The idea of using JS to submit to 2 different URLs isn't bad but it won't degrade for non-javascript-friendly users. If it's possible, I would personnally try to do the 2 operations on the server-side in the PHP code and have the action set to this PHP script on the form action attribute `
    ` . Another problem with the 2 ajax requests is that one might work and not the other which wouldn't be very consistent in my opinion. The mail should be sent only if the data was inserted properly.
     – Patrick Janser May 14 '21 at 09:42
  • I was trying to put the whole INSERT script into the submit page (the one who sends the email) but I didn't know how to implement the code into that. – gigiopasticcio May 14 '21 at 10:01
  • I could provide the code of the submit page and also the portion of the Insert script if that could help – gigiopasticcio May 14 '21 at 10:11

1 Answers1

1

You don't exactly have to call the function on the button. If you include the js in your html or php file which contains the form tag <form> once the button with type="submit" is clicked the event will be triggered. However, if you must use a button that doesn't automatically trigger form submit on click then you can trigger manually by adding an id to the form and submit onclick of the button

if you have

<form id="target">
  <input type="text" value="Hello there">
  <input type="submit" value="Go">
</form>

You can do this

$('form').submit(function() {
    $.ajax({
        async: false,
        method: 'POST',
        url: 'submit.php',
        data: $( this ).serialize(),
        success: function() {
            window.location.href = "http://stackoverflow.com"; //redirect to this page
        }
    });

    $.ajax({
        async: false,
        method: 'POST',
        url: 'appuntamento.php',
        data: $( this ).serialize(),
        success: function() {
             window.open("http://www.stackoverflow.com"); //this page will be open in new tab
        }
    });
});

If you have

<form id="target">
      <input type="text" value="Hello there">
      <button id="submit-form">Submit</button
    </form>

you can have this

$( "#submit-form" ).click(function() {
  $( "#target" ).submit();
});

$('form').submit(function() {
        $.ajax({
            async: false,
            method: 'POST',
            url: 'submit.php',
            data: $( this ).serialize(),
            success: function() {
                window.location.href = "http://stackoverflow.com"; //redirect to this page
            }
        });
    
        $.ajax({
            async: false,
            method: 'POST',
            url: 'appuntamento.php',
            data: $( this ).serialize(),
            success: function() {
                 window.open("http://www.stackoverflow.com"); //this page will be open in new tab
            }
        });
    });
Emmanuel Ogwo
  • 11
  • 2
  • I've added the id to my form and that portion of code you wrote, but when I click the button nothing happens and it just gives me back the same page. – gigiopasticcio May 14 '21 at 08:39
  • @gigiopasticcio Just to confirm, you have the files you're posting to using ajax available right? I'm talking about the submit.php and appuntamento.php. You have to change them to the file you want to submit the form to That process has to be successful before the redirect – Emmanuel Ogwo May 14 '21 at 12:17
  • Yes those 2 files exist. submit.php gets the data from this page and sends an email containing the data. The other page does the same thing, so it receives the data and puts it into a table. – gigiopasticcio May 14 '21 at 15:34
  • Can you inspect the element and monitor the network tab to see if the response from the ajax call is successful. Also in the .submit you have to preventDefault to stop the form from submitting – Emmanuel Ogwo May 15 '21 at 17:58
  • I inspected the button and it says: Uncaught ReferenceError: $ is not defined – gigiopasticcio May 17 '21 at 08:54
  • Maybe I should post another question with the code of my page, it could be more helpful that way – gigiopasticcio May 17 '21 at 08:55