Develop Reference

How to hide labels until the submit button is clicked?

I am working with Spring Controller and JSP project. I have a jsp page in which I have one button which is Process and once I click that button, it shows me two radio button just below it and a Submit button as well.
And after clicking Submit button, if everything went fine, then I show - as this data will come from controller -
Success= true
Error= none
But as you can see in my jsfiddle. When my form gets loaded after I hit the jsp url it comes like this on the browser -
Process
Success=
Error=
Meaning, it has Process button at the top and just below Success and Error label with no values in it as we haven't passed any values yet from the controller. But it looks pretty weird for the users.
So what I am trying to do is, once my page gets loaded or I click Process button - I don't want to show Success and Error labels at all. It should be shown only after the submit button is clicked with its appropriate value in Success and Error depending on what is passed from the controller.
Is this possible to do in jquery? If I am right, basically I want to hide it until submit button is clicked...
Or is there any better design to show the Success and Error label with what I am trying to do?

It seems to me that you wouldn't need JavaScript to do this since as far as I can tell the form submission goes to the backend. In JSP itself you could just do a check like:
<% if (success.length > 0 || error.length > 0) { %>
<!-- success / error labels go here -->
<% } %>
If you actually wanted to do this via JavaScript, you could use something like:
if (!$("#success-value").text().length && !$("#error-value").text().length) {
// hide the labels
}
http://jsfiddle.net/4Nmqk/25/

have a look on my fiddle if it meet your idea.
jsfiddle.net/4Nmqk/26

How do I add jQuery click event to Django admin save and continue button?

I am trying to add some elaborate javascript validation to a django admin form. When the user clicks any of the three types of save buttons (save, save and continue, or save and add another) my javascript will run. Part of what it does is make an ajax call to provide special checks before posting. When I capture the click event using jquery of the add and continue button, sometimes I stop the form being submitted and sometimes I allow it to be submitted. Sometimes, only warnings are thrown, rather than errors, and then the user can decide that the form should continue to be submitted.
When it is finally submitted in the end, it needs to be submitted using the process dictated by the button they clicked originally. I found that adding JS of form.submit(); only submitted according to the save button, taking the user back to the model list, even if the user originally clicked the save and continue button.
I changed my JS from form.submit(); to capture the button itself and to trigger a click of it that bypasses the validation if the user has chosen to disregard the warnings. But still it returns to the model list after saving, even if the clicked button was save and continue.
What is the Django admin doing client side to dictate a save and continue instead of a plain old save when the user pushes that button?
So here is the short, summarized version of my question...
How can I, using Javascript (including jQuery), force a Django admin form submission that will:
save and continue
save and add another
Thanks in advance for any assistance.

I figured this out. I had to create a hidden field with the name of the button that had been clicked and the value of the button that had been clicked and submit that field along with the form. Worked great!
EDIT (From 02/2020)
So I originally posted this Q&A years ago and haven't been working with Django for the last few months, but I see that someone wanted my code. Working from memory and a few pieces of code I still have around, it was something like this (which is untested)...
var frm = $('form');
var chosenBtn = frm.find('[name="_save"]');
var btns = frm.find('[name="_save"], [name="_addanother"], [name="_continue"]');
btns.unbind('click.btnAssign').bind('click.btnAssign', function(e)
{
chosenBtn = $(this);
});
frm.unbind('submit.saveStuff').bind('submit.saveStuff', function(e)
{
// Add your own validation here. If the validation fails, you can call:
// e.preventDefault();
// But if it works, no need for that line. If everything works...
frm.append(
[
'<input type="hidden" name="',
chosenBtn.attr('name'),
'" value="',
chosenBtn.attr('value'), // or maybe chosenBtn.text()
'" />'
].join(''));
});

Reset inputs in the previous form for a Jquery Mobile Multi Page Application

I developed an application using Jquery Mobile with multi pages (each one has an individual form) in a single html file.
And I haven't figure out until now how I can clear all fields of a previous form when the
button Back (type data-rel="back" located on page header) is pressed, and the previous form is showed.
My flow is similar as described bellow:
Show page Login
On Login page fill fields (user, password), validate the form and submit it.
After submit, change page for second page (Same HTML, data-role="page" )
After press Back Button on the second page (not browser), the Login page
still showing all input fields filled.
I saw a lot of snippets but not in particular related with this issue and when I tried
to apply some of them I didn't get the clue to solve this.
Someone could help, please. Thanks!

If you want to clear the fields each time the form is visited you can simply use the pagebeforeshow event:
$('#page1').on('pagebeforeshow', function (event, data) {
//clear fields here
});
If you only want to clear the fields when coming back from the second page, the same event has a second argument which tells you where you are coming from.
$('#page1').on('pagebeforeshow', function (event, data) {
var prevPageID = $(data.prevPage).attr("id");
if (prevPageID == "page2"){
//clear fields
}
});
API doc can be found here: http://api.jquerymobile.com/pagebeforeshow/

APEX 3.2 Javascript Function Confirmation for 'Cancel' button

I am looking to create a JavaScript function that will display a confirmation popup box when a user clicks on the ‘Cancel’ button in an APEX 3.2 application.
I want to ask ‘Are you sure you want to cancel this issue?’. Show a ‘Yes’ and ‘No’ button. If the user clicks ‘Yes’, send them to page 1. If the user clicks ‘No’, keep them on this page (2).
I just need to know how to send the user to page 1 or keep them on page 2. Many thanks!!!
function confirmCancel()
{
var r=confirm("Are you sure you want to cancel this issue"?);
if (r==true)
{
Go to page 1
}
else
{
Stay on page 2
}
}

There are maybe some functions in the APEX 3.2 JavaScript API that could be useful for you (confirmDelete() for example).
Else you can use apex.submit, passing an item with a specific value, then depending on that item value you can have a page branch.

Left Navigation Validation

I have a master page in which leftnavigation.jsp and header.jsp are present.Now leftnavigation contains hyperlinks to few of the webpages(say general.jsp, contact.jsp).On clicking these hyperlinks , these webpages gets opened.like if i click general link, it gets opened, and if i click the link of contact.jsp , contact webpage gets opened.Now these webpages have validations on the save button at the end of the form .
Now i want to have these validation (every webpage has a validation function on save button)to work when a user clicks a link on the left navigation to change the webpage.
The leftnavigation.jsp does not contain any form element. it just contains links or scripplets
any suggestions?

Sounds simple enough. You could make the navigation bar links call the validation function for the forms when clicked. Something like this perhaps:
<a href="anotherpage.jsp" onclick="validate(); return true;>Click me!</a>
Just a warning though: it's impossible to guarantee validation in this manner, users could bypass the validation (the user could click a back button for example). If this is what you're trying to achieve, consider running a validate function onpropertychanged or onkeyup. And, as always, form validations should (almost) never be a hinderance; don't show alert messages or do anything REALLY distracting if a user doesn't type something right.
Notice how the code above would let the user change pages regardless of the form's validation status. You could make the onclick function return false if the form failed validation, but this can be bypassed, and it is a hinderance to users.
If this is really necessary, have the links work regardless, but show a small message, possibly in the form of a div quietly pop up at the top of the page warning the user that one of their form entries was incorrect.

Listen for a click event on your navigation links then run your validation function:
function listen(event, elem, func) {
if (elem.addEventListener) {
elem.addEventListener(event, func, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + event, func);
}
}
var links = document.getElementsByTagName('a');
listen('click', links, validationFunction);
If you're passing in variables, then wrap your validate function in an anonymous function:
listen('click', links, function(param) { validationFunction(param); });