Javascript pop-up box with e-mail submission

Question

I currently have set up a little questionnaire which, at the end, currently pops up with a box just saying 'Your done'.

How do I have this contain an additional box or so, so that the user can review their answers, input their e-mail address and click a submit so that an e-mail will be created and sent to me with their answers and contact detail on?

I would copy a simple html form from elsewhere on my site, but I believe that I cannot input html into an external .js script, so I call upon the experts for help.

There should be nothing with the below pieces of coding, but this may help you to help me.

The questionnaire.js:

function QuestionnaireViewModel() {
    var self = this;
    var currentQuestionIndex = 0;

    var questions = [
        {
            caption: 'Q1?',
            answers: [
                { caption: 'Q1A1' },
                { caption: 'Q1A2' }
            ]
        },
        {
            caption: 'Q2',
            answers: [
                { caption: 'Q2A1' },
                { caption: 'Q2A2' }
            ]
        }, 
        {
            caption: 'Q3',
            answers: [
                { caption: 'Q3A1' },
                { caption: 'Q3A2' }
            ]
        },
        {
            caption: 'Q4',
            answers: [
                { caption: 'Q4A1' },
                { caption: 'Q4A2' }
            ]
        }
    ];

    self.currentQuestion = new ko.observable(questions[0]);
    self.progress = new ko.observableArray();

    self.selectQuestion = function (answer) {
        self.progress.push({ 
            question: questions[currentQuestionIndex].caption, 
            answer: answer.caption 
        });

        currentQuestionIndex++;
        if (currentQuestionIndex < questions.length) {
            self.currentQuestion(questions[currentQuestionIndex]);
        } else {
            alert('Your done');
        }
    };
};

$(document).ready(function () {
    ko.applyBindings(new QuestionnaireViewModel());
});

The form handler.php:

<?php 
    $errors = '';
    $myemail = 'name@domain.com';
    if(empty($_POST['name'])  || 
       empty($_POST['email']) || 
       empty($_POST['message']))
    {
        $errors .= "\n Error: all fields are required";
    }

    $name = $_POST['name']; 
    $email_address = $_POST['email']; 
    $message = $_POST['message']; 

    if (!preg_match(
    "/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i",
    $email_address))
    {
        $errors .= "\n Error: Invalid email address";
    }

    if( empty($errors))
    {
        $to = $myemail; 
        $email_subject = "Contact form submission: $name";
        $email_body = "You have received a new message. "
                    . " Here are the details:\n Name: $name \n "
                    . "Email: $email_address \n Message \n $message"; 

        $headers = "From: $myemail\n"; 
        $headers .= "Reply-To: $email_address";

        mail($to,$email_subject,$email_body,$headers);
        //redirect to the 'thank you' page
        header('Location: thankyou.html');
    } 
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
    <head>
        <title>Contact form handler</title>
    </head>

    <body>
        <!-- This page is displayed only if there is some error -->
        <?php
            echo nl2br($errors);
        ?>
    </body>
</html>

Answer 1

If you want them to be able to change their answers from the pop-up then you can't do this through an alert. If you just want to just show them their answers, and have one box for an email address this could possibly be done.

If you want to just display their answers with a box to input an email address, you can try the prompt pop-up .

If you want them to be able to change their answers from the pop up box, you will probably have to create it yourself. Something like these .

Javascript pop-up box with e-mail submission

Question

1 answers

solution1
0 2013-02-25 16:07:48

Javascript pop-up box with e-mail submission

Question

1 answers

solution1 0 2013-02-25 16:07:48

solution1
0 2013-02-25 16:07:48