Javascript part...
It stops at the $("#deletar").click...
$(document).ready(function() {
$("#deletar").click(function() { // it fails here !!
var sendu = $("#ids").val();
$.ajax({
type : "POST",
url : "deletar.php",
data : "ids=" + sendu,
success : function(msg, string, jqXHR) {
$("#result").html(msg);
}
});
});
});
This is the php file... is a echo to other ajax post, and retrieves a list of a mysql db
.$row2['amigos']."
</td>
<td><inp ``ut type='submit' name='deletar' id='deletar' value='deletar'
OnClick='return confirm(\"Tem certeza que quer deletar esta linha?\");'>
<input type='hidden' name='ids' id='ids' value='".$row2['id']."'>
</td>
</tr>
";
enter code here
Your ajax is being called from a submit button click. You haven't done anything to prevent the default behaviour of the submit button, therefore after your ajax call, the browser will submit the form using a traditional request.
In your click event, you can return false to prevent the form submitting:
$("#deletar").click(function(){ //it fails here !!
var sendu = $("#ids").val();
$.ajax({
type:"POST",
url:"deletar.php",
data: "ids="+sendu,
success: function(msg,string,jqXHR){
$("#result").html(msg);
}
});
return false; // <--- stop the form submitting
});
You can also use e.preventDefault to achieve the same result.
I think you need to stop the form submitting after the submit button has been clicked:
$(document).ready(function () {
$("#deletar").click(function (event) {//it fails here !!
event.preventDefault(); // one of these
event.stopPropagation(); // lines should do the trick
var sendu = $("#ids").val();
$.ajax({
type : "POST",
url : "deletar.php",
data : "ids=" + sendu,
success : function (msg, string, jqXHR) {
$("#result").html(msg);
}
});
});
});
Related
i have created a textarea & i wanna send the values of my textarea with ajax to the database, but it sends it to database without any value and with reloading, where is my problem ?
html codes :
<form>
<textarea></textarea>
<button type="submit">ارسال</button>
</form>
ajax codes :
$(document).ready(function(e){
var text=$('textarea').val();
$('button').click(function(e){
$('.loading').css('display','block');
$.ajax({
url:'insertText.php',
type:'POST',
data:{'text':text},
beforeSend : function(){
$('.loading').html('فرستادن ...');
},
error : function(request) {
alert(request);
},
success:function(data){
alert(data);
}
});
});
});
and this is my pdo and mvc for informations , i put last layer :
$obj=new Get;
$obj->InsertText($_POST['text']);
Place the line var text=$('textarea').val(); inside click event of the button, Otherwise it will take only the initial value at the time of dom ready.
$(document).ready(function(e) {
$('button').click(function(e) {
var text = $('textarea').val();
$('.loading').css('display', 'block');
$.ajax({
url: 'insertText.php',
type: 'POST',
data: {
'text': text
},
beforeSend: function() {
$('.loading').html('فرستادن ...');
},
error: function(request) {
alert(request);
},
success: function(data) {
alert(data);
}
});
});
});
You have two problems:
You are getting the value from the textarea at the wrong time
You are submitting the form
Your line of code:
var text=$('textarea').val();
Is inside the ready handler but outside the click hander. This means you get the value at the time the DOM becomes ready and not at the time the button is clicked.
Move it inside the click handler.
To stop the form submitting, you need to tell the browser not to perform the default action for clicking a submit button:
$('button').click(function(e){
e.preventDefault();
Note that, in general, it is better to react for the form being submitted rather than a specific submit button being clicked:
$('form').submit(function(e){
e.preventDefault();
It is also preferred that the form should still work when the JavaScript fails (for whatever reason):
<form action="insertText.php" method="POST">
and
<textarea name="text">
How do i load data into textfields after clicking a checkbox & after doing it, i need to disable that textbox, but again as i uncheck it, need to remove that data & make the textbox enable to manually enter data. I tried this code,i'm new to jquery/ajax, can't figure out how to solve this problem.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#chk').click(function(){
if($(this).is(":checked"))
$("#txtaddress").removeAttr("disabled");
else
$("#txtaddress").attr("disabled" , "disabled");
// here, i don't know how do i assign $row['address'] to txtaddress by
// using php mysql
});
});
</script>
<!-this is my html code-->
<form>
<input type="checkbox" id="chk" name="chk">Same as home address?
<input id="txtaddress" name="txtaddress" disabled type="text">
</form>
Try the following,
<script>
$(document).ready(function(){
$('#chk').click(function(){
if($(this).is(":checked"))
$("#txtaddress").val(""); //reset the textbox
$("#txtaddress").removeAttr("disabled");
else {
$.ajax({
type: 'GET',
url: destinationUrl, // your url
success: function (data) { // your data ie $row['address'] from your php script
$("#txtaddress").val(data); //set the value
$("#txtaddress").attr("disabled", "disabled");
}
});
}
});
});
</script>
From your php script you can echo $row['address'], so the data in success function can be put into textbox in ajax
javascript code:
$(document).ready(function(){
$('#chk').click(function(){
var txt = $("#txtaddress");
($(this).is(":checked")) ? txt.attr("disabled" , true) : txt.attr("disabled" , false);
});
});
I hope this is what u meant.. Hope this might help... :)
$('#chk').click(function(){
if(! $(this).is(":checked")){
$("#txtaddress").removeAttr("disabled");
$("#txtaddress").val('');
}
else{
$.ajax( {
url: "get_row_details",
type: "POST", //or may be "GET" as you wish
data: 'username='+name, // Incase u want to send any data
success: function(data) {
$("#txtaddress").val(data); //Here the data will be present in the input field that is obtained from the php file
}
});
$("#txtaddress").attr("disabled" , "disabled");
}
});
From the php file echo the desired $row['address'].This value will be obtained at the success of the ajax function
i want to submit all form's infomation with an onclick event function (i don't want to use a conventional submit ). How can i use the post or ajax method?
here is my code
$("#login_form").bind("click", function() {
var qtyVal = document.getElementsByName('id[]').length;
$.ajax({
type : "post",
cache : false,
url : "abcd.php?ref=xyz",
data : $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
return false;
});
You should not use from this keyword here. You click on a button to send the form data,so this will return you the button element. You should not use from 'click' event for your form too. You can do like the following code:
function send(){
$.ajax({
type : "post",
cache : false,
url : "abcd.php?ref=xyz",
data : $('#frm').serializeArray(),
success: function(data) {
alert(data);
}
});
return false;}
<form id="frm"><input type="button" id="submit" onclick="send()" /></form>
Are you looking for .submit() ?
If login_form is really a form (i.e. <form id="login_form">), you can do:
$("#login_form").submit();
to submit your form the conventional way without AJAX call.
I am using cakephp and jquery with the form (file-field with submit button) to upload picture.
All I need to do is to do AJAX image upload form. I don't want to refresh the page. So I bind event.preventDefault on submit the form. But I am not sure that the $_FILE['y'] is stopped by the event.preventDefault.
I wonder if the form is submitted ,and I bind event.preventDefault on submit the form.
Do the superglobal,such as $_REQUEST['x'] , $_FILE['y'] ,$_POST['x'] ,$_GET['x'] still there?
if not there , how to do this?
thankyou.
<script type="text/javascript">
$(document).ready(function() {
var getAjax=function(event){
$.ajax({
'url':'<?php echo $this->webroot;?>vehiclePictures/addImageAjax/',
'data': {'x': 33,'y':44},
'dataType': 'json',
'type': 'GET',
'success': function(data) {
if (data.length) {
$.each(data, function(index, term) {
alert(term[1]);
});
}
}
})
event.preventDefault();
};
$('#imageUploadForm').submit(getAjax);
});
</script>
If you're using a button to submit the form, I'd just add return false to the button and have it run the ajax-call instead. Not sure if this is what you were wondering tho?
Like this:
<form method="post" action="someFile.php">
//Form here
<input type="submit" id="buttonToPostForm" />
</form>
function ajaxCall() {
$.ajax({
//Ajax data goes here
});
}
$("#buttonToPostForm").click(function() {
ajaxCall();
return false;
});
And fill in so the data from the form is sent like in you original code.
Hope I understood the question correctly, if not I apologize:)
i have the following javascript file named coupon.js -
jQuery(document).ready(function(){
jQuery('.appnitro').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
success : function( data ) {
for(var id in data) {
jQuery('#' + id).html( data[id] );
}
}
});
return true;
});
});
sms.php -
<?php
//process form
$res = "message deliverd";
$arr = array( 'content' => $res );
echo json_encode( $arr );//end sms processing
unset ($_POST);
?>
i am calling like this -
<form id="smsform" class="appnitro" method="post" action="sms.php">
...
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit"/>
</form>
<div id="content"></div>
Now i expected that after a successful form submission the div "content" would show the message without any page refresh.
But instead the page redirects to /sms.php and then outputs -
{"content":"message deliverd"}
Please tell where i am going wrong. My javascript is correct . No error shown by firebug. Or please tell some other method to acheive the reqd. functionality.
Even this coupon.js is not working-
jQuery(document).ready(function(e){
jQuery('.appnitro').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
success : function( data ) {
for(var id in data) {
jQuery('#' + id).html( data[id] );
}
}
});
e.preventDefault();
});
});
Not working even if i add return fasle at end. Please suggest some other method to acheive this functionality
The reason why the page is refreshing is because the submit event wasn't suppressed.
There are two ways to do this:
Accept an event object as a parameter to the event handler, then call preventDefault() on it.
return false from the event handler.
Answer to your revised question: You are accepting the e parameter in the wrong function, you should accept it in the submit handler, not the ready handler.
I believe you need to cancel the form submission in your jquery. From the jQuery documentation:
Now when the form is submitted, the
message is alerted. This happens prior
to the actual submission, so we can
cancel the submit action by calling
.preventDefault() on the event object
or by returning false from our
handler. We can trigger the event
manually when another element is
clicked:
So in your code:
//add 'e' or some other handler to the function call
jQuery(document).ready(function(e){
jQuery('.appnitro').submit( function() { $.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
success : function( data ) {
for(var id in data) {
jQuery('#' + id).html( data[id] );
}
}
});
//return false
return false;
//or
e.preventDefault();
});
});