隐藏输入但仍然让JS自动填充数据

时间:2015-08-19 13:37:54

标签: javascript jquery css

我有一组3个输入字段,它们接受第一个和第二个输入并做一些数学运算来自动填充第三个输入。

我不希望看到第三个输入,但使用display:nonevisibility:hidden都会在out数据库中返回NaN。反正只是隐藏输入,而不是自动填充数据吗?

<div class="form-item webform-component webform-component-textfield webform-container-inline hs_total_donor_percent_change field hs-form-field total-field">            
    <label for="one">Total Donors Percent Change *</label>    
    <input id="edit-submitted-acquisition-percent-change"
           class="form-text hs-input"
           name="total_donor_percent_change"
           readonly="readonly"
           size="60"
           maxlength="128"
           type="text"
           value=""
           placeholder="0">
</div>

2 个答案:

答案 0 :(得分:3)

您可以使用隐藏的输入字段:

<input id="inputOne" type="text"></input>
<input id="inputTwo" type="text"></input>
<input id="inputThree" type="hidden" value=""></input>

然后使用jQuery,您可以在任何合适的位置设置隐藏输入的值:

$('#inputThree').val("insert value here");

隐藏输入非常自我解释,元素将不可见但您可以使用value属性进行数据持久化。

修改:值得注意的是,用户只需查看网页的来源,就能看到元素value属性中的值。

答案 1 :(得分:0)

我认为disabled属性可以帮助您。您可以尝试使用以下代码吗?

<div class="form-item webform-component webform-component-textfield webform-container-inline hs_total_donor_percent_change field hs-form-field total-field">            
    <label for="one">Total Donors Percent Change *</label>    
    <input id="edit-submitted-acquisition-percent-change"
           class="form-text hs-input"
           name="total_donor_percent_change"
           readonly="readonly"
           size="60"
           maxlength="128"
           type="text"
           value=""
           placeholder="0"
           disabled="disabled">
</div>

编辑:

你可以试试这个jquery代码吗?此代码将阻止在文本字段中键入任何内容。

$(document).ready(function(){
  $('#edit-submitted-acquisition-percent-change').bind("paste",function(e) {
      e.preventDefault();
  });
});