I have a site where I use jquery ui tabs and in the first tab I display general information and on the second tab I have a form that I would like it to send back some information to the server via xml (ajax-style); update the database and subsequently return information for that same tab to update itself. It appears, however, that whenever a form is submited within a jquery ui tab that there is no way to prevent the "refresh"-style effect and handle the form in a way that the submit doesn't effectively take place thus keeping the active tab still the same. I've tried several approaches such as onclick="return 0;" onsubmit="return 0;" and some snippets to cancel events but I don't seem to be very successful. Has anyone gone through the same problem before?
Thanks!
If you want to do an ajax request, you can omit the <form></form> tag, so when the submit button is clicked, the form is not submitted (no refresh/postback) because the form and its action value doesn't exist. Then just handle the submit button click event and do your ajax stuff from there.
I think you can also return false when the submit button is clicked. ie: <input type="submit" value="Go!" onclick="dostuff(); return false;">
Related
Good day,
Part of a form I created consists of two groups of radio buttons that display specific text depending on which button is selected.
If a user clicks the submit button, but hasn't incorectly inputed something wrong (or has missed a field), the page reloads and displays an error at the top. Unfortunately, the radio button are resetted to no selection, so the user has to choose the options again in order to display the relevant text that needs to be amended.
How can I make it so the radio buttons do not reset once the page reloads (i.e. there selections will be saved)?
Note: I cannot stop the page from reloading after a user clicks submit; it's just the way the CMS is set up.
I've tried some scripts and searched Google, but I cannot seem to get anything to work due to the restrictions of the ancient CMS I'm working with.
<p id="submit">Please select one of the following:<strong class="required" style="color:red">(required)</strong></p><div>
// Here is one of the radio button groups that need to be saved. You'll notice that they are calling a script to display specific text when selected
<input type="radio" name="type" id="selection1" onclick="myOwnBehalf()" required> I am submitting this question on my on own behalf.<br/>
<input type="radio" name="type" id="selection2" onclick="onBehalfSomeone()" required> I am making this question on behalf of someone else.<br/>
<input type="radio" name="type" id="selection3" onclick="anon()" required> I would like to be anonymous.<br/>
....
The radio button selections are reset to blank once the page reloads because the users filled it out incorrectly.
Each time you navigate to a new page (or back to the same page) all of the JavaScript state is lost.
That means you need to pass the old state to the new page one way or another. Here are some ways of doing this:
These require using a scripting language like PHP for your pages:
PHP session (if you're using the PHP scripting language)
Navigate using form POST instead of a simple link
These could be done with just JavaScript
CGI variables in the URL you navigate to, for example mypage.php?choice1=3&choice2=5
Set a cookie then read it
HTML5 LocalStorage
(CGI variables: How to get the value from the GET parameters? )
I have a multistep Drupal 7 form. I'd like to show it in a Bootstrap Popup.
This form works fine on a normal page however when I put it into a Bootstrap popup it closes the popup when the first button is pressed.
I use drupal_render(drupal_get_form('MYFORMNAME_form')) to put the form into the popup body.
How can I make this multistep form work properly in the popup?
when you say bootstrap popup, do you mean a modal window (http://getbootstrap.com/javascript/#modals)? Modals in bootstrap are defined inside the body of the page and just hidden/shown as needed. If you want one to act as its own window, you need an iframe in it, because submitting the form will not trigger whatever mechanism you put in place to show the modal dialog in the first place.
Another option is to use code to re-show the modal, with the form at whatever stage it is at, with each page load (next button, etc.)
A last option is to do all of the form navigation via AJAX. Then you don't ever need to put the form inside an iframe nor include code to re-show the modal with each submission of the form, since the page never gets refreshed.
IMHO the iframe is easiest, and a decent option if you don't have any qualms about iframes. You just need to place the form in a separate page and include it inside the iframe. Some theming work will enable you to turn off the normal page chrome that will make your modal look like a miniature version of your site -- you probably don't want your header, navbar, footer, etc. inside the modal.
You could use the Popup forms module. It claims:
Works well with multi-step forms. Just don't add [the] "Next" button id to
[the] 'close_buttons' array to keep [the] popup open [when navigating between steps].
This solution is not using a Boostrap Modal ("Bootstrap popup") though rather a jQuery UI dialog. It requires a bit of custom coding to use this module. Example code is provided on the project page.
I'm making an app where I have multiple forms on one page but they are all similar; there is a text box and a submit button.
What I would like to do is consolidate all text boxes into one then have many submit buttons. That way the user inputs the data once in the obvious text box at top then decides which category (submit button) he would like to apply the data in the input box to.
Is this possible? I can't find and documentation on how to do this. Thanks!
You can do so by using <%= fomr_tag url: "/myCust" do %> method to create a form and wrap all the fields inside form tag. on submit button you will be redirect to /myCust method.
There you can get all the params in myCust method. You are using rails 4 then define all params under private method as it does. Store each of them. as you may want.
I want to create a settings-dialog in my wicket page. I created a ModalWindow that contains a form to achieve this. This works great, the dialog shows up and it contains the form but now I need to return some of these values in the form back to the caller page. Is there someone who could give me pointers on how to do this?
Thanks in advance.
Quote from ModalWindow API:
"If you want to use form in modal window component make sure that you
put the modal window itself in another form (nesting forms is legal in
Wicket) and that the form on modal window is submitted before the
window get closed"
This way when you submit the form in the modal window actually the parent form gets submitted and you get the values transferred.
I have a very simple asp.net form.
a text box,
a dropdownlist with autopostback,
a submit button
now if i type in some value into the textbox
and then select an item in the dropdown which causes a page postback.
then click on submit button
the value in the text box does not get saved into the autocomplete data store.
if i do the opposite.
select an item from the dropdown which will cause a page postback.
type in some values in the textbox.
click submit.
the value is saved for the autocomplete.
I think this may have something to do with the page life cycle and the viewstate. but how do i get around this issue? I'm using IE8.
I have tried the AutoCompleteSaveForm command. but it does not work if there's a postback immediately after the execution of it.
Use this for IE:
if($.browser.msie){window.external.AutoCompleteSaveForm(FormName)};
It does not work for Firefox and I'm trying to find the answer for that....