Reputation: 928
Here is my script :
<script>
$('form.subscribe').on('submit', function() {
var that = $(this);
url = that.attr('action');
method = that.attr('method');
data ={};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type:method,
data: data,
success: function(response){
console.log(response);
}
});
return false;
});
</script>
I have an ajax function that gives me either an error message or a success message depending on what your input was on the form.
The messages that I get come from this php script:
<?php
header("Refresh:7; url=contact.php");
$email = $_POST['subscribefield'];
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "Dit emailadres klopt niet";
die();
}
$to = "[email protected]";
$subject = "Abonee voor de nieuwsbrief";
$body = "$email \n Heeft zich aangemeld voor de nieuwsbrief";
mail($to, $subject, $body);
echo "U heeft zich zojuist aangemeld voor de vandenberg nieuwsbrief";
?>
Right now im displaying the outputs with a console.log()
. But I would like to display those in a <div>
instead.
Upvotes: 2
Views: 565
Reputation: 156
If you want to create your div only in some specific case, then you can create div and then append data in AJAX success call.
In place of console.log(response);
Use :
$('#elementId').append("<div class=''>response</div>");
Upvotes: 3
Reputation: 573
Create a div element in your html page in which you want to show your message and give it a id like
<div id="myMessage"></div>
and replace your console.log line with
$('#myMessage').text(response);
and your message will start coming in div.
Upvotes: 4
Reputation: 43479
Use $(selector).html()
to output HTML or $(selector).text()
to output as plain text:
$.ajax({
url: url,
type:method,
data: data,
success: function(response){
$('div').html(respons);
}
});
Upvotes: 3
Reputation: 8022
You just have to use jQuery .html() to set the response content in a DIV.
Replace following line
console.log(response);
with
$('#idOfDiv').html(response);
//or
$('.classOfDiv').html(response);
Upvotes: 5