Develop Reference

How to make an input a default input field of a view?

In the Angular app there are multiple views that have various inputs. When the user goes into a view, he needs to click the input field to type in the value. On a mobile device it is expected behaviour since the user would have to open keyboard widget to type in, so it is good he needs to click the field to type data in. But on a computer there is no need for a keyboard widget to open. User can type straight away. My question is: how to make a input field "default", so that when the user starts typing on a computer (or any other device with keyboard) the "default" input field will focus and fetch the incoming typed in string? Something like:
<input defaultInputOfAView="true"></input>

You can use autofocus to achieve it.
<input defaultInputOfAView="true" autofocus></input>

There is also a very nice solution (besides autofocus that triggers only once):
<div>
<input #myInputRef>
{{myInputRef.focus()}}
</div>

Fetching and storing data from form fields (email, password) without user clicking a button using Angular, Javascript

I am newbie to Angular and Java-script and trying to figure the following problem. I would appreciate any inputs.
I have 2 fields in our div class. One of them is a form entry (email) and other one is a drop down menu which has some static values of "occupation" where a user can select one from it. Both of them are in the same row.
I want to repeat this row (for second entry) as soon as the user finishes typing the valid email address in first row/entry. Also I want to store the values of first row in an array that is in the controller.
I want to do same thing for second entry and so on.
Once the user hits "OK" at the bottom, I want take an action on the array that has all the above values. I have the action defined and it works for a single entry but I am unable to figure out 2 things:
How can I store values of each row/entry in an array without user clicking any button but just on the event of completing typing the email address?
How can I automatically create a new row when user finishes typing the email on previous row? Is ng-repeat a good option?
Any help would be much appreciated. I just want to get started in right direction.

You should consider, that email addresses can be prefixes of each other - or at least that most of the regular expressions checking for validity of an email address will already allow "a#example.c" and not wait for the complete ".com".
Besides that, from a user perspective I would like it more to at least press enter to commit my inputs.
The best thing to do is probably to create the new line when you start to enter something in the previous one and just let the user decide when to switch to it (by clicking or hitting the tab key). When he or she enters something there you can then submit the data from the current line.
To check if the email address is valid you can use input type email in angular[1].
<input type="email" ng-model="user.email" name="uEmail" required="" />
[1]https://docs.angularjs.org/guide/forms

How to get Next button on android softkeyboard in place of Go Button in phonegap

I am developing Phonegap application and have many inputs in application form. I am getting Go button on keyboard of android.I want to replace go button with next button. As clicking on Go button (as shown in image) submits form.
In android native we can specify next button in XML but for Phonegap how to specify next button in place of go button.?
Some Samsung devices have by default Next Prev button on top.
By Default there is Go button. I need Next but in Phonegap. is there any plugin for specifying that for android.

Having a "Next" button instead of "Go" is not possible with Android as of now.
Android will always display "Go" button for form input fields. "Go" is basically reflecting the same behavior as of an "Enter" button on a normal browser & keyboard. You can achieve through below code:
if (event.keyCode == 13) {
//Handling "Go" Button to move to next input field
}
OR
If your input fields are more, then data-dependency will be best solution.
If you want to prevent users from submitting the form, you can put required validations on the form using javascript, where you can specify data-dependency inside input field with required, which helps move cursor to a particular field which you specified in data-dependency.
<input type="text" id="first" data-dependency="second" />
<input type="text" id="second" data-dependency="third" />
<input type="text" id="third" />
It move focus to next fields in form until its your last field. Once last field reaches you can allow it to act as enter. So basically Go will keep moving focus to next fields until its your last field & then will submit the form.

Its been said that if have input fields without or outside the form tag means you will get next button as tab button
As far as i know there is no proper solution to get next button instead of go . There are only workarounds do it. Most common one is to capture the 'Go' button as enter key(keycode '13') in javascript and do your thing.
$('selector').on("keydown",function(event){
if (event.keyCode == 9) {
//you got tab i.e "NEXT" Btn
}
if (event.keyCode == 13) {
//you got enter i.e "GO" Btn
}
});
for tab button instead of enter
There has been also sources that already discusses these GO Vs NEXT button

have you tried the attribute enterkeyhint
The enterKeyHint property is an enumerated property defining what action label (or icon) to present for the enter key on virtual keyboards. It reflects the enterkeyhint HTML global attribute and is an enumerated property, only accepting the following values as a DOMString:
'enter' typically indicating inserting a new line.
'done' typically meaning there is nothing more to input and the input method editor (IME) will be closed.
'go' typically meaning to take the user to the target of the text they typed.
'next' typically taking the user to the next field that will accept text.
'previous' typically taking the user to the previous field that will accept text.
'search' typically taking the user to the results of searching for the text they have typed.
'send' typically delivering the text to its target.
If no enterKeyHint value has been specified or if it was set to a different value than the allowed ones, it will return an empty string.
The enterKeyHint property is an enumerated property defining what action label (or icon) to present for the enter key on virtual keyboards. It reflects the enterKeyHint HTML global attribute and is an enumerated property, only accepting the following values as a DOMString:
<main>
<h2>Using the <code>enterkeyhint</code> Attribute</h2>
<p>View this demo on a mobile device. Note the text in the "enter" key on your mobile device's virtual keyboard.</p>
<input type="text" enterkeyhint="Next">
</main>

