Is there a way to fill multiple form fields at once? - javascript

Lets say I have a form with multiple fields like this :
<form>
<input type="checkbox" name="title45" value="title45"><input type="text" name="title45" /><br>
<input type="checkbox" name="title45" value="title45"><input type="text" name="title23" /><br>
<input type="checkbox" name="title45" value="title45"><input type="text" name="title36" />
</form>
Like this, there can be up-to 100 text fields. I need a way to select several or all of them and set the value once and the selected elements will get the value. How can I do this?
I will add a checkbox infront of the fields. I want to edit only the checked ones.

just this line of jquery :
$('form input').val("fgg");
see this in action: http://jsfiddle.net/c53nqn7e/

You get/set input values with .val(). So:
$('input').val('something')
You can narrow down the inputs selected in a variety of ways, like:
$('input[type="text"]').val('something') // select all text inputs
$('input[name^="title"]').val('something') // select all inputs with a name attribute that starts with title

you can do it like this:
$( ":input" ).val("your input value");
or
$( "form input" ).val("your input value");//better because it will apply only on form
but i'll suggest add class to these inputs and based on class assign the values so you can have some discrimination.

Related

How do I make an html text input readonly but be able to update with a script?

I have these inputs that take the values of a from a in my table when I click on a row. I want to make it so that the user cannot change the input themselves but want to bring values into them when a user clicks a table row. I will be passing these inputs in as a form. I know that when the input is like this:
that it will not be updated. Is there any other way to do it with an input. Is there a different type of tag I can use that can be passed through a form?
Rather than a read-only <input>, I'd go with a combination of a display element and a hidden form element. Something like:
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="hidden" />
And in the code update both:
$('#my-display').text(yourValue);
$('#my-input').val(yourValue);
You can style the display to the user however you like and don't have to worry about whether or not it "de-activates" the form input.
If you really want it to be an inactive input, you can use the same approach:
<input class="my-input" type="text" disabled />
<input class="my-input" type="hidden" name="my-input" />
Which may even save you a line of code here, since both can now use .val():
$('.my-input').val(yourValue);
Try disabled keyword as here
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="text" disabled/>
You can change the value by javascript as below:
document.querySelector('#my-input').value = 'the value you want to enter by javascript';

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: having radio buttons and a textarea update hidden form fields

Really new to using jQuery and trying to find an example I need.
1) if I have, say, 5 radio buttons to choose an item, how do I pass the selected item to a hidden form field?
2) same question for a textarea. How do I pass the text written to a hidden form field and make sure it's escaped safely for a form submission?
Thanks for any help.
You can just bind to the change event:
<input type="hidden" id="myradiovalue" />
<input type="radio" name="myradio" value="0" />
<input type="radio" name="myradio" value="1" />
$('input[name=myradio]').change(function() {
$('#myradiovalue').val($(this).val());
});
And almost the same for textarea:
<input type="hidden" id="mytextarevalue" />
<textarea id="mytextareavalue"></textarea>
$('textarea').change(function() {
$('#mytextareavalue').val($(this).val());
});
For both <input type="radio"> and <textarea>, you will want to use jQuery change() method. If you want to sanitize the input before it is inserted into a <input type="hidden"> then you will need to use some regex or a library that does it for you, like jQuery Validation Plugin. Keep in mind that any sanitation/validation you do with javascript/jQuery will need to be double-checked server-side after the form is submitted.
But I don't know why you are copying data from one form input to another, can't you just use the form input as it is? What is the point of having the data in both a <textarea> and a <input type="hidden">?

Setting a label's for attribute to a DOM element, not an ID in jQuery

Short Question:
How do you link a label element to an input element without using the input element's id using jQuery and javascript?
Long Question:
I am using jQuery to clone a form with possibly more than one instance of the form being available for the user to fill in.
A label's 'for' attribute is supposed to be set to the 'id' attribute of the input element that it is for. This works when the input element has a unique id.
Because I am cloning the same input element there will be multiple input elements with the same id in the document. Therefore I'm avoiding having id attributes for input elements but I'd still like to focus on the input element when the label is clicked. I also want to avoid generating random ids for fields or setting onclick events on labels.
Edit #1
Example mark up (note no ids)
<form>
<label>First Name:</label><input type='text' name='FirstName' /><br/>
<label>Last Name:</label><input type='text' name='LastName' /><br/>
</form>
Example cloning code:
var newForm = $('form').clone();
$(newForm).find('label').each(function(){
var inputElement = $(this).next('input');
// I'd love to set the label's for attribute to an element
$(this).attr('for', inputElement);
});
$(document).append(newForm);
Edit #2
There currently are three options:
Set onclick events for labels to focus on the input field they're for. Criteria for deciding which labels are for which inputs can be the next input element or something else
Embed the input fields in the label fields (might not be possible due to designer's choices)
Generate random ids while cloning each form
Well it would be nice to see the markup, but if i can assume that the markup will look somewhat like this
<form name="f1">
<label>this is my label</label>
<input />
<label>this is my other label</label>
<input />
</form>
<form name="f2">
<label>this is my label</label>
<input />
<label>this is my other label</label>
<input />
</form>
then you could do something like this
$('form label').live('click',function(){
$(this).next('input').focus();
});
you will need to use live or delegate since you're cloning the forms on the fly i'm assuming.
The simplest solution is to move the <input> tags inside the <label> tags and forgo the for attribute altogether. Per the HTML spec, <input> tags without for attributes are implicitly associated with their contents.
Try this:
<form>
<label>First Name: <input type='text' name='FirstName' /></label><br/>
<label>Last Name: <input type='text' name='LastName' /></label><br/>
</form>
(See: http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1)
You shouldn't have multiple identical ids in the page. It defeats the purpose of the id attribute and is against the W3C spec.
Regardless, jQuery's $(this) could help you in this situation. Say you gave all your the "focusable" class. Then you could do:
$('.focusable').focus( function(){
$(this).doSomething();
});
This is really an HTML question. A label can be associated wtih a form control either by its for attribute having the same value as the associated control's id attribute, or by having the control as a child of the label, e.g.
<form ...>
<label for="nameField">Name:<input id="nameField" name="nameField" ... ></label>
<label>email:<input name="emailField" ... ></label>
</form>
I suppose in jQuery you need something like:
var labelAndInput = $('<label>text<input ... ></label>');
or whatever. Note that older versions of IE (and maybe more recent ones too) the label will not be associated with the control without the for attribute (or htmlFor property), there is no other way.

Categories