时间戳

首页 > 解决方案 > 如何使用名称属性添加输入值？

jquery - 如何使用名称属性添加输入值？

问题描述

如何使用 jquery 添加带有名称属性的输入值？我只得到第一个输入值。

<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>

我试过这个

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

我实际上想添加所有隐藏的输入值。

标签： jquery

解决方案

我实际上想添加所有隐藏的输入值。

我建议使用以下选择器来获取所有type="hidden" <input>的：
有关更多信息，请查看：jQuery 访问输入隐藏值

$("input[type=hidden]")

然后，我们可以使用循环遍历元素.each()：

记录每个值的演示片段：

$("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>

如果你想添加每个值，1+1+5我们需要添加更多检查以确保这些值是数字，以防止出现类似1+1+abc.

我用这个函数来检查“值”是否是数字。

演示片段记录每个值的总和：

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">

推荐阅读