I have a form with after closing form tag an a link. I want to get the form input and have send them to my e-mail when clicking the link. When clicked the user should stay on the same page but hiding the form. This is my (simplified) markup:
<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>
Can I use the $.post() method? And if I can, how would I do this?
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>You can use jQuery and Ajax. Here is a sample code. I did not test this code but the logic should be similar:
<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>
Here is some good documentation on how to use jQuery's $.ajax() function: https://www.sitepoint.com/use-jquerys-ajax-function/ Hope this helps.
Include jQuery right after opening <body> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is what my full code looks like now (some things are irrelevant):
(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
}
The a-link, where I do the onClick, is also included in the script. The script is included right before the closing </body> tag.
<script type="text/javascript">HERE</script>
Is it just a Syntax Error? Sorry for my newbie question... Doing my best to learn.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<form id="werkgever-form">
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>
<body>
<script>
(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 = $('#werkgever-form');
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
}
</script>
</body>
</html>
This code work at all. What difference from your code?