We Keep Coding

Bootstrap dropdown password recovery submenu

I'm building bootstrap site and I'm stuck with the Forgot Password option in the Login menu.
When you click the Log In button, which opens a dropdown form, and then click the Forget password link, I want an entirely new form with inputs for password reset (ex. email, username etc.) and new button with different action for password reset. I want the form to appear the same place of the log in form (it should switch).
What's the best way to this?
Here's the snipped i'm using: http://bootsnipp.com/snippets/3kNkX
Thanks in adanvce.

Put the contents of the forgot password form in an HTML file and load that into the little box that holds the login form. I used .slideInRight as the selector for the login form, but it's probably better if you give that box a unique ID and use that as the selector instead.
$('.forgot-password').on('click',function(e) {
e.preventDefault();
$('.slideInRight').load('/forgot-password-partial.html');
});

jquery validate plugin, validating form fields of only current screen

I am using jquery validate plugin to validate form fields . I am also using jqtree . on click of every child node a section of form is visible to user, which is supposed to be filled with values.For every child there is a form content to be filled. Entire tree content is declared within one form only. I have a button in the form which on click generates json file. I am calling the function below to validate form
$("myform").validate();
....
if($("#my-form).valid())
generate the json file
but this is not validating the entire form. suppose I am on childNode1 it validates only form section defined for childNode1. As far as I have understood jquery validate plugin should validate entire form when correct form id is specified. But can anyone tell me what has gone wrong in my approach?

The .validate() method does not "validate the form". It only initializes the plugin on the form. .valid() will programmatically trigger a validation test.
Your code:
$("myform").validate();
....
if($("#my-form).valid())
generate the json file
$("myform") - Is that supposed to be an id, class, or name? As you've written it, it's looking for a <myform></myform> element.
$("#myform") // id="myform"
$(".myform") // class="myform"
$("[name='myform']") // name="myform"
Is your form element called myform or my-form? If it's the same <form> element, then the two jQuery selectors would be the same.
$("#my-form) is missing the closing quotation mark.
If the id of the <form> element is "myform", then your code should be...
$("#myform").validate(); // <- initialize the plugin
....
if ($("#myform").valid()) { // <- test the form's validity
// generate the json file
....
}
OP Title: jquery validate plugin, validating form fields of only current screen
Your question does not seem to have anything to do with the title. There is only one form described in your OP, and since this is JavaScript, only the page that's loaded in the browser is relevant. Not sure what you mean by "current screen".
but this is not validating the entire form. suppose I am on childNode1 it validates only form section defined for childNode1. As far as I have understood jquery validate plugin should validate entire form when correct form id is specified.
By default, the plugin will not validate any form fields that are hidden. You would manipulate the ignore option to over-ride this behavior. Setting ignore to [] will tell the plugin to ignore nothing and validate all fields including the hidden ones.

Button with name = submit becoming disable while using boot strap validations

I am facing a very strange issue.
I have a simple form with a text box. I have two buttons of type submit. If I set name = submit on one of those buttons then buttons are becoming disabled when clicked and not getting posted.
Is this the standard behavior in a boot strap or this can be changed?

You should not name any form element "submit" since that will mask/eclipse the JavaScript form.submit() function and it will not be available!
You can address any form field by its name using document["nameOfForm"]["nameOfField"] or document.nameOfForm.nameOfField. There are already form properties like document.myForm.name or methods like document.myForm.submit().
Using names of form properties or methods that are already defined by the browser will interfere with any functionality that depends on them.
Other common field names to avoid:
action
enctype
method
name
target
It appears your JS library of choice is using form.submit() to submit the form.

Do not use the properties of a form, such as submit, reset, length, method to set the name or id attribute of form, field elements. Name conflicts can cause the problem.
For example, you cannot submit the form after validating if use submit to name the Submit button:
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
DOMLint has a complete list of rules to check the markup for these kind of problems.
Reference : the name conflict warning in the official documentation.

Work of form action ./login and onsubmit keyword

Please explain the piece of code below, emphasize on ./login and onsubmit keywords..
<form action="./login" onsubmit ="return validatedata()" method="post">

This is a form tag of HTML language. It says following things:
content of this form (such as Text Box or Radio Button or Combo Box or other HTML component values) send to ./login url. It is better use HttpServletRequest.getContextPath() for set relative path rather of absolute path.
onsubmit ="return validatedata()" part says: When user click on submit button(with any label) before submit form to ./login url, execute validatedata function in Java Script functions, if this function not existed , user get a java script error(or other script languages).
method="post" part says: this form send with POST method . please see http://www.cs.tut.fi/~jkorpela/forms/methods.html for more information.
for more information related to form tag see : http://www.w3schools.com/tags/tag_form.asp

This declares an HTML <form> element. When submitting the form it will call the javascript function validatedata(). If the function return true the form will be submitted and if it return false, it won't. The './login' is the destination of the form data. So there is probably a page handling the url http://<your_site>/<where_you_currently_are>/login. It also depends on the technology you use. I don't know if you use a framework such as Struts or if you only use JSPs as is.

Jsoup javascript button clicking

How do I perform a click on a javascript button using Jsoup?
String html = Jsoup.connect(url)
.followRedirects(true)
.data("login_name", username)
.data("password", userpassword)
.method(Method.POST).get().html();
This is the code I used to set the username and password fields in a website, however when I grab the html, it gives me the html of the login page with the page's fields filled out, rather than the page after login. So that must mean that Jsoup simply filled the fields out, but didn't log me in. How would I go about doing that? Also, the login button doesn't have an id element, nor does it have a name element. It only has javascript. Sorry if I'm not being clear, I'm new to this. Here's the html code for the form:
<form name="form" id="form" method="POST" action="/portal/login?etarget=login_form" autocomplete="off">
This is the html code for the login button:
<a href="javascript:document.form.event_override.value='login';document.form.submit();" class="btn_css">
How would I 'click' the login button using Jsoup? Also, I tried using the .post() method instead of .method(Method.POST), however when I did that, my program didn't work, and gave me this message: "Error: 400 error loading URL"
Also I do not own the website, and I'm using this in a native app that I'm building for Android.

When passing a URL in connect method , instead of passing the Login Page URL , pass the link of home page.
Document doc = Jsoup.connect("http://www.website.com/home.php")
.data("email", "myemailid")
.data("pass", "mypassword")
// and other fields which are being passed in post request.
.userAgent("Mozilla")
.post();
Try this and you will get your result.