表单提交多个收件人，php 和 ajax/jquery

Question

我搜索并找到了许多与我的问题相关的问题，但还不够相似。我确实尝试了Show submitted form response on the same page. (No Reload) 的一些东西，但没有奏效。
问题是我正在尝试从 wordpress 页面提交表单，而表单不是其中唯一的元素。无论如何，我可以让基本表单与 action=myemail.php 一起使用，php 脚本在服务器上，但它会将我带到另一个页面，它会回显“谢谢您提交等”。我在 target 属性中尝试了 iframe，它让我留在同一页面上，但没有出现成功消息。
我需要做两件事，一是保持在同一页面上并在同一页面上回显成功消息（不是警报弹出框）。其次，能够根据表单中的一个下拉菜单选择不同的电子邮件地址，下拉菜单中有 3 个选项，每个选项都有一个单独的电子邮件地址。目前，它只发送到“send_to”地址。
这是我的表单的 html，它位于 wordpress 页面中的 <section> 标记内：

 
<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>

对于这个冗长的问题，我深表歉意，但我希望我已经提供了所需的信息。 几乎是编程新手，做过非常基本的 shell 脚本，但不多。对不起，如果我问的是对程序员来说应该是显而易见的事情。 阅读和研究后我的理解是，我需要使用我不太了解的 ajax/jquery，但我可能错了，可能还有其他方法。

非常感谢任何帮助/指导。

Answer 1

很难为这样的事情发布小提琴，因此您必须将此代码复制并粘贴到您的设置中。

表单 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，将表单数据发送到您的 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>');

        }
    });

});

这进入你的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(); }
}