can anyone help me, I want the result of php to be displayed in pop up form on the same html page, how can that do? this is my code thank you all for help
index.html
<!-- Start Contact Form -->
<div class="triangle"></div>
<div id="cform" class="container">
<div class="row">
<h3 class="my-title contact-title">Kontaktformular</h3>
<hr>
<div class="col-md-12">
<form id="my-form" method="post" action="handler.php">
<ul class="contact-form">
<li>
<div class="col-md-6">
<input name="name" placeholder="Name" required="required" size="8" type="text">
</div>
<div class="col-md-6">
<input name="email" placeholder="E-Mail" required="required" size="8" type="email">
</div>
</li>
<li>
<div class="col-md-6">
<input name="telefon" placeholder="Telefon" size="8" type="text">
</div>
<div class="col-md-6">
<input name="firma" placeholder="Firma" size="8" type="text">
</div>
</li>
<li>
<div class="col-md-6">
<label>Ihr Budget</label>
<div id="slider-range-min" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 1%;">
</div><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 8%;"></span></div>
</div>
<div class="col-md-6">
<input name="amount" id="amount" readonly>
</div>
</li>
<li>
<div class="col-md-12">
<textarea class="span12" name="details" placeholder="Ihre Projektbeschreibung" required="required"></textarea>
</div>
</li>
<li>
<div class="col-md-12">
<button id="my-btn" type="submit">Senden <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></button>
<span id="status"></span>
</div>
</li>
</ul>
</form>
</div>
</div>
</div>
<!-- End Contact Form -->
handler.php
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "info@test.com";
$email_subject = "Your email subject line";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['name']) ||
!isset($_POST['email']) ||
!isset($_POST['telefon']) ||
!isset($_POST['firma']) ||
!isset($_POST['amount']) ||
!isset($_POST['details'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$first_name = $_POST['name']; // required
$email_from = $_POST['email']; // required
$firma = $_POST['firma']; // required
$telephone = $_POST['telefon']; // not required
$amount = $_POST['amount'];
$comments = $_POST['details']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$first_name)) {
$error_message .= 'The First Name you entered does not appear to be valid.<br />';
}
if(!preg_match($string_exp,$firma)) {
$error_message .= 'The Last Name you entered does not appear to be valid.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'The Comments you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.
";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "First Name: ".clean_string($first_name)."
";
$email_message .= "Email: ".clean_string($email_from)."
";
$email_message .= "Telephone: ".clean_string($telephone)."
";
$email_message .= "Firma: ".clean_string($firma)."
";
$email_message .= "Amount: ".clean_string($amount)."
";
$email_message .= "Comments: ".clean_string($comments)."
";
// create email headers
$headers = 'From: '.$email_from."
".
'Reply-To: '.$email_from."
" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>
<!-- include your own success html here -->
Thank you for contacting us. We will be in touch with you very soon.
<?php
}
?>
I apologize for the fact that I put the php code in the snippet, I could not possibly put it differently, but I think it is as clear as that.
At the moment when I send the form I get on the second page ie handler.php answer that the form is sent ("Thank you for contacting us. We will be in touch with you very soon.")
You have to add target attribute to the form HTML tag. There you can specify an ID of an iframe placed inside your popup.
<form target="my-iframe"></form>
<div class="popup">
<iframe id="my-iframe"/>
</div>
You don't have to use JS at all :) Unless I'm mistaken ... See the reference: https://www.w3schools.com/tags/att_form_target.asp
Try this:
Enclose your echo with tags like this.
echo '<script>alert("Page submited");<script>';
To use ajax, download and link jQuery in your HTML code and access function like this:
jQuery
$('#my-form').on('submit', function(e)
{
e.preventDefault(); //this stops the form submit + refresh
$.ajax({
data: {data_field: 'value'},
type: 'post',
url: '/path/to/script.php',
success: function(r) {$('#my-popup').removeClass('hidden')},
error: function(r) {alert('error'); console.log(r)}
});
});
Html
<div class="hidden" id="my-popup">
<p>some msg</p>
</div>
css
.hidden {display: none}
note: the above isn't going to work via copy and paste, alter the ajax function data field so it responds to your script
You can also use this way
if($insert_id=='success'){//change success based on the returned value of the model
echo "<script>
alert('Success');
window.location.href='".base_url('/path/to/script.php')."';
</script>";
}