We Keep Coding

Update hidden form field with value from textfield

I am trying to set the value of a hidden form field with the value entered in a textfield when submitting my form.
I have tried combining the answers to various questions but the closest I have come is getting the 'id' of my source field - but not the value.
Text field name = wpcf-available-stock
Hidden field name = wpcf-total-stock
The hidden field simply needs to be set to the same value as the text field on form submit using Jquery?
I cannot seem to find a simple sample in other questions asked... thanks

To achieve expeccted result, use below
HTML:
<input type="hidden" name="wpcf-total-stock">
<input type="text" name="wpcf-available-stock" value="test">
JS:
$("input[name='wpcf-available-stock']").on('keyup',function(){
$("input[name='wpcf-total-stock']").val($(this).val());
alert($("input[name='wpcf-total-stock']").val());
});
Codepen- http://codepen.io/nagasai/pen/RRBwjA

First of all: Why would you fill a hidden form field from a text field when you're going to send it anyway?
Second, the jQuery looks like this:
var fieldValue = $('#wpcf-available-stock').val();
$('#wpcf-total-stock').val(fieldValue);
You can obviously chain that together, but this is pretty clean.
Here's a demo: https://jsfiddle.net/u5Lj8cLz/

Pure JavaScript solution.
updateHidden = function(x) {
document.querySelector("[name=bar]").value = x;
}
<input name="foo" value="" onchange="updateHidden(this.value)" type="text">
<input name="bar" value="sometext" type="hidden">
Update
updateHidden = function() {
document.querySelector("[name=bar]").value = document.querySelector("[name=foo]").value;
}
document.querySelector("[name=foo]").addEventListener("change", updateHidden);
/*
or,
document.querySelector("[name=foo]").addEventListener("keyup", updateHidden);
*/
<input name="foo" type="text">
<input name="bar" type="hidden">

Is there a way to allow a checkbox to be marked only if there is data entered?

I have an ng-repeater with each row having an input of type checkbox, as well as 3 text fields. I want to allow the checkbox to be selected ONLY if the user enters some text in each of the 3 text fields. If the user tries selecting a checkbox without entering data first, I want to display a warning message.
I am assuming I have to do some checking for the three ng-models (for text fields) is null or undefined or something, but not sure how to do it in the HTML.
My HTML looks something like this:
<div ng-repeat="o in objects">
<input type="checkbox" class="myClass" ng-click="doSomething(argument)>
....
....
<input ng-model="model1">
<input ng-model="model2">
<input ng-model="model3">
EDIT: Found an answer here AngularJS - Form Custom Validation - Check if at least one input is empty

You could disable them and use ng-change to monitor that all 3 of the text inputs have value.
Sample html:
<input type="text" ng-model="data.item3" ng-change="update()"/>
<input type="checkbox" ng-model="data.model1" ng-disabled="checksDisabled"/>
Example Controller
.controller('MainCtrl',function($scope){
$scope.checksDisabled=true;
var data = $scope.data ={ };
$scope.update=function(){
$scope.checksDisabled = !(data.item1 && data.item2 && data.item3);
}
});
DEMO

jquery to get next input element

I have a number of checkboxes. Each of them is associated with one input field. When the checkbox is checked, I would like to set the input field is editable, i.e. disabled attribute as false. Otherwise, the input field is readonly. Code for one pair of such checkbox and input field is like below (all these code is included in one section called competencies :
<label class="checkbox span3">
<input id="IT_OS_checkbox" type="checkbox" value="IT_OS" name="competency_checkbox[]">
IT - OS
</label>
<div class="controls">
<input id="IT_OS_input" class="input-xxlarge" type="text" name="competency_input[]" disabled="true" placeholder="mots clés séparés par virgule">
</div>
So I am trying to use Jquery's on method to fire the event for each checkbox. Code is as below :
$("#competencies").on('change', '.checkbox', function (event) {
var orig_val = event.target.parent().next('div').find('input').attr('disabled');
alert(orig_val);
});
For simplicity, I just want to check the selector works fine, however, this code doesn't work. and in firebug, error message is TypeError: event.target.parent is not a function.
Can anyone help me figure this out ?

Try this:
$("#competencies").on('change', '.checkbox', function (event) {
var orig_val = $(event.target).parent().next('div').find('input').attr('disabled');
alert(orig_val);
});
Just need to wrap the event.target to get the jQuery object.

Assign the value to different field ID?

I have a form with a unique identifier field that the user needs to enter, when passing this value it needs to appear in different field id. so for instance. the field that user enters the unique code in is called "unique" and the copy needs to be in "message", how can i achieve that?
<div data-role="fieldcontain">
<label for="pins" id="pinLabel"><span style="color:#f22300">*</span> Unique Code:</label>
<input data-mini="true" name="pins_r" id="pins" placeholder="9 alphanumeric characters"/>
</div>
<input type="hidden" id="msg" name="msg" value=pins>
Thanks

There are two ways to do this with JavaScript.
Method 1)
Have an onchange event on the unique field such that whenever the value is changed, change it in a hidden field called message.
<input type="text" id="unique" name="unique" onchange="setMessage(this);">
<input type="hidden" id="message" name="message">
function setMessage(field) {
document.getElementById('message').value = field.value;
}
Method 2)
Use ajax to post the form instead, that way you can build the fields yourself.
ie. post message= document.getElementById('unique').value
Both the above are greatly improved if you use JQuery or another JS helper framework.

If you want your values to be set in the label at the same time, it is entered.
You can do some thing like this.
$(document).ready(function() {
$('#pins').keypress(function() {
setTextValueForPins(this);
});
});
function setTextValueForPins(textPin)
{
$('#pinLabel').text($('#textPin').val());
}
If you want the value to be set after the user have entered the value, you can use the change event.
PS: Not tested the code , let me know if you face any Issues.

Adding value to an Input field on click

I have this structure on form,
<input type="test" value="" id="username" />
<span class="input-value">John Smith</span>
Fill Input
when user click on the Fill Input ,
the data from span which has class input-value will be added to value, after clicking a tag the code should be look like this,
<input type="test" value="john Smith" id="username" />
<span class="input-value">John Smith</span>
Fill Input
there are many forms element/input on the single page.

You can do it like this:
$('a.fill-input').click(function() {
$(this).prevAll("input:first").val($(this).prev(".input-value").text());
});
Instead of looking only for the classes, this looks for the span and input just before the button you clicked...this means it works no matter how many of these you have on the page.
Unlike your example though, the value will be John Smith, with the same casing as it has in the span, if you actually want lower case, change .text() to .text().toLowerCase().

$('a.fill-input').click(function() {
$('#username').val($('.input-value.').text());
});

This should suffice for all inputs that you have so structured. It doesn't depend on the names of the elements. Note that prevAll returns the elements in reverse order so you need to look for the first input, not the last in the preceding inputs.
$('.fill-input').click( function() {
var $input = $(this).prevAll('input[type=test]:first');
var $value = $(this).prev('span.input-value');
$input.val($value.text());
});

try:
$('a.fill-input').click(function(e){
$('#username').val($('span.input-value').text());
e.preventDefault();
return false;
});