submit handler for each input - javascript

Is there any way to add a serialize event for an input in a form? Let's say I have a simple form.
<form action="blabla">
<input type="text" name="first">
<input type="text" name="second">
</form>
I want:
the first input value to be retrieved as it is
the second input value to be the base64-encoded-image-resized-through-canvas of the url specified within the input.
I'd like to attach a "serialize" event on the second input, so the when calling $("form").serialize() or $("input[name=second]").val() the value returned is not the one displayed, but a value returned by my handler.
Is there any way to achieve this? To trigger an handler when accessing an input value?

Related

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.

Get current element on(keyup) and pass as argument to another function

Assume my webpage has the following dynamically generated textbox elements with class='mytxt'.
<input type="text" class="mytxt" />
<input type="text" class="mytxt" />
<input type="text" class="mytxt" />
How do I get current textbox element user is typing on and pass it to another function as argument. Something like:
$("body").on("keyup", ".mytxt" ,function(element) {
// where element is current textbox element user is typing on
someFunction(element);
});
I know it is possible to have onkeyup in html and pass 'this' as argument as shown below, but this isn't an option for me since I don't have access to the code that dynamically generates the textbox elements.
<input type="text" class="mytxt" onkeyup="someFunction(this);"/>
The delegate event will pass a variable which is an event. We can get the element from event.target
See MDN
$("body").on("keyup", ".mytxt" ,function(event) {
var element = event.target;
someFunction(element);
});

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

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.

How to call forms['myform'].submit with input with name 'submit' exists

I have a form which contains input element
<form name='myform'>
<input name='submit'>
</form>
How do I call forms['myform'].submit()? forms['myform'].submit refers to input element an not the function.
Steal the submit method from another form
document.createElement('form').submit.apply(document.forms.myform);
This will not work in IE6. Changing the name of the submit button is the safer, more reliable, simpler option.

Submitting the value of a disabled input field

I want to disable an input field, but when I submit the form it should still pass the value.
Use case: I am trying to get latitude and longitude from Google Maps and wanna display it, but I don't want the user to edit it.
Is this possible?
I wanna Disable an Input Field on a
form and when i submit the form the
values from the disabled form is not
submitted.
Use Case: i am trying to get Lat Lng
from Google Map and wanna Display it..
but dont want the user to edit it.
You can use the readonly property in your input field
<input type="text" readonly="readonly" />
I know this is old but I just ran into this problem and none of the answers are suitable. nickf's solution works but it requires javascript. The best way is to disable the field and still pass the value is to use a hidden input field to pass the value to the form. For example,
<input type="text" value="22.2222" disabled="disabled" />
<input type="hidden" name="lat" value="22.2222" />
This way the value is passed but the user sees the greyed out field. The readonly attribute does not gray it out.
you can also use the Readonly attribute: the input is not gonna be grayed but it won't be editable
<input type="text" name="lat" value="22.2222" readonly="readonly" />
Input elements have a property called disabled. When the form submits, just run some code like this:
var myInput = document.getElementById('myInput');
myInput.disabled = true;

Categories

Resources