Question

我有一个表格，在关闭表格标签之后是一个链接。我想获取表单输入，并在单击链接时将其发送到我的电子邮件。单击时，用户应保持在同一页面上，但隐藏表单。这是我的（简化）标记：

<script type="text/javascript">
  function doSomething() {
   $.get("sendform.php");
   return false;
  }
</script>

<form id="myForm">
  First name:<br>
  <input type="text" name"first name"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
<a href="#" onClick="doSomething();">Send</a>

我可以使用$ .post（）方法吗？如果可以的话，我该怎么做？

Answer 1

获取表单数据。
准备ajax帖子（url，sendData，callback）。
隐藏表单。

（可选）成功提交后执行一些操作。

function doSomething() {
    var form = $('#myForm');
    var formdata = form.serialize();// 1
    $.post("sendform.php",formdata, function(data){ //2
        //here you can do different action after make you post request //4
    });
    form.hide(); //3
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  First name:<br>
  <input type="text" name="first_name"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
<a href="#" onClick="doSomething();">Send</a>

Answer 2

您可以使用jQuery和Ajax。这是一个示例代码。我没有测试这段代码，但逻辑应该类似：

<script type="text/javascript">
    $("#myButton").click(function(){
        $.ajax({url: "sendform.php", success: function(result){
            $("#divResult").html(result);
        }});
    });
</script>

<form id="myForm">
  First name:<br>
  <input type="text" name"first name"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
<a id="#myButton" href="#" >Send</a>
<div id="divResult"></div>

以下是一些关于如何使用jQuery的$ .ajax（）函数的好文档：https://www.sitepoint.com/use-jquerys-ajax-function/希望这会有所帮助。

Answer 3

在打开<div class="bg_info_profile"> <div class="bg_profile_red_left"> asdf </div> <div class="bg_profile_red_right"> asdf </div> </div>代码后立即加入jQuery：

<body>

这就是我现在的完整代码（有些事情无关紧要）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我执行onClick的a-link也包含在脚本中。该脚本包含在结束(function($) { $(".em-booking-form").attr('id', 'werkgever-form'); $('#masterclasses_repertoire').attr('placeholder','(max. 2000 tekens)'); $('#masterclasses_biografie').attr('placeholder','(max. 2000 tekens)'); $('#masterclasses_motivatie').attr('placeholder','(max. 2000 tekens)'); $('#masterclasses_opmerkingen').attr('placeholder','(specifieke dieetbehoeften)'); $(".em-attendee-fieldset").insertAfter($(".input-field-workshop_opmerkingen")); $(".em-attendee-fieldset").insertAfter($(".input-field-master_final_opmerkingen")); $(".em-attendee-fieldset").insertAfter($(".input-field-master_passief_opmerkingen")); $(".facturatiegegevens, .input-field-workshop_gelijk_adres, .input-field-factuur_bedrijf, .input-field-factuur_naam_contactpersoon, .input-field-factuur_email_contactpersoon, .input-field-factuur_straat, .input-field-factuur_nummer, .input-field-factuur_bus, .input-field-factuur_postcode, .input-field-factuur_gemeente, .input-field-factuur_land, .input-field-factuur_btw-nummer, .input-field-factuur_opmerkingen").wrapAll("<div class='kader'></div>"); $(".postid-4465 .aanmelden").prop("value", "Aanmelden"); $('input[value="Ik heb geen factuur nodig."]').attr('checked',true); $('.input-field-workshop_akkoord').after('<a id="werkgever-button" class="btn btn-primary" href="#" onClick="doSomething()">Reservering versturen</button>'); $(".em-booking-gateway").css('display', 'block'); $("input[name='workshop_wenst_u_een_factuur']").click(function () { $('.facturatiegegevens').css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block'), $('.kader').css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block'), $('.em-booking-gateway').css('display', ($(this).val() === 'Mijn werkgever zal betalen.') ? 'none':'block'), $('.em-booking-buttons').css('display', ($(this).val() === 'Mijn werkgever zal betalen.') ? 'none':'block'), $('#werkgever-button').css('display', ($(this).val() === 'Mijn werkgever zal betalen.') ? 'block' : 'none'), $('.input-field-workshop_gelijk_adres').css('display', ($(this).val() === 'Ik heb wel een factuur nodig.') ? 'block':'none'), $('.input-field-factuur_bedrijf').css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block'), $('.input-field-factuur_naam_contactpersoon').css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block'), $('.input-field-factuur_email_contactpersoon').css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block'), $('.input-field-factuur_straat').css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block'), $('.input-field-factuur_nummer').css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block'), $('.input-field-factuur_bus').css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block'), $('.input-field-factuur_postcode').css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block'), $('.input-field-factuur_gemeente').css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block'), $('.input-field-factuur_land').css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block'), $('.input-field-factuur_btw-nummer').css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block'), $('.input-field-factuur_opmerkingen').css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block'); }) $("#workshop_gelijk_adres").change(function() { if(this.checked) { //get the values of the filled fields $naam = $("#workshop_naam").val(); $email = $("#user_email").val(); $straat = $("#workshop_straat").val(); $nummer = $("#workshop_nummer").val(); $bus = $("#workshop_bus").val(); $postcode = $("#workshop_postcode").val(); $gemeente = $("#workshop_gemeente").val(); $land = $("select.workshop_land").val(); console.log("name"); // then add those values to your billing infor window feilds $("#factuur_naam_contactpersoon").val($naam); $("#factuur_email_contactpersoon").val($email); $("#factuur_straat").val($straat); $("#factuur_nummer").val($nummer); $("#factuur_bus").val($bus); $("#factuur_postcode").val($postcode); $("#factuur_gemeente").val($gemeente); $("select.factuur_land").val($land); // then form will be automatically filled .. } else { $('#factuur_naam_contactpersoon').val(''); $("#factuur_email_contactpersoon").val(''); $("#factuur_straat").val(''); $("#factuur_nummer").val(''); $("#factuur_bus").val(''); $("#factuur_postcode").val(''); $("#factuur_gemeente").val(''); $("select.factuur_land").val(''); } }) })(jQuery); function doSomething() { var form = $('#myForm'); var formdata = form.serialize();// 1 $.post("http://www.lowie-design.be/test/voice-academy/wp-includes/werkgever.php",formdata, function(data){ //2 //here you can do different action after make you post request //4 }); form.hide(); //3 }标记之前。

</body>

它只是一个语法错误吗？对不起，我的新手问题......尽我所能。

<script type="text/javascript">HERE</script>

此代码完全有效。与您的代码有什么区别？

onClick获取表单详细信息并发送电子邮件

3 个答案: