Develop Reference

Get input-field value send to another input-field

I'm trying to copy value from an input field and send it to another onkeyup but it only extracts the value and does not send.
function populateSecondTextBox() {
document.getElementById('cepAddressRouteTransporter').value = document.getElementById('postal_code').value;
}
<form action="transporter/route" method="post" role="form">
<table id="address">
<tr>
<td class="label">Zip code</td>
<td class="wideField">
<input class="field" id="postal_code" name="postal_code" onkeyup="populateSecondTextBox();">
</td>
</tr>
</table>
<div class="input-field col s6">
<i class="material-icons prefix">directions</i>
<input placeholder="Ex: 18214-780" id="cepAddressRouteTransporter" name="cepAddressRouteTransporter" type="text" class="validate">
<label for="cepAddressRouteTransporter">CEP:</label>
</div>
</form>

Replace function in head or in body worked for me.
function populateSecondTextBox() {
document.getElementById('cepAddressRouteTransporter').value =
document.getElementById('postal_code').value;
}
JSFiddle

Do the simplest thing
onkeyup="document.getElementById('cepAddressRouteTransporter').value = this.value;"
Change you onkeyup function call as above.

AngularJs having Issues getting onblur to work correctly when input field is left empty

I'm working on a form to input data, currently when a user inputs a number, then deletes it and moves from the input field it will display the error message span. I want it to display if a user clicks into the field then clicks out without adding a number in. I'm not sure why the onblur isn't working as that's how it was done in two tutorials I found.
<form name="myform" novalidate>
<table class="text-center margin-top">
<tr>
<th class="header">Course Type</th>
<th>Amount of Times</th>
<th>Frequency (PA)</th>
<th>% Staff who need it</th>
</tr>
<tr>
<td class="header"><label for="induction">Induction:</label></td>
<td><input class="form-control" type="number" id="inductionAmount" name="inductionAmount" ng-model="staff.inductionAmount" ng-model-options="{ updateOn: 'blur' }" ng-required="true" /></td>
<span class="error-message" ng-show="!myform.inductionAmount.$pristine && myform.inductionAmount.$error.required">Please enter an induction value</span>
<td><input class="form-control" type="number" id="inductionFrequency" name="inductionFrequency" ng-model="staff.inductionFrequency" ng-required="true" /></td>
<span class="error-message" ng-show="myform.inductionFrequency.$dirty && myform.inductionFrequency.$error.required">Please enter an induction value</span>
<td><p>100</p></td>
</tr>
</table>
</form>
</div>
</div>
<div class="row margin-top">
<div class="col-sm-4 col-sm-offset-4">
<button type="submit" ng-disabled="myform.$invalid" class="button-orange" style="font-size: 16px; font-weight: 700;" ng-click="clicked()">Next Step</button>
</div>
</div>

I want it to display if a user clicks into the field then clicks out without adding a number in.
In this case, you can check for $touched instead of !$pristine:
True if control has lost focus.
This has been around since at least v1.3.20. The input only becomes not pristine or dirty if the user has interacted with the input i.e. made a change.
<span class="error-message" ng-show="myform.inductionAmount.$touched && myform.inductionAmount.$error.required">Please enter an induction value</span>
See plunker.
EDIT
If you're using and older version then you can mimic this behaviour with the ngBlur directive ng-blur="myform.inductionAmount.$touched=true"
<input class="form-control" type="number" id="inductionAmount" name="inductionAmount" ng-model="staff.inductionAmount" ng-required="true" ng-blur="myform.inductionAmount.$touched=true"/></td>
<span class="error-message" ng-show="myform.inductionAmount.$touched && myform.inductionAmount.$error.required">Please enter an induction value</span>
See plunker

Angular JS regarding populating dynamic row data in form

Please see this screen shotI need some help. I want to populate dynamic table's row data into a form when i clicked on the particular row.When i try this html elements are repeating along with data when i click on the table rows, but i need like elements should not repeat only data should change. This is my template code
<table class="table2">
<tr>
<th>'Player'</th>
<th>Age</th>
</tr>
<tr ng-repeat=" usr in fc.saveData" ng-click="fc.fnRowClick(usr)">
<td>{{usr.player}}</td><td>{{usr.age}}</td>
</tr>
</table>
<div ng-repeat="data in fc.displayData track by $index">
<label for="field1">
<span>Name</span><input type="text" name="field1" required="true" ng-model="data.player"/>
</label>
<label for="field2">
<span>Age</span><input type="text" name="field2" required="true" ng-model="data.age"/>
</label>
</div>
This is my js code.
fc.displayData=[];
fc.fnRowClick = function(usr){
console.log(usr);
fc.displayData.push(usr);
console.log(fc.displayData);`
}

html name attribute is beeing duplicated during ng-repeat.
That may cause this problem.
Change:
<label for="field1">
<span>Name</span><input type="text" name="field1" required="true" ng-model="data.player"/>
</label>
to this:
<label for="field1{{$index}}">
<span>Name</span><input type="text" name="field1{{$index}}" required="true" ng-model="data.player"/>
</label>
Do the same for second label.

form input type text jQuery

I do not know why I cannot get access to the input text when the code does not have any error.
<form action="#">
<table width="80%" align="center">
<tr>
<td>Write your name</td>
<td><input type="text" name="yourName" placeholder="Name" /></td>
<td><input type="button" value="Submit" id="sendName"/></td>
</tr>
</table>
</form>
<p />
<div id="nameResult"></div>
and the js (jQuery):
$(document).ready(function(){
$('#sendName').click(function(){
$(document).ready(function(){
var tag = $('#yourName').val();
$('<p>Name ' + tag + '</p>').appendTo('#nameResult');
});
});
})
The output is always undefined. I do not know what I am doing wrong.

You are calling nameas if it is an id using #.
Change this
<input type="text" name="yourName" placeholder="Name" />
to this, in which the input control has an id defined:
<input type="text" id="yourName" name="yourName" placeholder="Name" />
If you prefer to stick to name and do not want to define an id, then you can do this as well:
var tag = $('input[name="yourName"]').val();

div issue while displaying values

i have one text box,if i press any alphabet it will display best match to that alphabet in div tag, problem is i have button which is exactly below to textbox when drop down comes button moves to the bottom,i dont want to move my button when list displays
can any body tell me how to achieve this
code:
<table border="0" width="300" cellspacing="0" cellpadding="0" datasrc="#Header">
<tr>
<td id="txt" >
<INPUT TYPE="text" name="text1" id="text1" size=36 maxlength=255 style="font-family: Arial; font-size: 13px; color: #808080"
value="Type your Search Here" onfocus="this.value= (this.value=='Type your Search Here') ? '' : this.value"
onKeyUp="doSuggest(this.value,event.keyCode);"/>
<div id = "theResults" style ="width:22em;border:0px black solid;padding-left:0px;padding-right:0px;visibility:hidden;"/>
</div>
<!-- inner html goes here -->
<input type="hidden" name="id1" id="id1"/>
</td>
</tr>
<!--<tr><td> <INPUT type="text" size="50" id="text1" name="text1" value="" onKeyUp="doSuggest(this.value,event.keyCode);"/></td></tr>-->
<tr>
<td>
<input type="button" name="btn" id="btn" value="show selected"
onclick='alert("selected values "+document.getElementById("text1").value+","+document.getElementById("id1").value);'/>
</td>
</tr>
</table>

Without seeing anything off your markup: try position: absolute in your CSS.