This question already has answers here:
Convert form data to JavaScript object with jQuery
(58 answers)
Closed 9 years ago.
I have the following form:
<form id="editForm">
<input class="span12" name="name" type="text" placeholder="Product name...">
<input class="span12" name="sku" type="text" placeholder="SKU...">
<input name="basePrice" class="span12" type="text" placeholder="Base price...">
</form>
How do I turn that into an associative array that can be accessed like the following?
formArray['name'], formArray['sku'], etc.
Here's a dead-simple way:
$.fn.form = function() {
var formData = {};
this.find('[name]').each(function() {
formData[this.name] = this.value;
})
return formData;
};
// use like
var data = $('#editForm').form();
This is totally unsafe and just grabs everything with a name, but it should get you started.
Related
This question already has answers here:
How to use document.getElementByName and getElementByTag?
(6 answers)
Closed 5 years ago.
Just wondering if this would be a valid syntax.
<input type="text" name="memtype" value="1" onkeyup="javascript:gettype(document.getElementsByName('memtype').value);>
This will not be valid because getElementsByName is a collection and need to pass the index like
document.getElementsByName('memtype')[0]
function gettype(val) {
console.log(val)
}
<input type="text" name="memtype" value="1" onkeyup="javascript:gettype(document.getElementsByName('memtype')[0].value);">
The same operation can be done by just passing the value using this.value
function gettype(val) {
console.log(val)
}
<input type="text" name="memtype" value="1" onkeyup="gettype(this.value)">
getElementsByName returns collection. To get the value from that collection you have to use specific index, like:
document.getElementsByName('memtype')[0].value
But why to write document.getElementsByName('memtype').value when you can write this.value.
function getvalue(val){
console.log(val)
}
<input type="text" name="memtype" value="1" onkeyup="javascript:getvalue(this.value);"/>
This question already has answers here:
copy and concatenate values of multiple input boxes in a form to one input field
(2 answers)
Closed 5 years ago.
I want to concatenate the textInputs on clicking the button.
e.g text1=2 , text2=3 , text3=9 and text4=8, the final result should be 2398.
How to achieve this?
If you were using ES6 standards, you can use string literals
const txt1 = 'rt';
const txt2 = 'rete';
const concatenated = `${txt1}${txt2}`
you can refer the link for further learning:
https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/template_strings
create one onChangeHandler() for textInput such as:
<TextInput onChange={(text)=>(this.onChangeHandler("text1",text))}>
<TextInput onChange={(text)=>(this.onChangeHandler("text2",text))}>
<TextInput onChange={(text)=>(this.onChangeHandler("text3",text))}>
onChangeHandler=(name,value)=>{
this.setState({[name]:value})
}
then on button click do this:
onButtonClick=()=>{
let finalText =this.state.text1+this.state.text2+this.state.text3
console.log(finalText) //prints the concatenated text.
}
With Pure JS
function concatenate(){
var concatenate = document.getElementById("input1").value + document.getElementById("input2").value + document.getElementById("input3").value
document.getElementById("result").innerHTML = "Resultat:"+concatenate
}
<input id="input1" type="text" name="name1" >
<input id="input2" type="text" name="name2" >
<input id="input3" type="text" name="name3" >
<button type="button" onclick="concatenate()">concatenate</button>
<div id="result">Resultat: </div>
This question already has answers here:
How do I remove all null and empty string values from an object? [duplicate]
(13 answers)
Closed 6 years ago.
I have a search form with several fields. If user types nothing into field, it still will be sent to the server with value "null".
However, there are about 25 optional (advanced) fields in this form, and if user types nothing into it, JSON shouldn't contain this field at all.
So, my question is: is there some way (pattern maybe) to avoid those 25 "if () else"? What is the best way to form that final JSON?
Thanks!
UPD:
Thank you, #RIYAJKHAN for your answer!
I've managed to solve it by myself using LoDash:
private compactObject(obj) {
let compactObj = this.removeEmptyProperties(_.cloneDeep(obj));
_.forEach(compactObj, (value, key) => {
if (_.isObject(value)) {
compactObj[key] = this.compactObject(this.removeEmptyProperties(compactObj[key]));
}
});
return this.removeEmptyProperties(compactObj);
};
private removeEmptyProperties(obj) {
let trimedObj = _.cloneDeep(obj);
_.forEach(trimedObj, (value, key) => {
if (!value || _.isEmpty(trimedObj[key])) {
delete trimedObj[key];
}
});
return trimedObj;
}
<form name="form" ng-submit="submit(form)">
<input type="text" name="test1" ng-model="test1">
<input type="text" name="test2" ng-model="test2">
<input type="text" name="test3" ng-model="test3">
<input type="button" name="submit">
</form>
JavaScript :
$scope.submit = function(form){
for(var prop in form){
if(!!!form[prop]){
delete form[prop];
}
}//form will contain form prop having only valid values
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to sum 6 inputs and set the value to another input with javascript.
https://jsfiddle.net/arispapapro/1qbjd36c/9
<form>
<input type="text" name="no301" class="form-control" id="no301" placeholder="">
<input type="text" name="no301" class="form-control" id="no302" placeholder="">
<input type="text" name="no301" class="form-control" id="no303" placeholder="">
<input type="text" name="no301" class="form-control" id="no304" placeholder="">
<input type="text" name="no301" class="form-control" id="no305" placeholder="">
<input type="text" name="no301" class="form-control" id="no306" placeholder="">
<input type="text" name="no307" class="form-control" id="thesum" placeholder="307">
</form>
Javascript:
var no301 = document.getElementById("no301").value;
var no302 = document.getElementById("no302").value;
var no303 = document.getElementById("no303").value;
var no304 = document.getElementById("no304").value;
var no305 = document.getElementById("no305").value;
var no306 = document.getElementById("no306").value;
var no307 = document.getElementById("no307").value;
var sum = no301 + no302 + no303 + no304 + no305 + no306;
sum.onchange = function() {
thesum.value = sum;
}
thesum.onchange = function() {
sum.value = thesum;
}
Check the fiddle: https://jsfiddle.net/1qbjd36c/13/
$("form .form-control").not("#thesum").on("input", function() {
var getSum = 0;
$("form .form-control").not("#thesum").filter(function() { if($.isNumeric($(this).val())) return $(this).val(); }).each(function() {
getSum+=parseFloat($(this).val());
});
$("#thesum").val(getSum);
});
$("form .form-control") A tag and class selector has been utilized to reference the target.
not("#thesum") added a not selector in order to avoid the change of input of Resulting TEXT field.
on("input", function() { utilized ON-INPUT event, to trigger all input formats, which includes paste of clip text too.
.filter(function() { utilized filter function to value only numeric values.
getSum+=parseFloat($(this).val());, here use of + indicates summing upon with the previous value to the variable, in other words, recursive change on value, which returns the sum of all iterated values.
This question already has answers here:
Get child node index
(13 answers)
Closed 9 years ago.
I have a form with dozen of textfield elements. Any change of their values shall execute Javascript function. And until now I know what I shall to do, but I can't detect index of textfield that triggered function. I tried some solution I saw here & there but wasn't successful.
<form action="" method="post" enctype="multipart/form-data" name="myforma1" target="_self" id="myforma1">
<input name="txtfield" type="text" id="txtfield" onchange="detect_it(this);" value="name of person" size="20" maxlength="25" />
<input name="txtfield" type="text" id="txtfield" onchange="detect_it(this);" value="name of person" size="20" maxlength="25" />
<input name="txtfield" type="text" id="txtfield" onchange="detect_it(this);" value="name of person" size="20" maxlength="25" />
...
<script>
function detect_it(oo)
{
alert('Index of triggered element is: ' + oo.index);
/* rest of code */
}
</script>
You probably shouldn't give all your inputs the same name and id.
However, you can still look for the parent node, then iterate over the parent's children until you found your node to retrieve its index.
Try this getIndex() function:
<script>
var getIndex = function (node) {
for (var i =0;i<node.parentNode.children.length;i++) {
if (node.parentNode.children[i] === node) {
return i;
}
}
}
function detect_it(oo) {
alert('Index of triggered element is: ' + getIndex(oo));
}
</script>
See this Fiddle: http://jsfiddle.net/LkJxV/
edit: corrected code (again) (thx #Felix)
Your problem here is that index is not a property of the element. It can have differnet indexes depending on context but you can try
Try something like:
function detect_it(oo){
var inputs = document.getElementsByTagName('input')
for (var i = 0 ; i<inputs.length ; i++){
if(oo == inputs[i]{
alert('Index of triggered element is: ' + i);
}
}
//enter code here
}