form submission multiple recipients, php and ajax/jquery

Question

I've searched and found a number of questions related to my issue but not something similar enough. I did try something from Show submitted form response on the same page. (No Reload) but it didn't work.
The issue is that I'm trying to submit a form from a wordpress page and the form is not the only element in it. Anyways, I can get the basic form to work with action=myemail.php, the php script is on the server, but it takes me to a different page where it echoes "thank you for submitting, etc." I tried the iframe in the target attribute which lets me stay on the same page but no success message appears.
I need to do 2 things, one is to stay on the same page and just echo a success message on the same page (not an alert pop up box). And secondly, the ability to choose a different email address based on one of the drop downs in the form, there are 3 choices in the drop down each with a separate email address. Currently, its only sending to a "send_to" address.
Here's my form's html which is inside a <section> tag, in the wordpress page:

 
<section class="iframe form">
<div class="content">
<h3 class="section-header">Request Some Info</h3>
<div class="row">
<div class="col-sm-2 col-xs-offset-1">
<form name="myform" method="post" action="/myemail.php" target="my_iframe">
<div class="form-group"><input class="form-control" name="email" type="email" placeholder="Email Address" /></div>
</div>
<div class="col-sm-4">
<div class="form-group"><input class="form-control" name="myquestion" type="text" placeholder="Some question?" /></div>
</div>
<div class="col-sm-2">
<div class="form-group"><select class="form-control" name="sendto">
<option value="admission">To Person1</option>
<option value="hr">To Person2</option>
<option value="general">Person3</option>
</select></div>
</div>
<div class="col-sm-2">
<div class="form-group"><input class="btn btn-warning btn-block" type="submit" value="Request Info"></div>
</div>
</form>
</section>&nbsp;
<iframe name="my_iframe" width="1" height="1" style="border:none"></iframe>

Apologies for the long question, but I hope I have provided the required info. Almost new at programming, have done very basic shell scripts but not much. Sorry if I'm asking something that should be obvious to programmers. My understanding after reading up and researching is that I will need to use ajax/jquery which I don't really know, but I could be wrong and there might be another way.

Would really appreciate any help/guidance.

Answer 1

It's hard to post a fiddle for something like this, so you'll have to copy and paste this code into your setup.

Form HTML

<form id="my_form_element">
    <input type="text" name="your_name">
    <select name="email_to">
        <option>your@email.com</option>
        <option>email@two.com</option>
    </select>
    <button type="submit">Submit</button>
</form>

JavaScript, which sends the form data to your PHP

$('#my_form_element').on('submit',function(e){
    e.preventDefault();

    // this is where you'd potentially do some validation to check the fields are filled

    // convert the form into a js array of key => value pairs

    var formData = $(this).serializeArray();

    // set up the vars for posting
    formData = $.param( formData );

    $.ajax({
        type: "POST",
        url: window.location.host+"/wp-admin/admin-ajax.php",
        data: "action=formpostfunction&"+formData,
        cache: true,
        success: function(results){

            // do stuff once the form is sent successfully
            // this is the AJAX success callback

            alert(results);

            // adding a success message to the page, example
            $('#my_form_element').append('<p>Sent successfully!</p>');

        }
    });

});

This goes into your functions.php

add_action('wp_ajax_formpostfunction', 'formpost');
add_action('wp_ajax_nopriv_formpostfunction', 'formpost');
function formpost(){

    // here we can access the form key => value pairs, i.e.
    // anything echoed here will be returned to the AJAX success callback

    echo $_POST['your_name'];
    echo $_POST['email_to'];

    // this is where you can do your mail sending

    // this stops a trailing 0 that gets returned with WP admin-ajax requests
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { die(); }
}