I want to submit a form without using submit button how can i do that?
Using jQuery you can do this. Check this
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
Use javascript. Something like
document.forms["myform"].submit();
or
document.myform.submit();
You need to set the name (1. example) or id (2. example) attribute for your form to make this work.
Through javascript you can call form.submit()
Use jquery's form methods to serialize the form variables and send via ajax.
http://api.jquery.com/category/forms/
You can add some javascript logic to ANY submit methods by passing a function to the form's submit event handler.
Eg.
$('#my_form').submit(function(){
alert('Handler for .submit() called.');
return false;
});
Returning false blocks the form from being submitted by all other methods (including the "traditional" submit button). You'd put your ajax code before the return statement.
or add bind the submit function to ANY dom element (image,button,etc.)
Eg.
$('#my_cool_image').click(function() {
$('#my_form').submit();
});
See more at http://api.jquery.com/submit/
Good Luck
Related
An ajax function returns a form. I want to send this form values to the other ajax function.
Chrome doesn't have a problem, but Firefox can't do this and sends empty values!
For example, I return a edit form with ajax and the edit button function can't get/post form values.
Sounds like you have event handler issues. Maybe all your event handling code is run prior to your new form existing in the dom? Without sample code, we have no idea how you are trying to accomplish this. Maybe, in your form tag, include an onsubmit attribute to handle your submission:
<form onsubmit="sendForm(this); return false;">
<script>
function sendForm(obj) {
var data = $(obj).serialize();
$.post('myEndpoint.cfm',data, function(response){
// response handling code here.
});
}
</script>
Normally, when I'd do an ajax call to a page with jQuery's $.post(), I'd post to a specific page (i.e. ajax.php) with something like:
var submissionId = 1;
$.post('/ajax/ajax.php', {
submissionId: submissionId
}, function(data) {
alert(data);
});
and inside ajax/ajax.php, I'd manipulate the data how I'd want with $_POST['submissionId']. What is the equivalent to this in CakePHP if I'm posting to a controller?
Do I still use $_POST['submissionId'] or $this->data?
If using $this->data, do I need to create a <form> to wrap the event handler in?
you should create form with cake helper (hide it with css or jquery if you don't want it to be there) and use jquery form plugin
you can submit the form with jquery with submit()
so in the controller you can use $this->data
I can't get the .submit() jquery function to work I've boiled down everything in my code to:
<form action="/server/addserver.php" method="post" accept-charset="utf-8" id="mainform"><input type="text" name="test" value="" /><input type="submit" name="submit" value="Submit" id="submitbutton" /></form>
<script type="text/javascript">
$("#submitbutton").click(
function(){
$("#mainform").submit();
return false;
});
</script>
Seems to me this should 1 - stop the default behavior of the button then 2 - manually submit the form.
If i swap out .submit(); with .hide(); that works. Is this not the preferred way to manually submit a form after first running some ajax validation ?
Thanks
You can do:
$(function () {
$('#mainform').submit(function () {
if (isFormValid()) { // do your validation
return true;
}
return false;
});
});
This will run when the form is submitted (just use the normal <input type="submit" /> button). Returning false here will prevent the page from posting.
If you wanted to bind the event to your button, try it like this:
$(function () {
$('#submitbutton').click(function () {
if (isFormValid()) { // do your validation
$('#mainform').submit();
}
return false;
});
});
First, there are a couple things I think you should be aware of:
Anytime you want to bind an event to a DOM element right off the bat like that, you should make sure the page has fully loaded. If in doubt, wrap your code inside $(document).ready(function() { /* code to execute after page load */ });.
Also, the .trigger("submit") method doesn't work if the name attribute of the input[type="submit"] element is set to the value "submit". Since .submit() called with no arguments is a shortcut for .trigger('submit'), then anytime you call JQuery's .submit() method on an element, you would want to make sure and assign the input's name attribut something other than "submit".
Now, to answer your questions; first about whether returning false is the preferred way to manually submit a form, the answer is usually no. The reason is that returning false does three things, and you usually don't want to do all of them. It prevents the default browser behavior for the event, it also stops the event from bubbling, and, it immediately returns, exiting the function. Usually, you probably just want to either event.preventDefault() or event.stopPropagation()… or even unbind the event altogether. In this case though, in my opinion, returning false rather than calling the appropriate evening methods seems to muddle the intention of your code.
If you also need to prevent the default browser action on the submit event, you can use JQuery's alternate trigger method:
$('#mainform').triggerHandler('submit');
.
Though, the validator method itself should probably be where you call form.submit() in the case that there are no errors. It should also be where you handle form submission, since it is the gatekeeper, so to speak.
All in all, if you're going to the Validator plugin, you should follow it's own conventions. Ensure the form does a default submit by adding name="submit" to your submit button and then remove all the JQuery code you have and replace it with this example from the Validator documentation:
$("#mainform").validate({
submitHandler: function(form) {
form.submit(); // Don't use a JQuery selector here, just "form"
}
});
That should allow the plugin to operate as expected. The last step would be to add your validation rules, of course. I hope that helps. If you still have trouble with eventing, try using JQuery's Event object methods for debugging on the console.
I have a list of check boxes. I want to check them and submit.
I should be able to check 2 entries and and submit it to compare.php
or i should be able to check one and send it to insert.php.
is this possible ?
Yes, you definitely can, though perhaps the logic to determine the flow should be on the server side (clients have a habit of sending bad things, which you can deal with on the server-side).
I would use jQuery, though native Javascript would work fine (it'd be more complicated, though).
I'd do something like:
<form id="myForm"></form>
<script type="text/javscript">
$('#myForm').submit(function() {
// Look at form inputs here and set the form action accordingly.
// Note: 'this' refers to the form DOM element.
this.setAttribute('action', 'myurl.php');
});
</script>
you can create a frame and do that.
You can use AJAX to do this. Have you form action point to a JS function that would do something like:
if(checkbox1.checked==1 && checkbox2.checked==1) {
//ajax request to compare.php
} else if(checkbox1.checked==1 || checkbox2.checked==1) {
//ajax request to insert.php
}
you can do this by using AJAX form submit
I want to post the Form but don't want to use the Submit method. If I use JQuery, how to handle the Form input controls?
You can use the jQuery AJAX .post function functions. An example (untested, but should be working):
<script>
function postit(obj) {
var data = $(obj).serialize();
$.post($(obj).attr("action"), data, function() {
//Put callback functionality here, to be run when the form is submitted.
});
}
</script>
<form action="posthandler.php" onsubmit="postit(this); return false;">
<input type="text" name="field">
<input type="submit">
</form>
Also, read about serialize
(Of course you need to include the jQuery library in your code before using this code).
Just create a function that is triggered by whatever event you want, for example: (found this code in another question)
function example() {
// get all the inputs into an array.
var $inputs = $('#myForm :input');
// not sure if you wanted this, but I thought I'd add it.
// get an associative array of just the values.
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
}
After that you can do whatever you want with the input values. You might want to consider using more advanced processing though, there are plenty of plugins that can provide this kind of functionality.
I am not sure if I understood the question correctly.
If you don't want to use submit(), you can do the same thing via jQuery.post() using Ajax. The main difference is you have to construct the key value data from the input fields yourself rather than the browser doing it automatically and you won't get a page refresh.
Either Post function or Load function will work.
#PRK are you trying to post the Form when the page loads or when a user hit a button?
load(url, parameters, callback)
eg:
$("#loadItHere").load("some.php", {somedata: 1});