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*/}
});
});
Related
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 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">
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.
Currently my AJAX is working like this:
index.php
<a href='one.php' class='ajax'>One</a>
<div id="workspace">workspace</div>
one.php
$arr = array ( "workspace" => "One" );
echo json_encode( $arr );
ajax.js
jQuery(document).ready(function(){
jQuery('.ajax').live('click', function(event) {
event.preventDefault();
jQuery.getJSON(this.href, function(snippets) {
for(var id in snippets) {
jQuery('#' + id).html(snippets[id]);
}
});
});
});
Above code is working perfectly. When I click link 'One' then one.php is executed and String "One" is loaded into workspace DIV.
Question:
Now I want to submit a form with AJAX. For example I have a form in index.php like this.
<form id='myForm' action='one.php' method='post'>
<input type='text' name='myText'>
<input type='submit' name='myButton' value='Submit'>
</form>
When I submit the form then one.php should print the textbox value in workspace DIV.
$arr = array ( "workspace" => $_POST['myText'] );
echo json_encode( $arr );
How to code js to submit the form with AJAX/JSON.
Thanks
Here is my complete solution:
jQuery('#myForm').live('submit',function(event) {
$.ajax({
url: 'one.php',
type: 'POST',
dataType: 'json',
data: $('#myForm').serialize(),
success: function( data ) {
for(var id in data) {
jQuery('#' + id).html(data[id]);
}
}
});
return false;
});
Submitting the form is easy:
$j('#myForm').submit();
However that will post back the entire page.
A post via an Ajax call is easy too:
$j.ajax({
type: 'POST',
url: 'one.php',
data: {
myText: $j('#myText').val(),
myButton: $j('#myButton').val()
},
success: function(response, textStatus, XMLHttpRequest) {
$j('div.ajax').html(response);
}
});
If you then want to do something with the result you have two options - you can either explicitly set the success function (which I've done above) or you can use the load helper method:
$j('div.ajax').load('one.php', data);
Unfortunately there's one messy bit that you're stuck with: populating that data object with the form variables to post.
However it should be a fairly simple loop.
Have a look at the $.ajaxSubmit function in the jQuery Form Plugin. Should be as simple as
$('#myForm').ajaxSubmit();
You may also want to bind to the form submit event so that all submissions go via AJAX, as the example on the linked page shows.
You can submit the form with jQuery's $.ajax method like this:
$.ajax({
url: 'one.php',
type: 'POST',
data: $('#myForm').serialize(),
success:function(data){
alert(data);
}
});
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