I want to let the checked filed console log all their values but it only shows one checked input
I want the console log to only show the value of which radio was checked but it automatically rather shows the value for the first checkbox
This is a fiddle link https://jsfiddle.net/Nancy4321/hjL3t5qd/
function newForm() {
var prof = document.querySelector('input[type=radio][name=group2]').value
var edu_level = document.querySelector('input[type=checkbox][name=group1]').value;
var pro_other = document.getElementById('pro_other').value;
var data = {
"prof": prof,
"edu_level": edu_level,
"pro_other": pro_other,
}
console.log(data);
}<body>
<form>
<div class="card hoverable">
<div class="card-content" id="prof">
<p>Where do you want to go?</p>
<p>
<label>
<input value="Gym" type="checkbox" name="group1" />
<span>Gym</span>
</label>
</p>
<p>
<label>
<input value="Temple" type="checkbox" name="group1" />
<span>Temple</span>
</label>
</p>
<p>
<label>
<input value="Mars" type="checkbox" name="group1" />
<span>Mars</span>
</label>
</p>
<p>
<label>
<input value="space" type="checkbox" name="group1" />
<span>Space</span>
</label>
</p>
<p>
<label>
<input value="Home" type="checkbox" name="group1" />
<span>Home</span>
</label>
</p>
<p>
<label>
<input value="Cali" type="checkbox" name="group1" />
<span>Cali</span>
</label>
</p>
<p>
<label>
<input value="Tulsa" type="checkbox" name="group1" />
<span>Tulsa</span>
</label>
</p>
<p>
<label>
<input value="specify" type="checkbox" name="group1" />
<span>Other:<input id="pro_other" type="text" placeholder="Please Specify Here"></span>
</label>
</p>
</div>
</div>
<div class="card hoverable">
<div class="card-content" id="edu_level">
<p>Highest Level of Education </p>
<p>
<label>
<input value="Tertiary" class="with-gap" name="group2" type="radio" />
<span>Tertiary</span>
</label>
</p>
<p>
<label>
<input value="Secondary" class="with-gap" name="group2" type="radio" />
<span>Secondary</span>
</label>
</p>
<p>
<label>
<input value="Junior Secondary" class="with-gap" name="group2" type="radio" />
<span>Junior Secondary</span>
</label>
</p>
</div>
</div>
<div>
<button type="submit" name="action" onclick="newForm()">Submit
</button>
</div>
</form>
</body>
Aucun commentaire:
Enregistrer un commentaire