JS Getting input value/name stored in a var

Question

I have alot pf inputs, and i want to on.('change') get the value or the name of the input as a string so that i can later convert it to a class and inject it onto a div... I may not have been the clearest possible but… any help is good!

the website: http://angusweb.pw

EDIT: the css classes used are from the framework on the site above, i'm developing it

It's below the big green square and the html is

HTML

<div class="setFullWH setFlex setFlexSuperCenter setFlexWrap ">

<form id="parentProperties" class="setFlex setFlexWrap setFlexRow">
<div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto">
<div class="setBasicGrow setJustifyContentSpcArnd">
<input id="flexParent1" name="flexParent" type="radio">
<label for="flexParent1">seFlexRow</label>
</div>
<div class="setBasicGrow">
<input id="flexParent2" name="flexParent" type="radio">
<label for="flexParent2">setFlexColumn</label>
</div>
<div class="setBasicGrow">
<input id="flexParent3" name="flexParent" type="radio">
<label for="flexParent3">setFlexHAlign</label>
</div>
</div>
<div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto">
<div class="setBasicGrow">
<input id="flexParent4" name="flexParent" type="radio">
<label for="flexParent4">setFlexVAlign</label>
</div>
<div class="setBasicGrow">
<input id="flexParent5" name="flexParent" type="radio">
<label for="flexParent5">setFlexSuperCenter</label>
</div>
<div class="setBasicGrow">
<input id="flexParent6" name="flexParent" type="radio">
<label for="flexParent6">setAlignContentStart</label>
</div>
</div>
<div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto">
<div class="setBasicGrow">
<input id="flexParent7" name="flexParent" type="radio">
<label for="flexParent7">setAlignContentEnd</label>
</div>
<div class="setBasicGrow">
<input id="flexParent8" name="flexParent" type="radio">
<label for="flexParent8">setAlignContentCenter</label>
</div>
<div class="setBasicGrow">
<input id="flexParent9" name="flexParent" type="radio">
<label for="flexParent9">setAlignContentStretch</label>
</div>
</div>
<div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto">
<div class="setBasicGrow">
<input id="flexParent10" name="flexParent" type="radio">
<label for="flexParent10">setAlignContentSpcBetw</label>
</div>
<div class="setBasicGrow">
<input id="flexParent11" name="flexParent" type="radio">
<label for="flexParent11">setAlignContentSpcArr</label>
</div>
<div class="setBasicGrow">
<input id="flexParent12" name="flexParent" type="radio">
<label for="flexParent12">setAlignItemsStart</label>
</div>
</div>

<div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto">
 <div class="setBasicGrow">
 <input id="flexParent13" name="flexParent" type="radio">
 <label for="flexParent13">setAlignItemsEnd</label>
 </div>
 <div class="setBasicGrow">
 <input id="flexParent14" name="flexParent" type="radio">
 <label for="flexParent14">setAlignItemsCenter</label>
 </div>
 <div class="setBasicGrow">
 <input id="flexParent15" name="flexParent" type="radio">
 <label for="flexParent15">setAlignItemsStretch</label>
 </div>
 </div>

   <div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto">
   <div class="setBasicGrow">
   <input id="flexParent16" name="flexParent" type="radio">
   <label for="flexParent16">setAlignItemsBaseline</label>
   </div>
   <div class="setBasicGrow">
   <input id="flexParent17" name="flexParent" type="radio">
   <label for="flexParent17">setFlexWrap</label>
   </div>
   </div>
   </form>
 </div>

EDIT: i managed to get the value i wanted, and transform it to a class, and inject to the wanted div… problem is, when i click some other input, i want the class generated by the former to be deleted, or replaced, by the new one…

So you want to get the value of the inputs? Try and specify the core problem, it helps us and you :) — dodo
– dodo, Commented Apr 13, 2017 at 20:57
This link will help you stackoverflow.com/questions/20754131/… — Elijah.C.Nightengale
– Elijah.C.Nightengale, Commented Apr 13, 2017 at 21:04

Lixus · Accepted Answer · 2017-04-13 21:17:12Z

1

Can you use jQuery? If so then

$('input:radio').each(function(){
    $(this).on("click",function(){
        console.log($(this).val()); //To get the value, this returns on/off wether your radio is selected or not
        console.log($(this).attr('name')); // To get the name
        console.log($(this).next('label').text()); //To get the text inside your label
    });
})

Edit: Added jsFiddle https://jsfiddle.net/yingchor/6yqhxa41/3/ for testing and validation purposes.

edited Apr 13, 2017 at 21:17

answered Apr 13, 2017 at 21:00

Lixus

5092 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Angus Over a year ago

can i make this into a re usable function?

Lixus Over a year ago

How so? If you just put it inside your $(document).ready(function(){}) the script will run and your onclick events will be set to your inputs.

Tony · Accepted Answer · 2017-04-13 21:14:57Z

0

You can get the name and value of an input field with the following in javascript:

var inputs = document.getElementsByTagName('input');
var value = inputs[0].value;
var name = inputs[0].name;

console.log(value);
console.log(name);

<input id="inputText" type="text" name="fname" value="a value">

edited Apr 13, 2017 at 21:14

answered Apr 13, 2017 at 21:00

Tony

3,0681 gold badge28 silver badges36 bronze badges

2 Comments

Angus Over a year ago

what if i have like 40 inputs? not very pratical to that to all…

Tony Over a year ago

@Miguel I edited the answer to select a list of inputs. You can do this or select an input by a particular name or ID.

Jitu Raiyan · Accepted Answer · 2017-04-13 21:17:32Z

0

You can add this new element (<div class="class-name"></div>) in HTML and inject the name of the selected input(radio) in its class. Here is The code:

HTML

<div class="class-name"></div>

JavaScript

$(document).ready(function(){
  $('#parentProperties input').on('click', function(){
    className = $(this).attr('name');
    $('.class-name').addClass(className);
  });
});

Instead of on.('change') on.('click') is perfect in this case.

edited Apr 13, 2017 at 21:17

answered Apr 13, 2017 at 21:11

Jitu Raiyan

5367 silver badges13 bronze badges

Collectives™ on Stack Overflow

JS Getting input value/name stored in a var

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related