How can i add the value of input with name attribute?

Question

How can I add the value of input with name attribute using jquery? I'm only getting the first input value.

<div class="col-md-12"><label>Question 1 </label></div>
<div class="col-md-12"><input class="form-control" type="text" name="faq-page1" id="faq-page1" placeholder="Question 1"></div>
<input type="hidden" name="faq_name" value="1">
<div class="col-md-12"><input class="form-control" type="url" name="faq-url1" id="faq-url1" placeholder="Answer 1"></div>
<div class="col-md-12"><label>Question 2</label></div>
<div class="col-md-12"><input class="form-control" type="text" name="faq-page2" id="faq-page2" placeholder="Question 2"></div>
<input type="hidden" name="faq_name" value="1">
<div class="col-md-12"><input class="form-control" type="url" name="faq-url2" id="faq-url2" placeholder="Answer 2"></div>

I tried this

var faq_name_value = $("input[name=faq_name]").val();

I actually want to add all hidden inputs value.

Can you share the out, it surely gives you 1 in the console.log(). Also here all the input tag has same name value, you should select either by id or add some class to get differentiated — Satinder singh, May 31 '21 at 14:11

0stone0 · Answer 1 · 2021-05-31T12:29:43.157

I actually want to add all hidden inputs value.

I'd recommend using the following selector to get all the type="hidden" <input>'s:
^{For more info take a look at: jQuery access input hidden value}

$("input[type=hidden]")

Then, we can loop over the elements using .each():

Demo snippet logging each value:

$("input[type=hidden]").each((i, e) => {
    console.log(e.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12"><label>Question 1 </label></div>
<div class="col-md-12"><input class="form-control" type="text" name="faq-page1" id="faq-page1" placeholder="Question 1"></div>
<input type="hidden" name="faq_name" value="1">
<div class="col-md-12"><input class="form-control" type="url" name="faq-url1" id="faq-url1" placeholder="Answer 1"></div>
<div class="col-md-12"><label>Question 2</label></div>
<div class="col-md-12"><input class="form-control" type="text" name="faq-page2" id="faq-page2" placeholder="Question 2"></div>
<input type="hidden" name="faq_name" value="1">
<div class="col-md-12"><input class="form-control" type="url" name="faq-url2" id="faq-url2" placeholder="Answer 2"></div>

If you want to add each value, as in 1+1+5 we'll need to add some more checks to ensure those values are numeric to prevent something like 1+1+abc.

I've used this function to check if the 'value' is numeric.

Demo snippet logging the sum of each value:

let total = 0;

$("input[type=hidden]").each((i, e) => {
    if (isNumeric(e.value)) {
        total += parseInt(e.value);
    }
});

console.log('Total: ', total);


// https://stackoverflow.com/questions/175739/built-in-way-in-javascript-to-check-if-a-string-is-a-valid-number
function isNumeric(str) {
    if (typeof str != "string") return false 
    return !isNaN(str) && !isNaN(parseFloat(str));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12"><label>Question 1 </label></div>
<div class="col-md-12"><input class="form-control" type="text" name="faq-page1" id="faq-page1" placeholder="Question 1"></div>
<input type="hidden" name="faq_name" value="1">
<div class="col-md-12"><input class="form-control" type="url" name="faq-url1" id="faq-url1" placeholder="Answer 1"></div>
<div class="col-md-12"><label>Question 2</label></div>
<div class="col-md-12"><input class="form-control" type="text" name="faq-page2" id="faq-page2" placeholder="Question 2"></div>
<input type="hidden" name="faq_name" value="1">
<div class="col-md-12"><input class="form-control" type="url" name="faq-url2" id="faq-url2" placeholder="Answer 2"></div>
<input type="hidden" name="faq_name" value="abc15">

Will break if there are other hidden inputs with different name — charlietfl, May 31 '21 at 12:17
Could you please clarify @charlietfl? Not sure what you mean. Adding something like `` give the expected result of `5` next to the already existing elements. — 0stone0, May 31 '21 at 12:18
Shows `fklw-5577-rrrr` in a `console.log` as expected. Still not sure what 'value' could fail using this method. — 0stone0, May 31 '21 at 12:22
I interpret "add" as `1+1+1=3`. Could be my interpretation is wrong but that was my initial interpretation of the question and OP is specific about targeting `name` — charlietfl, May 31 '21 at 12:23
Ahh, my answer was mostly focused on showing the values, I've added an extra snipping to 'add' the values. If numeric ;) — 0stone0, May 31 '21 at 12:30

How can i add the value of input with name attribute?

1 Answers1