Show pop up after submit form

Question

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.\n\n";


    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)."\n";

    $email_message .= "Email: ".clean_string($email_from)."\n";
    $email_message .= "Telephone: ".clean_string($telephone)."\n";
    $email_message .= "Firma: ".clean_string($firma)."\n";
    $email_message .= "Amount: ".clean_string($amount)."\n";
    $email_message .= "Comments: ".clean_string($comments)."\n";

// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'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.")

There's much more to this than just a pop-up. You need to convert your form submission to use AJAX. — Mitya, May 14 '18 at 12:14
I did not install ajax, I do not know where and how to install in this case, do you have any examples for this? I think I should get the value of the php file — , May 14 '18 at 12:16
@100janovici ajax isn't something you install, it's a jQuery library - but you have Javascript and ajax tagged in your question, so we (righfully) assumed you were using it :) — treyBake, May 14 '18 at 12:17
@ThisGuyHasTwoThumbs You're right, I'm sorry, it's a little bad English :) — , May 14 '18 at 12:55

score 0 · Answer 1 · answered May 14 '18 at 12:15

0

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

answered May 14 '18 at 12:15

sunpietro

2,059
4
24
42

There's really no good reason to route a form submission through a hidden iframe anymore unless you want to an easy ride with file uploads. AJAX is undoubtably the way to go in the OP's case. – Mitya May 14 '18 at 12:16
ajax > iframes - iframes suck. – treyBake May 14 '18 at 12:18
@sunpietro thanks for posting, that i want to get the result from php after submitting the form, i think this is not the answer for my case? – May 14 '18 at 12:19
@100janovici I'm using this approach in a couple of projects and it works perfectly fine. I get what I want with minimum effort. – sunpietro May 14 '18 at 12:23
@sunpietro you shouldn't use it in your projects .. it's bad practice :) research ajax and you'll soon realise why it's the better choice :) – treyBake May 14 '18 at 12:30
@ThisGuyHasTwoThumbs this is not what I expected. I know JS very well and I don't need jQuery to make requests. So I'm staying in my opnion, there are tools that might be used in different approaches. If you need to render something complex, that already exists on backend then using `target` attribute to an iframe is perfectly fine. – sunpietro May 14 '18 at 12:41
@sunpietro https://stackoverflow.com/questions/3797179/why-do-people-still-use-iframes#3797217 another reason <- which your script doesn't comply with - iframes are performance-heavy and should be used on a very minimal level – treyBake May 14 '18 at 12:43
@ThisGuyHasTwoThumbs you're right, but if you know all the pros and cons, and you accept them, it's up to you to decide whether to use them or not. There are cases where iframes are the only way to achieve something without replicating existing solutions in JS/other apps, etc. In simple cases, using iframes is an overkill, but in more sophisticated ones they are acceptable. – sunpietro May 14 '18 at 12:46

score 0 · Answer 2 · answered May 14 '18 at 12:21

0

Try this:

Enclose your echo with tags like this.

echo '<script>alert("Page submited");<script>';

answered May 14 '18 at 12:21

jagdish

1
2

treyBake · Accepted Answer · 2018-05-14T12:57:32.980

0

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

ref: https://api.jquery.com/jQuery.ajax/

edited May 14 '18 at 12:57

answered May 14 '18 at 12:26

treyBake

6,440
6
26
57

and should I then get out of the form action = "handler.php"? – May 14 '18 at 12:56
@100janovici yeah, you set url to either the form action or you can get the form action like this: `$('#my-form).attr('action')` – treyBake May 14 '18 at 12:57

score 0 · Answer 4 · answered May 14 '18 at 13:35

0

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

answered May 14 '18 at 13:35

Ankit Jaiswal

274
2
8

Show pop up after submit form

4 Answers4