How to prevent ng-model bound attribute from populating input field - javascript

My project has a form with an input field and a button.
<input id="inputID" form="IDForm" type="text" autocomplete="off" data-ng-model="User.getInfo().ID" placeholder="Enter ID">
<button form="IDForm" type="submit" class="forward-button" ng-if="User.getID()" data-ng-click="sendID()">
Verify ID
</button>
Currently the ng-if makes the button not appear until the user enters an ID. When they enter an ID and click Verify ID, they are taken to the next page. However, if they press back from that page then the input field is automatically filled with the ID they previously entered because of the two way ng-model binding. Is there a way to prevent the input field from automatically filling in that bound attribute when the page loads?

When the button is enabled, set the current form to pristine state, $scope.form.$setPristine(); which will ensure even when you press back, the form values will not populated and would be in the initial state.

Related

Passing value to input with a link/button?

I would like to pass a value to an input area on another page by clicking on a specific link.
For example, if a user clicks on a Inquire Now button/link:
<a href="/contact.html">Inquire Now<a>
it will take them to the Contact page and the subject input of the form will automatically fill to "Inquiry about Service".
<input type="text" name="subject" value="Inquiry about Service" required />
Is there a way to do this with HTML?

iOS: How to programmatically trigger enter from a textfield in a webview

I am trying to add value to a text field in a web view using javascript. First, I add value using this code :
webView.evaluateJavaScript("document.getElementById('birds').value = 'username';", completionHandler:nil)
second I need to press Enter button to run next function. Here is text input's info:
<input type="text" name="submit" id="birds" placeholder="Write username or name and press enter" "="" class="ui-autocomplete-input" autocomplete="off">
How can I programmatically trigger enter button?
Just select the form and call submit
document.getElementById("myForm").submit();
This article could be worth a read though, you may need to select the submit button and call the onClick method instead, it depends how that particular form handles sending it's data.

Cant submit my button with form

I am trying to submit my button with a form. Im not trying to make my button submit the form. I want to be able to see my button value in the POST variable after the form submits. From my understanding all I need is to give my element a name and value. I should be able to see all the form variables once my form is submitted.
<input name='MC[]' type='text' size='51' placeholder='Enter In Question'>
<br/>
<input name='MC[]' type='button' value='Incorrect'>
<input name='MC[]' id='Options' size='40' placeholder='Enter In Option A'>
I'm new to this site not sure if I'm providing enough information but I simply want to submit this button inside a form and to be able to add the value of my button to a file. For some reason I cant see the button once the form is submitted. Are type button not sent to POST when submitted?
Note, I am able to see my other input elements. The type button one is the only one I cant see.
You can use Javascript that fills in the value of a hidden input from the value of the button that was clicked.
HTML:
<input type="hidden" name="answer" id="answer">
JS:
document.querySelectorAll("input[name='MC[]']").forEach(function(el) {
el.addEventListener("click", function() {
document.getElementById("answer").value = el.value;
}
}
Then you'll be able to get the button's value in $_POST['answer'].
That's not how buttons work... they perform an action, they don't get included in the post data. What you need is a checkbox, or a disabled input perhaps?

Call method whenever form field is typed in

I have a form which includes a dropdown. A user can either select an option from that dropdown which in turn fills the form field in question, or the user can type their choice manually into the form field.
I want to make sure my dropdown resets upon the user typing in the form field. I'm thinking about some sort of click handler, but know ng-click is not appropriate here.
<form class="form-inline" name="tagForm">
<div class="form-group">
<isteven-multi-select
input-model="header.tagNames"
output-model="tagsOutput"
button-label="name"
item-label="name"
tick-property="ticked"
selection-mode="single"
on-item-click="header.selectTag(data)">
</isteven-multi-select>
</div>
<div class="form-group">
<input class="form-control" type="text" id="tag" placeholder="Tag" ng-model="header.newTag.tag" ng-required="true">
</div>
So for example, a user selects 'passed' from the dropdown, then rethinks their decision and clicks in the form field to delete 'passed' and type in 'failing'. As soon as the user begins typing (or clicks delete, really any keystroke) the dropdown should reset so no field is selected. How would I call a method from within the form field whenever a keystroke occurs in this field?

$setPristine() method in Angular 1.2.1 doesn't appear to work as intended

I have am trying to reset a textbox using the $setPristine function in AngularJS, however it doesn't seem to result in the desired behavior.
My form looks like this:
<form name="addInviteForm" ng-controller="InviteCtrl" ng-submit="sendInvitation(userEmail)">
Pristine? {{addInviteForm.$pristine}}
<!-- email input -->
<div>
<input type="email" name="email" ng-model="userEmail" placeholder="Enter email here" class="line-item-input see" required>
<span class="error" ng-show="addInviteForm.email.$error.email" style="color:red">Invalid Email</span>
</div>
<!-- submit button -->
<input type="submit" name="send" class="btn btn-success center" value="Send Invitation">
</form>
And the corresponding code in my controller:
$scope.sendInvitation = function(userEmail) {
// do some work here ...
// hmm, this doesn't seem to work ...
$scope.addInviteForm.$setPristine();
};
Though the form shows that $pristine is set to true upon form entry, then set to false when entering data in the text-box, after submitting the form it does indeed show that $pristine is set to true .... and yet the value in the textbox remains as it was before the submit button was pressed.
What am I missing here?
$setPristine does not clear values from the controls in the form:
From the docs:
Sets the form to its pristine state.
This method can be called to remove the 'ng-dirty' class and set the
form to its pristine state (ng-pristine class). This method will also
propagate to all the controls contained in this form.
Setting a form back to a pristine state is often useful when we want
to 'reuse' a form after saving or resetting it.
As you can see from the above description, $setPristine only changes the state of the form (and thereby resets the css applied to each control in the form).
If you want to clear the values of each control, then you need to do for each in code.
This plunker shows $setPristine in action.

Categories

Resources