I am using a jQuery plug-in to implement an accordion wizard based on bootstrap. http://sathomas.me/acc-wizard/#prerequisites
One thing that is odd to me is that each Panel is wrapped in a <form> </form> and the JavaScript then looks for each <form> and adds a Next or Back button.
So when you get the the final/last Panel and try to Submit the Form...it only will post the data from the last form.
I am not sure how I can make it take the form fields from each panel and then submit them all on the last form...This seems like a flaw in the design?
So my question is, is this even possible to have multiple forms and then have the last form submit all the data from all the forms combined?
With jQuery you can create a new in memory form var form = $('<form action="..."></form>') and then copy and append HTML from all forms on the page to this form form.append($('form').children().clone()). Then you can post in memory form form.submit().
This solution can only work if you're able to override behavior of submit button on the last form.
Check this fiddle Post all forms from page in one post jsFiddle
Related
NOTE: This is a very specific question regarding Javascript and HTML forms. I have searched and cannot find an answer for this particular question, which involves the Dojo framework, and does not involve JQuery. Please do not mark this as a "duplicate" of a JQuery question, because it does not involve JQuery.
I need to submit a form by clicking a button which is of type "button", not type "submit". However, I also need to include the name of the button that was clicked, which is not normally submitted under these circumstances. The reason for this change (from the original "submit" functionality) is because there can be upwards of a dozen buttons on this dynamic form and if they are all "submit" buttons, the users will press "enter" to move to the next field and will be confused when the form does something unexpected (like submitting) instead of moving to the next field.
The method I have come up with to do this is to change all the button type='submit' tags to button type='button' controls. I then added this small Javascript fragment (we use the Dojo library so this is Dojo syntax):
query("button[type='button']").on("click",function(e) {
dom.byId("myform").submit();
}
This works but on the server side, it's not processed correctly. When a submit button is pressed, the form data (parsed by Chrome) looks like:
myInput1: 1
myInput2: Some Data
_button_Button23: addSomeFields
the last line is the button name and ID. When the form is submitted using the Javascript above, the last line is missing:
myInput1: 1
myInput2: Some Data
I need to add the last element to the form data before submitting it.
I have searched for this information but unfortunately all the existing examples use Jquery, which is not available to me in this case. How can I add this information to the form data using either Dojo or regular Javascript?
you could add the button element to the form on submit, or create an hidden input element and add that to the form
var form = dom.byId('myform');
form.appendChild(e.target);
form.submit();
Problem:
I never specify a submit button, as I use ajax to submit my forms, but some forms have an auto-submit feature regardless.
Background:
Throughout my application I have instances when clicking the enter button will auto-submit a form and other instances where it will do nothing. For example; there are times where I will need to capture the "enter" button to get an auto-submit but other times where it seems to just happen on it's own and I have not found the pattern. Except that the dynamically created forms seem to have the auto-submit feature but static ones do not? Does anyone else have a similar issue.
Example:
All of my forms have the submit button removed and I specify no target or action elements as seen below. All of the forms have their data transmitted through AJAX.
<form id="ajaxForm">
<input>
</form>
<button>ButtonOutSideForm</button>
Not looking for a way to prevent auto-submit
I already know about "onsubmit = return false" and e.preventDefault. I'm not looking for a way to disable auto-submit. My question is why does it's presence seem arbitrary. Thanks.
As LouD pointed out. Some browsers will auto-submit if the form only contains one input element.Why does forms with single input field submit upon pressing enter key in input
So I'm pasting in some code for a form from Salesforce.
This code to be specific: (from the style element to the end of the form) https://gist.github.com/13ab0efd07c2c8cdb3e1
When clicking submit while not filling out any or all fields, I get a form validation check and then a message will popup with the fields that I have not filled out.
However, when I paste the code into our LightCMS template the form validation is not working and just redirects to the thankyou page as if everything went through fine.
They use LightCMS. And even when link to an external js file instead of embedding the js I still get the same results.
I've noticed it adds an "onclick" element on the Submit button on the front-end but it only does that when it's in the CMS not on a bare bones HTML page.
Any thoughts?
i think you should add this
onsubmit=return formvalidator(Document.getElementByid(search-form))
before form action because it will check the form before submitting it. if check fails the action will not occur.
I have to pre-fill a form on this page that I open using javascript. The best code I have managed to come up with thus far is
submitpage = window.open('http://localhost/bookmarks/submitbookmark');
submitpage.getElementsByName("title")[0].value="Good Luck";
I have no control over the page that opens. When I manually fill the form, it works fine and submits everything. Its when I pass variables in the url that it does not accept some. The problem is that none of the form elements on the third party page have id's, so i have to use the getElementsByName() function but the good thing is that there are only four elements, all with unique names so i can use the function like this getElementsByName()[0].
Now, I want to see the form pre-filled with values and leave the option of submitting to the user by clicking the submit/post button. Just for reference, the form method="POST".
I'm building a small website with JQTouch and the first problem I've run into yet is with a form.
I have a form
<form action='action.php' class='jqt' id='ajax_post' method='post' name='pform'>
(where the name attribute is there when I tried to access it with document.pform)and within it is a ul list of a elements as follows:
<a class="submit" href="#" value="somevalue">Text displayed</a>
Underneath, inside the form, I placed a single hidden input field (because I only want to POST one value), where my goal is to populate it by clicking one of the links and then submitting:
<input name='somename' type='hidden' />
On submission, the webserver reports that a POST was performed, and there is a brief slide animation before the page returns to the original form. Trying to hack my way into jqtouch.js to populate the input field doesn't work (where what I'm trying is $form.somename.value = $(this).attr('value'); inside submitParentForm())
The CSS captures well and the list is displayed nicely. In fact, if I remove the submit class and insert my own form submission override with document.somename.value = %(this).attr('value'); document.pform.submit(); inside, for instance, hrefor onClick in one of the links, the POST is performed and the next page is displayed, albeit by reloading and not with a jQTouch animation, which is my goal.
My question: How can I use jQTouch to show a slide animation when I post a form which I want to populate with the value of an a element when a user clicks on it?
Thanks in advance.
I wouldn't submit the form (if I wanted to use a submit button I'd use preventDefault). I'd just use $.post() to post the data and then jQT.goTo to go to the new page with a slide animation. The new page is in jqTouch, of course, only another div in the same document which makes it easy to set any information you'd like on that page using the response in the callback of $.post().
But this might not be a viable solution to what you're trying to do, I don't really understand the question very well.