show form and content in "verification" modal - javascript

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

Related

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)

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

Retaining form values when clicking cancel

I have multiple html forms on a page with pre-filled value. For each form, the user has the option to modify the form and submit. But there is also a cancel button. If the user clicks the cancel button (after some modification), the original value will be retained in the form. What is the best way to do it using javascript?
I could retrieve the original value from the server. But really want to do it on the client side.
From MDN
type: reset: The button resets all the controls to their initial values.
So:
<button type="reset">Cancel</button>

Adding Required in input field AngularJS

I have used <required> inside <input>.Also I tried using ng-required="true". But the modal closes itself even if the required field is left empty. Whenever this modal closes,
Please fill out this fielld
shows up but modal gets dismissed even with blank input fields.
See this plunk
How do I make sure that the form is filled completely before this form is submitted.
The required and ng-required attributes only affect the validity of a form. If you want to prevent your modal buttons from working you'll need to hook up the form's state to something like ng-disabled. Check this plunker: http://plnkr.co/edit/ru4uqgpcWKyGwCFfZPoO?p=preview
You'll see that I wrapped your modal body in a form named "eventForm", and added ng-disabled="eventForm.$invalid" to your "OK" button.
You can read more about forms in Angular here: http://docs.angularjs.org/guide/forms

Appending a bunch of check box inputs to a form before submission and then hiding them

For a form I'm building, I'm using a jQuery UI dialog to give the user a list of about 50 check box options. The text boxes get removed from the form completely when they're added to a dialog, so I have to clone and reinsert them to the form before submission so that all of the check box values will be submitted along with the form. The problem is that the checkboxes, when added back into the form, appear visibly. I'm just trying to make them invisible and still be able to submit the values.
I thought maybe doing something like prepend() might be a solution so that the user doesn't actually see the checkboxes, being all the way at the bottom of the form--but it still pushes the form elements down. So I'm looking for a means of appending the #states_container :input to the form without it visibly affecting the form in any way.
Code:
$('#submit_btn').click(function(e){
$("#form_submission").validate({});
if ($("#form_submission").valid()) {
$("#form_submission").append($('#states_container :input').clone());
$("form#form_submission").submit();
} else {
e.preventDefault();
alert("Please make sure all required information has been provided before submission.")
}
});
Create a div at the bottom of your form. Style it's display to none and give it a unique id.
<div id="checkBoxes" style="display:none;"></div>
When you go to clone the check boxes from your jQuery dialog set their location to:
document.getElementById("checkBoxes").innerHTML = varWithCheckBoxes;
This will place all of your check boxes inside an invisible div that will have no affect on your layout and will still be submitted along with your form. In addition if the need arises to repopulate that list of check boxes to make changes you can simply grab them from the div and place them back in the dialog box.

Categories