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

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.

Related

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?

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.

HTML Input on enter not clearing field

I've tried multiple scripts and approaches on clearing the input field once enter is hit. I had one script work although it was too fast so the message could never be submitted.
I was wondering if there is any way I could delay it?
This is the script I'm using although it submits too fast
<input class="chat-window-message keydown" name="message" id="InputMessage" type="text" autocomplete="off" placeholder="....." onload="self.focus();" autofocus required />
<script>
document.getElementById('InputMessage').addEventListener('change',function(){
//somehow search for the term here
//remove text
document.getElementById('InputMessage').value='';
},false);
</script>
Write a function in JS called when you click on the submit button. In this function, call submit() on the form, then clear the field (with your code or the reset() method).

HTML5 required field and submit with angularjs

How to check the required fields of a form before submitting it in javascript ?
I'm working with Angularjs and as you probably know, I never reload the page.
I have created input text like this :
<input type="text" name="truck" ng-model="my model" typeahead="my typeahead" typeahead-min-length="1" required/>
Here is my submit button at the end of the form :
<button type="submit" ng-click="saveDelivery(newDelivery)" class="btn btn-primary">Create the delivery</button>
But when I submit, I go into "saveDelivery" first, and then I have the message from Google chrome : "Please fill in this field..."
How can I do to check the input before submitting ?
Look into the ng-submit directive.
This essentially looks in your defined form for any validation defined in your markup (required, type). All you have to do is take your click action and place it at the top of your form in the ng-submit directive.
<form ng-submit="saveDelivery(newDelivery)">
<input type="text" name="truck" ng-model="my model" typeahead="my typeahead" typeahead-min-length="1" required/>
<button type="submit" class="btn btn-primary">Create the delivery</button>
</form>
Because your button is defined as type 'submit', this will submit the form, preforming the 'ng-click' action for you. Angular will essentially hijack the submit, and validate your form before submitting it to 'saveDelivery'. All you have to do is define what you want validated, whether it is 'required' input, or it you do type="email" on your input, it will use HTML 5 email validation and make sure it is an email address.
Angular made it VERY easy to add validation to any form. Once validation is passed, Angular will then trigger your saveDelivery method!
Edit: 2014-02-12 - Here is a very simple example. Try clicking the submit button when the input field has nothing in it. Chrome will show validation message, enter something and the alert will run, but the form will not submit.
Example: http://plnkr.co/edit/uGT3scGJtCVJkWE0B7zp?p=preview
The browser will do the validation when the form is submitted I think (Note: not verified, this is just how I understand the flow of events. I may be wrong)
You might want to handle the form submit event to do your saveDelivery call as that (form submit) ought to happen after the validation but before the form is actually posted back. saveDelivery will finish before the form submits, and you can cancel it if needed also and do your own thing...
For example this answer to another post shows how to handle the form submit and prevent it from occuring; this might be useful if you want to call your saveDelivery method to do the actual saving but don't want the form to postback
https://stackoverflow.com/a/5384732/94099

Input field with onchange fails to trigger when user click button in another form

I have a page with multiple small forms on it. Each form has one input field that has an onchange function which will submit it's form to a url that returns a no data status.
Things work fine, submitting form after form, until the user clicks on a small form that has ONLY a submit button in it. This click works, but abandons the change in the previous field resulting in its onchange not firing the click at the bottom of the changed function fails (still trying to understand the firebug trace).
What's going on? is there a fix for my structure?
UPDATE:
First I tried simply delaying the action of the submit, but no luck.
I have hidden the and added an <input button> to the chain of "events" so that the focus has a place to come to rest before the real submit tries to happen -- the code below has been updated. So the question now becomes:
Is this as simple as it can be?
Script:
$(function() {
$('input,select').change(changed);
});
function changed(){
...
$(this).parents('form').find(':submit').click();
}
function doSubmit(elt, id)
{
$(elt).focus();
setTimeout(function(){
$(id).click();
}, 400);
}
One of may small forms:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="submit" value="field" name="btn_update" style="display: none;">
<input type="hidden" value="000242" name="quote_id">
<input type="text" maxlength="15" size="3" value="" name="q[cost][4][1][unit]">
</form>
The offending click goes into this form:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="hidden" value="000242" name="quote_id">
<input type='button' name='btn_close' value='Close' onclick='doSubmit(this,"#CLOSE");'>
<input id='CLOSE' type='submit' name='btn_close' value='Close' style='display:none;'>
</form>
Might be totally irrelevant, but your selector for the change event includes your submit input too. Can you change it to:
$('input[type="text"],select').change(changed);
to see if anything changes?
The solution turned out to be to create a button tag, set the focus explicitly to a it, and then set a timeout to click the real, but hidden, submit input tag. This allows the change in focus to run the submit associated with it and then continue with the explicit submit of the page.
The question has been updated to show this solution.

Categories

Resources