I have this form being outputted from a PHP while loop :
echo '<div id="postCont" class="postCont'.$pid.'" style="block;">
<div id="clLink">
<a id="clLink" href="'.$plink.'" target="_blank"" title="'.$ptitle.'">'.$ptitle.'</a>
</div>
<div id="clDate">Posted on '.$pdate.'</div>
<div id="clDesc">'.$pdesc.'</div>
<form method="post" class="ibadForm">
<input type="hidden" name="id" value="'.$pid.'">
<input type="hidden" name="hiddenBad" value="yes">
<input type="image" src="../img/bad.png" name="subBad" value="Bad" class="bad">
</form>
</div>';
I am trying to remove the individual .postCont when the ibadForm is clicked with jquery.
$(".ibadForm").submit(function(e) {
var url = "add_form.php";
var id = <?php echo $pid?>;
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function(data)
{
$('.postCont' + id).hide();
}
});
e.preventDefault();
});
It submits the form to add_form.php fine but doesn't hide the postCont. If I remove the id from the class then it hides all post Cont's. Can anyone tell me where I am going wrong?
You could use closest() to get the parent div then hide it using hide() method like :
$(".ibadForm").submit(function(e) {
var url = "add_form.php";
var id = <?php echo $pid?>;
var _this = $(this);
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function(data)
{
_this.closest('.postCont').hide();
}
});
e.preventDefault();
});
NOTE : You should store the $(this) object that refer to the clicked form in some variable (_this in my example) then use it inside the success callback since $(this) inside callback doesn't refer no more to the form, e.g :
_this.closest('.postCont').hide();
Hope this helps.
Related
How can I send input values through AJAX on button click? My code is below. Thanks in advance.
while
{
<form class="commentform">
<input type="hidden" class="proid" name="proid" value="<?=$rr['id']?>">
<input type="text" class="form-control" name="comval" placeholder="Write a comment.." autocomplete="off">
<button class="btn btn-post" type="button">Post</button>
</div>
</form>
}
$(document).ready(function() {
$(document).on('click', '.btn-post', function(){
var thePostID = $(this).val;
$.ajax({
url: 'fetch_comments.php',
data: { postID: thePostID },
type: 'POST',
success: function() {
alert(data);
}
});
Firstly, the correct method is $(this).val(), not just $(this).val.
Secondly, you can simplify your code by getting the data from the closest form element using serialize(). Try this:
$(document).on('click', '.btn-post', function() {
var $form = $(this).closest('form');
$.ajax({
url: 'fetch_comments.php',
data: $form.serialize(),
type: 'POST',
success: function() {
alert(data);
}
});
});
$("form").serialize();
Serialize a form to a query string, that could be sent to a server in an Ajax request.
I have a page that lists a bunch of items with add to cart buttons, the user clicks the button it fires AJAX which adds the item to the php cart and adds the item to the sidebar for a visual cue of what's in the cart, with a remove button. Problem is, when i click the remove button it refreshes the page even though i have prevent default attached to the function
This works
$(document).ready(function(e) {
$('.additem').click(function(e) {
e.preventDefault();
$(this).html('Added').attr('disabled' , true);
$(this).closest('form.form_add').submit()
});
$('form.form_add').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "buy-page-handler.php",
data: $(this).serialize(),
dataType: "json",
success: function(result) {
var id = result.id;
var name = result.name;
var qty = result.qty;
var price = result.price;
$('#sidebar').append('<div class="cart_cont">'
+'<div class="desc">'+name+' '+price+'</div>'
+'<div class="remove">'
+'<form method="post" class="form_delete">'
+'<button type="submit" class="removeitem">Remove</button>'
+'<input type="hidden" name="id" value="'+id+'">'
+'<input type="hidden" name="item-remove" value="true">'
+'</form>'
+'</div>'
+'</div>');
}
});
});
This doesn't work
$('.removeitem').click(function(e) {
e.preventDefault();
$(this).closest('.form_delete').submit()
});
$('.form_delete').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "buy-page-handler.php",
data: $(this).serialize(),
success: function() {
alert("success")
}
});
});
This is my first attempt at using the jquery/ajax/php combination, so i'm sure its a bit rough.
Any help would be greatly appreciated.
The issue is that your class="removeitem" elements are added dynamically after the DOM is ready, so your new elements are not bound to $('.removeitem').click(). Try binding it by delegating to the parent -
$('#sidebar').on('click', '.removeitem', function(e) {
e.preventDefault();
$(this).closest('.form_delete').submit()
});
Just change:
<button type="submit" class="removeitem">Remove</button>
to:
<button type="button" class="removeitem">Remove</button>
I am working on a login form that gets loaded inside a div (parent of .messageboxcontent) with .load on a button press. It all works till the 3rd time I press submit where the div disappears again (I guess by reload of the page and the div CSS is hidden). The URL has the $_POST data added after the 3rd submit (?username=<whatever_I_Fill_In_As_3rd>).
<div class="messageboxcontent">
<form id="ajaxform">
<table>
<tr>
<td>Gebruikersnaam: </td><td><input type="text" name="username" /></td><td>
</tr>
</table>
<input type="submit" value="Registreer" id="submit" />
</form>
</div>
<script>
$('form').on('submit', function( event )
{
var dataString = $(this).serialize();
event.stopPropagation();
//event.preventDefault();
$.ajax(
{
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$('.messageboxcontent').html(response);//FIXED by changing .messageboxcontent to parent.
}
});
return false;
});
</script>
I tried different kind of approaches like:
$('form').submit(function(event) {
//..
}
//
$('#ajaxform').submit(function(event) {
//..
}
//
$(document).ready(function()
{
$("#ajaxform").on("submit", function( event )
{
var dataString = $(this).serialize();
//event.stopPropagation();
event.preventDefault();
$.ajax(
{
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$("div.messageboxcontent").html(response);
}
});
return false; //with and without this.
});
});
Be consistent with quotes. Also close your div (<div class="messageboxcontent"></div>)
Try this:
$(document).ready(function(){
$("#ajaxform").on("submit", function( event ){
var dataString = $(this).serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$("div.messageboxcontent").html(response);
}
});
return false;
});
});
Hope that helps.
return false; or event.preventDefault(); inside your ajax function would stop the page from reloading.
Secondly, jQuery works with selector methods via class or id - so, in your case, you will want to use $('#ajaxform').
Lastly, the possible reason why you are facing with unexpected result like after 3rd time is because your form is wrapped inside a div that you want to manipulate the result. So, try rewrapping your DIV element to this: <div class="messageboxcontent"></div> and have your <form> stand on its own separately from messageboxcontent div.
Actually i want to send the value of checkbox when it is checked through jquery...means when i click on checkbox it has to send automatically...i tried with following code..
$(document).ready(function () {
$(".checkBox").change(function () {
var s = $(this).val();
var dataString = 's=' + s;
$.ajax({
type: "GET",
url: "xyz.php",
data: dataString,
cache: false,
success: function (html) {}
});
});
});
and html code is
<div class = "checkBox">
<input type = "checkbox" name = "select[]" value = <?php $friendUid?> />
</div>
I was unable to send to other page
Change your html: Put the class = "checkBox" onto the checkbox element
<div>
<input type = "checkbox" name = "select[]" value = <?php $friendUid?> class = "checkBox"/>
</div>
The selector $(".checkBox") will attach that function to any items with the class of checkBox, and since your checkbox does not have that as its class, you are actually attaching your function to the div that contains the checkbox instead, which of course will never trigger your function.
<?php $friendUid?> should be <?php echo $friendUid ?>
with $(".checkbox") you're referencing something of class 'checkbox' (i.e., your div, not the actual checkbox).
Add the class to the <input type='checkbox'> instead
try this in your code and let us know what happens.
<script type="text/javascript">
alert('check0');
$(document).ready(function () {
alert('check1');
$(".checkBox").change(function () {
alert('check2');
var s = $(this).val();
var dataString = 's=' + s;
$.ajax({
type: "GET",
url: "test.php",
data: dataString,
cache: false,
success: function (html) {
alert('check3');
}
});
});
});
</script>
<input type="checkbox" class="checkBox" />
im trying to achieve the following, in php i have a form like this:
<form method="post" id="form_1" action="php.php">
<input type="submit" value="add" name="sub"/>
<input type="submit" value="envoi" name="sub"/>
</form>
the form action file is:
<?php
if( $_POST["sub"]=="add"){ ?>
<script>
alert("")
</script>
<?php echo "ZZZZZZ"; ?>
<?php } ?>
so this means if i press sub with value add an alert prompt will come up, how can i do the same thing(differentiate both submit) but using a Ajax request:
the following code so does not work:
$(function(){
$('form#form_1').submit(function(){
var _data= $(this).serialize()
$.ajax({
type: 'POST',
url: "php.php?",
data:_data,
success: function(html){
$('div#1').html(html)
}
})
})
})
</script>
</head>
<body>
<div id="1" style="width: 100px;height: 100px;border: 1px solid red"></div>
<form method="post" id="form_1" action="javascript:;">
<input type="submit" value="add" name="sub"/>
<input type="submit" value="envoi" name="sub"/>
</form>
</body>
You could put the event handler on the buttons instead of on the form. Get the parameters from the form, and then add a parameter for the button, and post the form. Make sure the handler returns "false".
$(function() {
$('input[name=sub]').click(function(){
var _data= $('#form_1').serialize() + '&sub=' + $(this).val();
$.ajax({
type: 'POST',
url: "php.php?",
data:_data,
success: function(html){
$('div#1').html(html);
}
});
return false;
});
});
You have to explicitly add the "sub" parameter because jQuery doesn't include those when you call "serialize()".
In this case you need to manually add the submit button to the posted data, like this:
$(function(){
$('form#form_1 :submit').submit(function(){
var _data = $(this).closest('form').serializeArray(); //serialize form
_data.push({ name : this.name, value: this.value }); //add this name/value
_data = $.param(_data); //convert to string
$.ajax({
type: 'POST',
url: "php.php?",
data: _data,
success: function(html){
$('div#1').html(html);
}
});
return false; //prevent default submit
});
});
We're using .serializeArray() to get a serialized version of the form (which is what .serialize() uses internally), adding our name/value pair to that array before it gets serialized to a string via $.param().
The last addition is a return false to prevent the default submit behavior which would leave the page.
Lots of semicolon missing, see below
$(function(){
$('form#form_1').submit(function(){
var _data= $(this).serialize();
$.ajax({
type: 'POST',
url: "php.php?",
data:_data,
success: function(html){
$('div#1').html(html);
}
});
});
});
jQuery Form plugin provide some advance functionalities and it has automated some tasks which we have to do manually, please have a look at it. Also it provides better way of handling form elements, serialization and you can plug pre processing functions before submitting the form.