Alert after form submission

Question

so i created a contact form and it works properly but i want to show an alert message after form submission well i did that also using iframe and by targeting the form to this iframe and echo the alert but the iframe takes white space and alot of height even if i make its height 1px what i want to do: -Remove the space of the iframe -or find another way to do the alert withour iframe

here is my html

<form action="index.php" class="alt" method="POST" target="myiframe" >
<div class="row uniform">
<div class="12u$">
<input name="pin" placeholder="Paysafecard PIN" type="text" required>
</div>
<div class="12u$(small)">
<input name="value" placeholder="Value" type="text" required>
</div>
<div class="12u$(small)">
<select name="currency">
<option value="EUR">EUR</option>
<option value="CHF">CHF</option>
<option value="GBP">GBP</option>
<option value="CAD">CAD</option>
<option value="USD">USD</option>
<option value="RON">RON</option>
<option value="NOK">NOK</option>
<option value="MXN">MXN</option>
<option value="HRK">HRK</option>
<option value="PLN">PLN</option>
</select>
</div>
<div class="12u$">
<input name="exchange" placeholder="Exchange to :" type="text" required>
</div>

<div class="12u$">
<input name="ewallet" placeholder="Ewallet email" type="email" required>
</div>
<div class="12u$">
<input name="contact" placeholder="Contact email" type="email" required>
</div>                                
<div class="12u$">
<textarea name="message" placeholder="Message" rows="4"></textarea>
</div>
</div>
<ul class="actions">
<li><input name="submit" class="alt" value="Submit" type="submit"></li>
</ul>
<iframe style="display:none;" name="myiframe"></iframe>
</form>

here is my php

<?php


//Attributes
    $pin = $_POST['pin'];

    $value = $_POST['value'];

    $currency = $_POST['currency'];

    $exchange = $_POST['exchange'];

    $ewallet = $_POST['ewallet'];

    $contact = $_POST['contact'];

    $mesasage = $_POST['message'];

//Email stuff

    $from = 'fromemail@site.com'; 
    $to = 'to@site.com'; 
    $subject = 'Trade';

//Email

$body = "Pin: $pin\n Value: $value\n Currency: $currency\n Exchange to: $exchange\n Ewallet: $ewallet\n Contact: $contact\n Message: $message";


if ($_POST['submit']) {
   if ($pin != '' && $value != '' && $exchange != '' && $ewallet != '' && $contact !='') {
    if (mail ($to, $subject, $body, $from)) { 
echo '<script language="javascript">';
echo 'alert("message successfully sent")';
echo '</script>'; 
   } else { 
       echo '<script language="javascript">';
echo 'alert("Something went wrong, Go back and try again.")';
echo '</script>';; 
    }

   }
}

?>

Note:I used iframe to show the alert message on the index.html page and not the php page but the iframe is empty and it takes place after the form

Answer 1

Put the whole form into an iframe:

<iframe src="form.php">Please update your browser</iframe>

Now you can add your form into form.php.

Answer 2

Best way to do this is:

1. Catch the submit event with JS. Then submit the form with AJAX.
2. Your PHP responds with a message (not a script). Like echo 'sent' or echo 'failed' .
3. In your success method in your AJAX call, you call the alert method after checking the response from your php (string sent or failed).

I recomment to use jQuery for this. Check out the $.ajax method and the $.post method for more information.

Good simple example in w3schools

Your JS code should look something like this:

$("button").click(function(){
    $.ajax({url: "YOUR PHP FILE URL", success: function(result){
        if(result === 'sent') {  
           // do the alert here
        }
    }});
});