Develop Reference

How do i autofill angularjs input

I am trying autofill a website using javascript.
This code
document.getElementsByClassName('form-control')[1].value = "MYNAME";
input text changing but when i click the submit button it says empty.
Please help me..
This is the html
<div ng-app="VitaminMiddleSchoolApp" ng-controller="componentEbaEtudExternalEditViewController">
<input spellcheck="false" autocapitalize="none" class="form-control input-sm ng-pristine ng-valid ng-empty ng-valid-maxlength ng-touched" type="text" ng-model="render.etudName" maxlength="60" ng-change="saveRenderer()" style="">

You need to use scope.$apply() after calling document.getElementsByClassName('form-control')[1].value = "MYNAME"; Because angular doesn't know about your autofilled inputs.
But better solution is to use angular model way. So for example if you want to autofill <input type="text" ng-model="my_test_model"> you can just use ng-init directive : <input type="text" ng-model="my_test_model" ng-init="my_test_model='test_value'"> or assign it in the angular controller scope.my_test_model='test_value'

removeProp not working as expected

I am trying to remove the max property from a date field on my webpage. Depending on the fields selected before the date field the max may be set to today or there may not be one. In one of my scenarios, I am trying to remove the max and it works and in another it doesn't. See details below.
Using Google Chrome
Working
$('#StartDate').removeProp('max');
console.log(document.getElementById('StartDate'));
Copy element using developer tools
<input type="date" name="StartDate" id="StartDate" class=" wf2_isBlank wf2_notDefaultValue wf2_lostFocus" min="" max="undefined" required="">
Picture of element in console
Not Working
$('#StartDate').removeProp('max');
console.log(document.getElementById('StartDate'));
Copy element using developer tools
<input type="date" name="StartDate" id="StartDate" class=" wf2_isBlank wf2_notDefaultValue" required="" max="2018-08-20" min="">
Picture of element in console
What is the difference here? Any suggestions?

You can also use removeAttr to remove attribute from element
$('input').removeAttr('max');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" name="StartDate" id="StartDate" class=" wf2_isBlank wf2_notDefaultValue" required="" max="2018-08-20" min="">
https://api.jquery.com/removeAttr/

Placeholder is not working with ng-model

HTML
With ng-model - Not working
<input type="text" ng-model="Event.Sponsor.Amount" name="donationAmount" placeholder="{{PlaceHolderOther}}" required />
Without ng-model - Working
<input type="text" name="donationAmount" placeholder="{{PlaceHolderOther}}" required />
JS
$scope.PlaceHolderOther = "$50.00";
Could you tell me why placeholder is not working with ng-model ? It's working fine without ng-model.Thanks in advance.
Out put (When it runs)
<input type="text" name="donationAmount" placeholder="$50.00" ng-model="Event.Sponsor.Amount" required="" class="ng-pristine ng-valid ng-valid-required">
It shows the placeholder value properly.But not display it to the user.Why ?
UPDATE : I have found out the issue.That is texbox has been initialized automatically.When we remove that value then it shows the placeholder value.So how to avoid this by default ?

Try data-ng-model, refer to http://jsfiddle.net/pranav93/ww3k4hxp/6/ .
Something like,
<input id="ship-address-line-3" name="ship_address_line3" placeholder="{{shippingFormOrderItemAction.ship_address_line3}}" data-ng-model="retryAutoDetails.ship_address_line3" type="text">

Did you defined
$scope.Event = {};
Try above with.
Yes: updated answer according.. (typo mistake corrected)

Form value to be empty if no change by user

I have a form with two inputs:
<input type="text" name="keyword" value="Search" onfocus="wipe(this)"/>
<input type="text" name="city" value="City" onfocus="wipe(this)"/>
and my JavaScript which gets rid of the pre-set value in form field as soon as you click it with your mouse is:
function wipe(obj)
{
obj.value="";
}
My question is, say the user doesn't type anything in the city field, how do I make it so that when the form is submitted the value for that field is empty and not the word City?

placeholder is a good attribute which can solve your problem its a past time history when we are used to using value for showing for which this textbox we have
<input type="text" name="keyword" placeholder="Search" />
if you still want to use java script modify your code something like this
<input type="text" name="keyword" value="Search" onfocus="wipe(this,'Search')" onblur="wipe2(this,'Search')"/>
<input type="text" name="city" value="City" onfocus="wipe(this,'City')" onblur="wipe2(this,'City')"/>
script function for second approch
function wipe(obj, str)
{
if(obj.value!=str){
obj.value="";}
}
function wipe2(obj, str)
{if(obj.value==""){
obj.value=str;}
}

You are using the wrong technique here. you should be using placeholder which is supported by most major browsers with the regular exception of IE. So if this is not a concern for you, you should definitely be using that. Especially, if you have a label element for that field. Otherwise you'd need to be checking for that input value on submission and see if it equals the string city

Just Declare a variable hasChanged and set it true when wipe function is called.Then call a function say 'SubmitFunction()'on the onclick function of Submit button.
<input type="text" name="keyword" value="Search" id="Search" onfocus="wipe(this)"/>
<input type="text" name="city" value="City" id="City" onfocus="wipe(this)"/>
<input type="submit" name="submit" value="submit" onclick="SubmitFunction();"/>
var hasChanged=false;
function wipe(obj)
{
hasChanged=true;
obj.value="";
}
function SubmitFunction()
{
if(hasChanged==false)
{
$("#City").val('');
}
}

at the time of submit why not check for value='city'
if(obj.value!='city')
{
//your code here
}
or if you have no problem in using jquery use watermark plugin this will handle browser compatibility problem also
Jquery Watermark

try this:
if($('input[name="city"]').val() && $('input[name="city"]').val() != 'city') { yourform.submit(); }

See How to prepopulate input text fields with prompting text which disappears on typing (jQuery) for some solutions to this. If you're okay with using HTML5, the best solution is probably to use "placeholder" instead of "value".

You should add one more attribute(eg. default <input type="text" name="keyword" default="Search" value="Search" onfocus="wipe(this)"/>) with value same as value attribute.
in on submit compare each form fields
function onSubmit(){
for (var fields in form)
if(form[fields].value== form[fields].getAttribute("default")){
form[fields].value = "";
}
}
}

JavaScript - Form validation loop through specific fields

I'm wondering, what would be a short/good way of performing form validation in JavaScript by looping through all input-text as well as <select>, however, the condition on the select is that out of the 2 selects, ONLY one needs to be selected.
<form id="daform">
<input type="text" value="" name="name" id="name" />
<input type="text" value="" name="last" id="last" />
<select id="choice1" name="choice1">
<option>Bye</option>
<option>Hello</option>
</select>
<select id="choice2" name="choice2">
<option>Bye</option>
<option>Hello</option>
</select>
<input type="submit" />
</form>

Look into,document.getElementsByTagName().

You really should use some javascript toolkit for help with this, but if not this might help:
validateSelectChoices = function(){
return document.getElementById('choice1').selectedIndex || document.getElementById('choice2').selectedIndex;
}
This will check to see if one of the select boxes has the 'hello' value selected (keep in mind that dropdowns will always default to the first option in the list, in your case 'bye'.

Have you tried the jQuery validation plugin?
You can see a demo here.