Im trying to change the text of a button (this button is part of a requiered form) and after that submitting the data from the button (on another button).
Im using:
$('label').mouseup( function() {
var x = {{Arand|json}};
$(this).addClass('btn-primary').removeClass('btn-default').siblings().removeClass('btn-primary').addClass('btn-default');
$(this).html(x);
});
I also tried using "text" instead of html.
When I try to submit the button I get an error that I have to chose an option from the form - it appears that changing the text of the button also changed his value or it's abillity do hold the original value needed to be submited.
Is there a way of fixing this?
I would like to present a user with the form that they just filled out in a modal that pops up after they click "submit" for verification. I see this as a carbon copy of the form, but with each field disabled or grayed out so they can look it over and confirm that everything is right. To make changes to the form at this stage would require that they cancel out of the modal and would be taken back to their form.
I am having trouble getting the data that is contained within the form. Is there an easy way to do this with jQuery or JavaScript?
Or is there another strategy for allowing the user to look over what they just changed that I am missing/forgetting?
You can display a clone version of the form in the modal:
var $clonedForm = $('#myformid').clone();
$('input, select, textarea', $clonedForm).attr('disabled', 'disabled');
$clonedForm.appendTo('#modalid');
I'm trying to have users enter info into a form (via radio buttons), manipulate the input data, and write resulting text onto the middle of a web page--beneath the radio buttoned form. So I have variables assigned to whenever a user selects a radio button, the onClick event calling a function something like:
function saveValue1(value) {
someVariable=value;<br>
}
And when users click a Submit button, a function works like it's supposed to, ultimately writing an output string. The problem is how to write the string value in the middle of the page. I have this [pseudo]code at the end of the function (pretend the string I want to write to the page is named aVariable):
document.getElementById('aPlace').innerHTML=aVariable;
And of course there's HTML in the displayed page like this:
<div id="aPlace"></div>
After a user pressed the form's Submit button the correct output variable is displayed very briefly, and then disappears. Why is this? And how should I be writing this code instead?
Thanks for helping a newbie, as always.
The form is probably submitted. put a "return false" at the end to stop it submitting the form
It seems that the browser is refreshing? How is the form data handled?
If the form is needed only to add the text to the page, I would add a button
<button onclick="saveValue1("+value+");")>
and avoid submitting the form.
I'm working on the Web GUI of an appliance-like product.
I have an HTML form that works fine: it shows a list of things with checkboxes, the user checks some of them and clicks the "remove" button which submits the form. The server gets the POST, removes the items, and refreshes the page. All fine.
There's a requirement to add an "are you sure?" confirmation to the form. If I add a call to
confirm("are you sure?");
as the onsubmit method in the FORM tag, or the onclick in the submit button tag, it works fine but uses the ugly browser-native confirm dialog.
Elsewhere in the product we have a nice custom CSS-styled confirm dialog I'd like to use, but it works like this: At the appropriate place, you put a call to
myConfirm("Confirm", "Are you sure", "Yes", "No", confirmCallback);
This puts up a clickmask, customizes a dialog, centers and displays it, and then returns FALSE and the form doesn't submit.
Later when the user decides, if they press "Yes", it calls the confirmCallback function. In the other, Ajax based pages of the product this gathers info, creates a postBody and uses Prototype's Ajax object to post it, and all is fine. (If "No", then the dialog and clickmask are removed and things continue.)
On this simpler page, with the pure HTML form, I have a confirmCallback function that looks like this:
var confirmCallback = function() {
document.myForm.submit();
}
and it fires OK, but when the form is submitted, the remove button has ALREADY been clicked, and the false returned by the custom confirm suppressed submission. Instead, this is considered a new submission, and the remove button was not actually clicked, so it is not considered "successful" in terms of W3.org's HTML 4 standard section 17.13.3. The server gets the data, no remove button, says "I got it but I dunno what you want me to do with it" and just does nothing but serve the next page.
If you're read this far, THANK YOU, and here is my actual question. How can I, in my confirmCallback javascript function, in a crossbrowser manner, cause the remove button to fire, become "successful" and submit along with the rest of the data?
Sounds like you're gonna need a hidden field to pretend to be the pressed button, and each button will require no name, but instead an onclick event to manipulate the value of the hidden field.
If the name of the buttons are all different, you might need to use DOM methods to add the hidden field because I don't think you can change the name of a field once it has been added to the DOM in all browsers.
If you require this solution to still work without JS, then you may need play around with the JS logic a little more (to do more modifications to your initial DOM tree) or modify the server code. You could even put the "Are you sure" behaviour into the response then...
Assuming that the remove button is the submit button for that form then probably the easiest solution is to give the form an id
<form id="submitForm"...
Then in your confirm call the form submit
document.getElementById("submitForm").submit()
I think that will do what you're asking but it seems like you were pretty much at that solution already so if you're asking something else let me know.
In your callback, remove the onclick handler for the button (causing the confirmation), then trigger a click on the button. This will cause the button click to submit the form and result in the button causing the submit to be posted back along with the form data.
var confirmCallback = function() {
$('submitButton').stopObserving('click');
$('submitButton').click();
}
I have an html form and within the form I have a <button> element. I am using jquery to redirect the page upon clicking the button (essentially I wanted to nest form elements but since its not valid xhtml I used a javascript workaround).
Furthermore, clicking the button grabs text from an input field, appends it to the query string then redirects the page (note that both the input field and the button are inside of the html form).
Now for what I want to do: I also want to have the same functionality when the user hits the 'enter' key from within the previously mentioned input field (i.e. same functionality as if the <button> was pressed. I have already written code that binds to the enter key (when I press enter in the input field I can get an alert to pop up). The problem is that since this input field is within <form> tags, I cannot seem to override the default action which is: upon pressing enter trigger the submit button. Is it even possible to override this and have the pressing enter event redirect the page to something other than whatever <form action is set to? Thanks.
Try
$('form').submit(function () {
return false;
});
This would really go against accessibility, but I think you could cancel the default action which is on the 'submit' event, with:
$('form#foo').submit(function(e) { e.preventDefault(); });
If I'm understanding correctly... or program that function to be dynamic and have it submit or not submit depending on a factor/flag.