i have form and i am using jquery validate jquery.validate.pack.js
its work fine when i press submit button, i just add following code
$(document).ready(function(){
$("#contactform").validate();
});
and class="validate" for text box
but i want to call php file with Ajax after validate is complete.
like
$.ajax({
type: "POST",
url: "email_feedback.php",
etc
how can i do this ?
Thanks
See the submitHandler callback option in http://docs.jquery.com/Plugins/Validation/validate#options
$("#contactform").validate({
submitHandler: function(form) {
//$(form).ajaxSubmit(); // for the default ajax submission behavior
$.ajax({ type: "POST", url: "email_feedback.php"})//, etc... for your own
}
})
This will submit the form to the URL that is in the action attribute of the form via AJAX though:
$("#contactform").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
}
})
Here's an additional link for you as well: http://www.malsup.com/jquery/form/#api
Thanks,
Orokusaki
Related
i have a problem, i have a form with a single input and submit button called "search" in a jquery dialog box. I want to display the mySQL data when clicking on this button in another jquery dialog box . How can i do that ?
Try this
$(document).on('click', '#search', function (e) {
e.preventDefault();
$.ajax({
type: 'get',
url: 'getMysqlData.php',
success: function (data) {
$("#otherDialogBox").html(data);
$("#otherDialogBox").dialog();
}
});
});
I'm learning AJAX by reading some online tutorials, so please understand I am very new to AJAX and programming in general. I have managed to do the following with 3 selectboxes:
populates selectbox 2 based on selection from selectbox 1
populates selectbox 3 based on selection from selectbox 2
Everything is working perfectly
Here is my code:
$(document).ready(function()
{
$(".sport").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_sport.php",
dataType : 'html',
data: dataString,
cache: false,
success: function(html)
{
$(".tournament").html(html);
}
});
});
$(".tournament").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_round.php",
data: dataString,
cache: false,
success: function(html)
{
$(".round").html(html);
}
});
});
});
</script>
Here is an Example
What I want to do
I would like to send the value of the 3 selectboxes to 3 php variables without the form reloading.
My Problem
When the user clicks submit:
The form reloads (which I dont want)
The selectbox values does not get send to my php variables
my code to get the values after submit is clicked is as follows:
if(isset($_POST['submit'])){
$a = $_POST['sport'];
$b = $_POST['tournament'];
:
}
However my code is flawed as I mentioned above.
If any one can help me to explain how to send my form data to the 3 php variables without the form reloading it will be greatly appreciated
If you don't want to submit your form when you click the button, you need to set that input as button and not submit. You can, also, attach the submit event handler to the form and prevent it to submit:
$("form").on("submit", function(e){
e.preventDefault(); //This is one option
return false; //This is another option (and return true if you want to submit it).
});
So, being said this, you could probably do something like:
$("form").on("submit", function(e) {
var formData = $(this).serialize();
e.preventDefault();
$.ajax({
url: 'yoururl',
data: formData,
type: 'post', //Based on what you have in your backend side
success: function(data) {
//Whatever you want to do once the server returns a success response
}
});
});
In your backend:
if (isset($_POST["sport"])) {
//Do something with sport
}
if (isset($_POST["tournament"])) {
//Do something with torunament
}
echo "Successfull response!"; //You have to "write" something in your response and that is what the frontend is going to receive.
Hope this helps!
Try using the javascript function preventDefault().
See this SO question.
Use a <button>Submit</button> element instead of <input type="submit"/> since the submit automatically submits the form.
Edit: And you would have to use on.('click') instead of looking for submit event in your jQuery.
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 form and 2 CHtml::link() with different url.
My form method is get.
What I want: when click in 1 CHtml::link() - submit form to example.com/first using method get
What I want: when click in 2 CHtml::link() - submit form to example.com/second using method post
Does is this possible ? I mean that I need change form method for different submit button and actions.
You can submit form from javascript code:
$('#myLink1', '#myLink2').on('click', function(e){
e.preventDefault();
var method = $(this).attr('href')=='example.com/first' ? 'GET':'POST';
$('#myFrom').attr(
'action',
$(this).attr('href') //href attribute should contain appropriate url
).attr(
'method',
method
).submit();
});
Also you can use jquery form plugin for sending form in ajax manner:
$('#myLink1').on('click', function(e){
e.preventDefault();
$('#myForm').ajaxSubmit({
url: $(this).attr('href'),
type: 'GET',
success: function(){/*your code here*/}
});
});
$('#myLink2').on('click', function(e){
e.preventDefault();
$('#myForm').ajaxSubmit({
url: $(this).attr('href'),
type: 'POST',
success: function(){/*your code here*/}
});
});
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">