Call javascript function in PHP file and load html file after?

Question

I need to call a js function in my php but it's not working. Can someone tell me what I'm doing wrong? How can I do this in an easy way?

Thank you!

I have three files:

mail.php

Responsible for sending my $_POST stuff (it works fine). I call my javascript function to toggle a modal depending if the mail was send or not.

 <? 
    ...
    $response = $sendgrid->send($email);
    if ($response) {
        echo '<script type="text/javascript">',
            'confirmaEnvio();',
        '</script>';
         header('Location: /contato');
    }
    else {
        echo '<script type="text/javascript">',
            'falhaEnvio();',
        '</script>';
         header('Location: /contato');
    }
?>

functions.js

Two functions, one toggle the modal with a text telling the mail was sent, one toggle the modal with a text telling the mail was not sent.

function confirmaEnvio () {
    $("#modal").find(".modal-body").text("Mensagem enviada com sucesso!");
    $("#modal").modal("show");
}
function falhaEnvio() {
    $("#modal").find(".modal-body").text("Erro!");
    $("#modal").modal("show");
}

view.html

Form sending data to mail.php using POST

<form name="contato" method="post" action="../php/mail.php">
   <div class="form-group row">
        <label for="email" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
        </div>
   </div>
   <div class="form-group row">
      <label for="name" class="col-sm-2 col-form-label">Nome</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="name" name="name" placeholder="Nome" required>
       </div>
    </div>
    <div class="form-group row">
       <label for="msg" class="col-sm-2 col-form-label">Mensagem</label>
       <div class="col-sm-10">
          <textarea class="form-control" name ="msg" rows="10" id="msg" placeholder="Mensagem" required></textarea>
       </div>
    </div>
    <div class="form-group row">
       <div class="col-sm-10">
          <button type="submit" name="submit" class="btn">Enviar</button>
       </div>
     </div>

my modal, same file, view.html

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

You can't echo anything before setting a header. Should be getting server side errors from that — charlietfl
– charlietfl, Commented Dec 13, 2018 at 19:36
Make sure you are declaring confirmaEnvio and falhaEnvio before calling php. If it is on the end of the page, move it to the top. Same with the modal html code. — NathanPB
– NathanPB, Commented Dec 13, 2018 at 19:38
Typically, the process is different than what you seem to be trying. It usually involves: Browser makes AJAX call to web service, web service returns results perhaps in JSON format, Browser displays modal or other based on results returned from web service. — Jonathan M
– Jonathan M, Commented Dec 13, 2018 at 19:51
I tried without the header too, it doesn't work, the modal is never shown. @charlietfl — Flávia Nunes
– Flávia Nunes, Commented Dec 13, 2018 at 20:37

Timothy Barmann · Accepted Answer · 2018-12-13 19:42:00Z

1

This seems like an odd way to call a Javascript function as a result of a php call. It looks like you are calling a Javascript function, then immediately loading a new page. So even if the Javascript started to execute, it would be dumped as soon as the new page loads.

A better approach would be to call the php function from Javascript and then respond based on the response from the php function.

answered Dec 13, 2018 at 19:42

Timothy Barmann

6088 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Flávia Nunes Over a year ago

Thank you, I'll try this :) But since I need the POST data from the form, I would have to pass it to the javascript and then pass it to the php? Is that possible?

Collectives™ on Stack Overflow

Call javascript function in PHP file and load html file after?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related