在引导模态中使用jquery更改表单输入字段的值 [英] Change form input field value with jquery within a bootstrap modal
问题描述
我在引导程序模态中有一个表单.我希望输入字段显示用户第一次填写表单时输入的过去值，我是从cloudant数据库中检索的.我希望这些输入字段是可编辑的，以便用户可以重新提交表单并进行任何更改.但是，在尝试在输入字段中显示过去的信息时，我陷入了困境.我找不到输入字段的这些值未更改的任何原因.
I have a form within a bootstrap modal. I would like the input fields to display the past values that the user entered the first time they filled out the form, which I am retrieving from a cloudant database. I would like these input fields to be editable so that the user can resubmit the form with any changes they may have. However, I am stuck when trying to display the past information in the input fields. I can't find any reason why these value of the input fields are not being changed.
将我的按钮添加到我的boostrap列表组的javascript:
The javascript that adds my buttons to my boostrap list-group:
var loadIotPanel = function(iotsJSON)
{
for(var iot in iotsJSON)
{
var button = $('<button/>').text(iotsJSON[iot].appID).addClass('list-group-item iot').attr({name:iotsJSON[iot].appID, "aria-label": "Quick View IoT", "data-toggle": "modal", "data-target": "#quick-view-iot-modal", type: "button"});
$('#iot-list').append(button);
}
};
将我的按钮放置在列表组中的html:
The html where my button will be placed within my list-group:
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 col-sm-12 dash-col">
<button name="edit-iots" aria-label="Edit IoTs" data-toggle="modal" data-target="#edit-iots-modal" type="button" class="icon"><span class="glyphicon glyphicon-edit gray"></span></button>
<p class="fancy-font dash-item-title">Your IoTs</p>
<button name="add-iot" aria-label="Add IoT" data-toggle="modal" data-target="#connect-iot-modal" type="button" class="icon"><span class="glyphicon glyphicon-plus gray"></span></button>
<div class="list-group iot" id="iot-list"><!-- buttons will be placed here --></div>
</div>...
单击按钮时弹出的模式:
The modal that pops up when clicking a button:
<div class="modal fade" id="quick-view-iot-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="quick-view-iot-h4"></h4>
</div>
<div class="modal-body">
<form id="edit-iot-form" method="post">
IoT Name: <br>
<input type="text" name="iot-name" class="iot-value" required><br>
Organization ID: <br>
<input type="text" name="org-id" class="iot-value" readonly required><br>
Authentication Method: <br>
<input type="text" name="auth-method" class="iot-value" value="apikey" readonly><br>
API Key: <br>
<input type="text" name="api-key" class="iot-value" readonly required><br>
Authentication Token: <br>
<input type="text" name="auth-token" class="iot-value" readonly required><br>
</form>
<button name="more" type="button" class="fancy-font page-button">More</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
将内容添加到模式的javascript.它在文档准备就绪时调用的main方法中:
The javascript that adds the content to modal. It is within a main method that is called when document is ready:
$('.iot').click(
function()
{
var iotName = event.target.name;
getIots(loadIotQuickView, iotName);
$('h4#quick-view-iot-h4.modal-title').text(event.target.name);
});
getIots()函数:(它包含参数variable = null，因为我还在未使用可变参数的代码的另一部分中使用了该方法.此方法将ajax帖子发送到servlet，然后该servlet用一个数组进行响应物联网对象)
The getIots() function: (it includes parameter variable=null because I also use it in another part of code where the varaible parameter is not used. This method sends an ajax post to a servlet, which then responds with an array of iot objects)
var getIots = function(callback, variable=null)
{
var iotsJSON = null;
$.post("DashboardServlet", {loadIotPanel: "true"}, function(response)
{
iotsJSON = response;
callback(response, variable);
});
loadIotQuickView()函数:(这是我认为遇到问题的地方)
The loadIotQuickView() function: (This is where I believe I am getting problems)
var loadIotQuickView = function(iotsJSON, iotName)
{
var currentIoT = null;
for(var iot in iotsJSON)
{
if(iotsJSON[iot].appID = iotName)
currentIoT = iotsJSON[iot];
}
if(currentIoT == null)
return;
$('.iot-value[name="iot-name"]').attr("value",currentIoT.appId);
};
我尝试了许多jquery选择器，但是表单中的任何输入字段值都不会更改.我已经遍历了代码，并且我所有的变量都具有正确的值，即最后一行没有按照我的意愿执行.我不确定我的jquery选择器是否存在问题或其他问题.预先感谢！
I've tried numerous jquery selectors but none of the input field values within the form will change. I've stepped through the code and all of my variables have the correct values that its just the last line that's not executing how I want. I am unsure if there is an issue with my jquery selector or if it is something else. Thanks in advance!
更新: 我尝试了以下选择器:
UPDATE: I've tried the following selectors:
$('.iot-value[name="iot-name"]')
$('input[name="iot-name"]')
$('.iot-value')
$('#connect-iot-modal').find('input[name="iot-name"]')
我还尝试在输入字段中添加一个"edit-iot-name"的ID:
I've also tried adding an id of "edit-iot-name" to my input field:
$('#edit-iot-name')
$('#connect-iot-modal #edit-iot-name')
但是这些都不起作用，这使我相信选择器一定不是问题.
But none of these have worked, which leads me to believe that it must not be an issue with my selector.
更新:
我还尝试将.val(currentIoT.appID)与所有先前的选择器一起使用.仍然无法正常工作.
I've also tried using .val(currentIoT.appID) with all of the previous selectors. Still not working.
推荐答案
我不确定为什么，但是将我的表单所在的模式的ID(即#quick-view-iot-modal)添加到选择器中就可以了.但是由于某些原因，它仅在使用.val()时有效，而在使用.attr()时无效.所以最终结果是:
I'm not sure why, but adding the id of the modal that my form is in, which is #quick-view-iot-modal, to my selector worked. However for some reason it only works when I use .val() and not when I use .attr(). So the final result is:
$('#quick-view-iot-modal #edit-iot-name').val(currentIoT.appID);
我不确定为什么需要添加模态的id，而且我不确定为什么它不能像这样工作:
I'm not sure why it is required to add the id of the modal, and I'm not sure why it doesn't work like this:
$('#quick-view-iot-modal #edit-iot-name').attr("value",currentIoT.appID);
但是有效！如果有人知道为什么它只能与这种组合一起使用，请告诉我！
But it works! If anyone knows why it only works with this combination, please let me know!
这篇关于在引导模态中使用jquery更改表单输入字段的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