You can simply use the following logic to let users focus on the next input field. This is a better approach, which I used in my one of the PhoneGap applications, as currently there are no 3rd party plugins which offer such functionality.
x$('#input1').on('keyup', function(e) {
var mEvent = e || window.event;
var mPressed = mEvent.keyCode || mEvent.which;
if (mPressed == 13) {
// On enter, go to next input field
document.getElementById('input2').focus();
}
return true;
});

For whom this may be of use:
I'm working on a react pwa and I was having issues getting the next button to show so users could move from one input element to the next (within the same screen). It turns out that android requires a <form> to be wrapping the input text elements. I did a series of tests:
input texts inside a (no tabindex, no attributes other than type, nothing)
input texts outside a (same as above)
input texts inside a inside a
input texts inside a outside a
Only those inputs inside a get android's default next-next-next-go behaviour where go = last input in the form.

Have you tried using the tabindex parameter on your input fields?
The default action of the keyboard should be to show next if tabindex is detected.
Example:
<input name="first" tabindex="1" /> //should show next
<input name="second" tabindex="2" /> //should show next
<input name="third" tabindex="3" /> //should show go

EditText android:imeOptions= "actionNext"

How to create login field properties depending on which radio button is checked

I have a login page with 2 radio buttons "new account" and "existing user". when "new account" is selected the "User" field auto populates with the text "New Account" and the "Password" field remains blank. I need to grey out the fields so that they are uneditable when the "new account" radio button is selected, but still pass along the information in the fields because it is used to gain access to the database. I can disable the fields to get the desired uneditable greyed out fields, but the information does not get passed along to the database.
I have tried to fix this by creating two hidden fields (which auto populate with the needed information for database access) to take the place of the "user" and "password" field which allows me to disable the visible fields while "new account" radio button is clicked and which still passes along the new user login info that never changes. This works fine until I try to login as an existing user, in which case my two hidden fields do not auto populate with the users input for their existing account information.
There may be a much simpler approach to fixing this problem, but all of my research and trials have not been successful yet. I have been reluctant to ask this question as it seems so simple and frequently used approach for a login page, but all of my searching has not yielded any thing that has worked yet. I appreciate any input or navigation in the right direction.

I'm pretty sure the correct and painless solution for your problem is to use two different form tags (take care to not nest them) and show/hide the form depending on the selected radio button.
And for the convenience of your user you should copy the username from one form to the other if he has already filled the user field and switches to the other version later.
EDIT
The complete solution:
HTML
<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm1"> Form 1</label>
<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm2"> Form 2</label>
<hr>
<div class="hiddenForm" id="divForm1">Put form 1 in here</div>
<div class="hiddenForm" id="divForm2">Put form 2 in here</div>
​​​​​​​​​​​​​​JS
// if someone clicks on one radio button
$('.formSwitcher')​​​​.change(function(){
// get the form id we want to show (from the "data-form" attribute)
var formIdToChange = $(this).data('form');
// hide all forms first
$('.hiddenForm').hide();
// show the specific form
$(formIdToChange).show();
});
​// initially hide all forms
$('.hiddenForm').hide();
// initially call the change method if one radio is already selected on page load
$('.formSwitcher:checked').change();​

Are you saying that you need to change the existing user fields because they will grant access to the database? I think what you want to do is to change the properties of fields depending on what is selected. For example if you need the auto populate fields to be set when the user clicks new user then write something like
document.form.AutoPopUser.value="required value"
and when the person clicks on the existing user you can do
document.form.AutoPopUser.value=""
or if even having that part exist will mess up the existing user log in then you could delete that entire section by putting it inside a div and creating or destroying it depending on the selected option. I feel like I'm not being very clear but I think what you need is a clever set of onClick functions to get rid of things you dont need and add in the ones you do need. If you could post some code to go with this that would be awesome.

How to correct validate based on choice of radio button?

I have a validation scenario where I have two radio buttons. I then Have two input text fields.
If the first radio button is selected the user only has to enter data in the first field. If the second radio button is select the user has to enter data in the first field and a date in the second field.
Now the first radio button is selected by default when the page loads. If the user does not enter anything in the first field with either button selected then there is a validation error that occurs onsubmit.
Now if the second radio button is selected and the user enters data in the first field and does not enter the date in the second field then the validation error occurs.
The problem I am having is that when the first button is selected if the user enters data in the first field but does not enter a date in the second field a validation error is occurring. This should not happen. The only way a validation error should occur if the first button is selected is if incorrect data is entered into the first field or if no data is entered into the first field. The user is not required to enter a date in the second field. So how can I write the JavaScript to reflect these conditions?
Here is the link to jsfiddle:
http://jsfiddle.net/rnnzn/

That's a lot in fiddle, and it doesn't seem to work in there.
I think that you think radio inputs work differently than they do. Don't check the value of the name of the control, check if the particular radio is checked.
ex:
if(document.getElementById('myform').radioName[0].checked){
//validate based on first radio selection
}eles{
//validate based on second radio selection
}
The important part to remember is that radio's and checkboxes are arrays, they are not as easy to deal with as text and select inputs.