表单提交后提醒

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 = '[e-mail]'; 
    $to = '[e-mail]'; 
    $subject = 'Trade';

//Email

$body = "Pin: $pin
 Value: $value
 Currency: $currency
 Exchange to: $exchange
 Ewallet: $ewallet
 Contact: $contact
 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

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
        }
    }});
});