Bootstrap dropdown password recovery submenu - javascript

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');
});

Related

Command external field value to be sent with form

I have two forms on one page.
The first form is used to make a calculation (fieldvalue1 + fieldvalue2 = calculatedfield)
The second form is simply just to capture information (Name, Email, etc.)
The first form has no submit button, but the second form has a submit button. Currently, when the user fills in all the info and clicks submit, then only the second form's fields get sent to my admin email.
Is there a way to send calculatedfield along with the form fields sent to my email when clicking the submit button on the second form?
I would like to add a code snippet to command the calculatedfield to also be sent along with the fields of the second form. Not sure which code to use...
I would greatly appreciate any assistance.
Add a new hidden field (lets call it hiddenCalculatedField) to your second form.
In the first form, add a onChange hook to the calculatedfield, and copy the value to the hidden field. This will get submitted when the second form is submitted.
In this example, it assumes
$(document).ready(function() {
$("input[name='calculatedfield']").change(function() {
$("input[name='hiddenCalculatedField']").val($(this).val())
})
}

Form value set with JavaScript fails validation

I'm trying to create an autologin script for https://sso.verisk.com/login/default
I'm able to load the page and populate the Username and Password fields, but after clicking the Sign In button it will say "Please enter a username" and "Please enter a password". If I simply delete a character from the populated field, it will pass the validation.
To narrow it down, I've visited the page at https://sso.verisk.com/login/default and used the console to enter:
document.getElementById("okta-signin-username").value = "username"
document.getElementById("okta-signin-password").value = "password"
document.getElementById("okta-signin-submit").click()
As mentioned, this populates the Username and Password, but the validation doesn't detect field values until a character is either deleted or added manually. I've tested forms on other web sites with success so I'm not sure why this one is failing. Would greatly appreciate any points in the right direction!!
I believe the proper question could be "how can I submit a form programmatically"
The solution is this
Forms work like this, don't always think like a human when you deal with systems. The query selector is simply "form" because form is the only one form element in the entire document.

Interacting and Submitting HTML form with JavaScript in Swift

Trying to submit an HTML form / clicking a button from this web page: https://www.vegvesen.no/kjoretoy/Eie+og+vedlikeholde/skilt/personlig-bilskilt/sok-om-personlig-bilskilt
I've tried to use both .submit() and .click() with no success
webView.evaluateJavaScript("document.getElementById('personlig-kjennemerke').click();", completionHandler: nil)
So what I try to do is to fill in the text field with "REGNR" I then try to click the orange button to submit the form and access the information I am looking for.
I am able to fill in the textfield by using:
webView.evaluateJavaScript("document.getElementById('tegnkombinasjon').val ue='\(plateNumber)'") { (value, error) in
}
Picture of the button I want to press and the text field I try to fill in
But since I'm not able to click the button programmatically I've tried to actually click it in a subview. The page then tells me I have to fill in the text field first even though I have programmatically.
So not only am I unable to click the button, but I'm also wondering how I can make the web page understand that the text field actually already contains text.
Try this:
webView.evaluateJavaScript("document.getElementsByName(\"sjekkreg\")[0].elements[2].click()")
Why by name? Because that form doesn't have an id.
Also I see your form has custom function to send that form:
pkCtrl.submit(mineFelt,sjekkreg)

Polymer iron pages same form ID between element

I try to make 2 page (signin and signup) using app-route and iron-pages, which both of them contain form with same form id. This is the Sign In template and the Sign In submitForm script. This is the Sign Up template and the Sign Up submitForm script.
When I click submit button in signup page, validation always return false (no input error). When I change the form ID so signin form ID different with signup form ID, I can do signup correctly. Is it a right behaviour? I think I can use same ID to both of the form, since they're in different element.
As mentioned by #a1626, I should use this.$.form which is search for local DOM instead of document.getElementById.

show form and content in "verification" modal

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');

Categories