i am trying to submit my page using jquery with different actions, but below code seems not working
adding user
$("#createBtn").click(function() {
$("#formname").submit(function(event){
$(this).attr('action', 'addUser.html');
});
});
updating user
$("#updateBtn").click(function() {
$("#formname").submit(function(event){
$(this).attr('action', 'updateUser.html');
});
});
EDIT :-
<form:form name="formname" commandName="comandNamd">
i didnt give action name, since i want to change actions.
on click of button, the page is not getting submitted.
You are writing submit handler inside the click handler. This should work.
$("#createBtn").click(function() {
$("#formname").attr('action', 'addUser.html');
$("#formname").submit();
});
Change for update button also.
"i have place my script inside the tag in top of the page"
In that case your script won't actually bind event handlers to your buttons, because the script will run before the form and buttons have been parsed. $("#createBtn") will find no matching element. You can correct this either by putting your script at the end of the page, just before the closing </body> tag, or by wrapping your code in a document ready handler.
Also, the code inside your .click() handler is binding a submit handler to the form, which doesn't really make sense. You just want to set the action:
$(document).ready(function() {
$("#createBtn").click(function() {
$("#formIdHere").attr('action', 'addUser.html');
// OR
$(this).closest("form").attr('action', 'addUser.html');
});
$("#updateBtn").click(function() {
$("#formIdHere").attr('action', 'updateUser.html');
});
});
You said in a comment that the "buttons are inside the form" - if they are submit buttons then the above code should work. The click will run the code shown to set the action, after which the default behaviour (form submission) will continue.
i have fixed the issue, and thanks for your help, since i am using spring form tag,
<form:form name="formName" commandName="command">
but in jquery i was using above form name attribute value, but actually spring form tag generates form id value and final html looks like
<form:form id="formid" name="formName" commandName="command">
after changing the code to have formid, it worked thanks
$("#formid").attr('action', 'addUser.html');
Related
Im having a problem attaching an event to a dynamically generated button. However after some research most of the solutions claim this error is usually generated from a form control. However in my case the error "invalid form control with name='answer'" is being generated and triggered when a button i have dynamically generated is pressed :
$("#BoxInner").append($("<button id='dynamicButton' class='btn btn-success' onclick='clickEvent()'>"+ "Button"+"</button>"));
I have appended a button to an existing div and call an onclick function that removed this element when it is clicked like this :
function clickEvent()
{
$(this).remove();
}
After running this in chrome this method works only on the first button added. After the first button is removed as expected it begins to generate the error "clickEvent" and adding a number count on each click and after reading many posts here about the error being attributed to a form i remain unsure how to solve the issue as the button is completely unrelated to the form on my HTML document and subsequently setting the form to not require validation does not solve the issue with the "novalidate" property. But note, if i remove the attached onclick event the error is not triggered.
Any help would be appreciated :)
$("#BoxInner").append($("<button id='dynamicButton' class='btn btn-success' onclick='clickEvent(this)'>"+ "Button"+"</button>")); // pass this to clickEvent function
function clickEvent(obj)
{
$(obj).remove(); // remove button like this
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="BoxInner"></div>
This is because the event listener is created on page load.
You should do something like this
$(wrapper_that_always_exists).on('click', the_freshly_added_element, function() {
...
});
So in your example it would be something like
$('#BoxInner').on('click', '#dynamicButton', function() {
...
});
When you do this, the BoxInner element will always listen for all clicks on any element inside, initially created or not, that has the id dynamicButton
I want to get the return value for hid and show div after form submit success
<form id='form1' action='api.php' method='post'><input ></input></form>
<div id='layer1'></div>
I tried:
Js
$('#form1').submit(function(e){
e.preventdefault();
$('#layer1').show();
});
It doesn't work. Is there anythings that I should return in the api.php?
As I am using php5.2 I cannot using something like formdata to upload image when doing form submit.
Can anyone help?
Instead of using origin form submit, add a listener on event 'submit'(or just as you did, invoke .submit(), no difference), then prevent default behavior, do it using AJAX. See jQuery API
Just want to get a concept clear here.
suppose i have this html page:
<script>
function_1()
{
... posts a form via ajax
};
</script>
<body>
<div class='car'>
</div>
</body>
On an event I prepend() this form (which I get via ajax) to the above <div class='car'>
<form method='post'>
...
<button type='submit' value='post' />
</form>
The idea is to submit this form via ajax by calling the function_1 function on pressing the submit button.
Does this work? Because when I submit the form it is not calling the function_1, its just posting it via regular Http post.
When we append() or prepend() elements to DOM, do they have access to javascript right away?
Thank you
You are appending those form elements during run time, so you have to register events for it by using event-delegation. And by the way it is a submit button, so whenever you are clicking on it, it will simply invoke its default action, that is submitting the form. So you should use e.preventDefault() to prevent its default behaviour or you should need to change the type of that button from submit to button
Try,
<script>
$(document).ready(function(){
function function_1()
{
... posts a form via ajax
};
$(document).on("click", "input[type='submit']", function(e) {
e.preventDefault();
function_1()
});
});
</script>
You need to use a delegated event handler, for example:
$(document).on("submit", "#your-form-id", function(e) {
e.preventDefault();
// AJAX code
});
Then, the handler will be called on submit regardless of when the form is appended, as long as the form exists.
What I want to do is pretty simple.
I've a form, with a submit button
<form accept-charset="UTF-8" action="/some_url" id="some-form" method="post">
...
<button class="btn" id="remove-selected" type="submit">Send</button>`
</form>
I want to change the html of the button with jQuery when the form is submitted but can't achieve that, seems like the form submission occurs before I can change it.
My code right now, dead simple:
$("#some-form").on("submit", function(e) {
$("#remove-selected").html("Sending...");
});
Thanks for advises!
Your stuff seems working for me, just submit the form via JS to have more control about the sequence and error cases.
$("#some-form").on("click", function(e) {
e.preventDefault();
$("#remove-selected").html("Sending...");
$(this).submit();
});
http://jsfiddle.net/GDAhe/1/
$("#remove-selected").click(function(){
$(this).html("Sending...");
});
You code is correct, you may have forgotten to embed it inside a $(document).ready() method.
I looked all around SOF but no luck to find me answer. It is either too easy or the answer is not just there.
What I simply need to do is to validate the form when my <img id='submit'/> is clicked and submit it afterwards.
$(document).ready(function(){
$('#submit').click(function() {
$('#suzuki_scb').submit();
});
$('#suzuki_scb').validate({
submitHandler: function(form) {
form.submit();
}
});
});
Even this doesn't work and returns form.submit() is not a function.
I think this is what you're trying to accomplish
<script type="text/javascript>
$(document).ready( function(){
$('#suzuki_scb').validate({
// validation arguments go here
});
});
</script>
...
<form id="suzuki_scb">
<!-- Your form goes here -->
<button id="submit">
<img src="[image url goes here]" />
</button>
</form>
From the jQuery validation example they have on the site, all you need to do is call $("#suzuki_scb").validate();. The plugin should take care of canceling the submit action for you. So clicking the submit button with invalid data won't actually submit the form.
Using an HTML Button element with an image inside it is a little more semantically correct than using an image with a JavaScript click event that attempts to submit the form
This page, on jQuery docs, has the information you seek. Here's a snippet from the first paragraph:
This method sets up event handlers for
submit, focus, keyup, blur and click
to trigger validation of the entire
form or individual elements.
Hope it helps.