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:)
Related
I have a form loaded from AJAX. On this form there is a input type button which i would like to manage like it
$("#button_id").on("click",function(){..});
but it's does not work...
My question is how to do this work?
Javascript/Jquery load form code
function openForm('commandForm')
{
$.ajax({
type: "POST",
url: "./forms/commandForm.php",
data: $('#'+frm).
dataType: "html",
beforeSend: function(msg){
$('#ResponseDiv').html('Loding....');
},
success: function(back_data){
$('#ResponseDiv').html(back_data);
}
});
}
commandForm.php
<form id="commandForm" action="postCommand.php" method="post" >
.....
....
<button type="Button" id="postButton" />
</form>
Jquery on postButton onclick
$(document).ready(function () {
$('#postButton').on("click", function (e) {
/*....*/
}); //This don't work
}
PS: I don't want submit the form directly! Just make my own checkform running in my javascript function...out of here. So i want only that the button react on the Onclick ...so to do an alert for example or any javacript function else
Solved my problem with jquery event delagation
More infos here.
Event binding on dynamically created elements?
Now i understood.
This will help you-
$(document).ready(function () {
$("#id").click(function (e) {
//.........
}); //This will work
}
I need your help. I created this simple script. My goal is to update my database with the text inside the textarea of this form. The problem is that the script works only the second time i press the submit button. For some unknown reason (at least for me) it doesn't work the first time.. May you help me, please?
<script>
$(document).ready(function(){
$("#form_dove").submit(function(e){
e.preventDefault();
$("#click_dove").click(function(){
testo = $("#textarea_dove_2").val();
alert(testo);
data = 'testo='+testo;
$.ajax({
type:"POST",
url:"php/update_dove.php",
data: data,
cache: false,
success: function(html){
$('#textarea_dove_2').val(html);
alert('Aggiornato!');
}
});
});
});
});
</script>
<form name="form_dove" method="post" id="form_dove">
<div id="textarea_dove">
<textarea rows="17" cols="90" name="textarea_dove_2" id="textarea_dove_2" >
<?php echo("$testo_dove"); ?>
</textarea>
</div>
<div id="form_submit_dove">
<input type="submit" value="SALVA E AGGIORNA" id="click_dove">
</div>
</form>
The $("#click_dove").click is inside the submit.
This means the click becomes active only after the form is submitted. The code is clear :)
In your case the ajax call is done in the button click handler, but the button click handler is registered in the form submit handler, so only after the first form submit(triggered by the submit button click) the click event handler which is doing the ajax call will get registered.
Solution: You don't need the click event handler, move the ajax call to the submit event handler
$(document).ready(function () {
$("#form_dove").submit(function (e) {
e.preventDefault();
testo = $("#textarea_dove_2").val();
alert(testo);
data = 'testo=' + testo;
$.ajax({
type: "POST",
url: "php/update_dove.php",
data: data,
cache: false,
success: function (html) {
$('#textarea_dove_2').val(html);
alert('Aggiornato!');
}
});
});
});
You don't need two functions here. The $("#form_dove").submit function gets called when the form is submitted and the $("#click_dove").click function is invoked when the button is clicked.
Because you put the definition of the click function inside the submit function, the click function was not declared (ie didn't exist) until the form was submitted (ie. the first time you clicked the button). Then the second time the button was pressed, the click function did your ajax stuff.
In this case, it's most straightforward just do the processing you want in the submit function - it's what you want to happen when the form is submitted. Use the click function if you need to do some checking to see if the form has been filled in properly before submitting it.
<script>
$(document).ready(function(){
$("#form_dove").submit(function(e){
e.preventDefault();
testo = $("#textarea_dove_2").val();
alert(testo);
data = 'testo='+testo;
$.ajax({
type:"POST",
url:"php/update_dove.php",
data: data,
cache: false,
success: function(html){
$('#textarea_dove_2').val(html);
alert('Aggiornato!');
}
});
});
$("#click_dove").click(function(){
//put some validation in here if you want
});
});
</script>
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">
New to Jquery, even newer to Jquery Ajax calls - here is my problem:
I have a small form - email address submit - that fires to a PHP file which inserts the email into a table.
I want to do the following:
Handle the form submission through Ajax so there is no refresh
After successfully writing to the table I want to change the submit button's text to "Success!" for 3 seconds and then back to
"Sign Up" with fadeIn and fadeOut effects.
Here is my code for the form:
<form action="" id="registerform" name="registerform" method="post" >
<input type="text" id="email" name="email" value="Email Address" onClick="empty()" onBlur="determine()" />
<button id="join" type="submit" name="join" onClick="validate()">Sign Up</button>
</form>
Here is my terrible attempt at handling the POST request through Jquery:
$('form').on('submit', function(e) {
$.post('register.php', function() {
$('#join').html('Success!')
});
//disable default action
e.preventDefault();
});
Can anyone comment on how to make the Ajax request work (doesn't seem to be)?
Thanks in advance!
Update
Alright, the following block of Jquery adds the data to the table, however, my button text does not change:
$('form').on('submit', function(e) {
$.post('register.php', $("#registerform").serialize(), function() {
$('#join').html('Success!')
});
//disable default action
e.preventDefault();
});
Any ideas now?
Here is an example of one of my ajax calls
details = "sendEmail=true&" + $("form").serialise();
$.ajax({
url: "yourphppage.php",
type: "post",
data: details,
success: function (data, textStatus, jqXHR) {
if (data == "false") {
console.log("There is a problem on the server, please try again later");
} else {
//Do something with what is returned
}
}
})
And on the server side
if (isset($_POST['sendEmail'])) {
//Do something with the data
}
Of course this is only an example, and you may need to alter this to suit your needs :)
One thing to note is what if (data == "false") does. Well on the server side i can echo "false" to tell the ajax call it was not successful.
You're not actually sending any data to the server. You need to use the 'data' parameter of $.post to send your data.
$('form').on('submit', function(e) {
$.post('register.php', $(this).serialize(), function() {
$('#join').html('Success!');
});
//disable default action
e.preventDefault();
});
Not sure, but does the POST request send anything at all? Try adding the data in the POST request.
$('form#registerform').submit(function() {
var email = $(this).find('input[name=email]').val();
$.post('register.php', {email: email}, function() {
$('#join').html('Success!');
});
return false;
});
Where you're pushing your form data to server in ajax call? change code to this.
var data = {$("#email").val()};
$('form').submit(data ,function(e) {
$.post('register.php', function() {
$('#join').html('Success!')
});
//disable default action
e.preventDefault();
});
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.