使用 jquery 从模式中获取值答案

【问题标题】：getting values from a modal using jquery使用 jquery 从模式中获取值
【发布时间】：2014-07-09 12:17:49
【问题描述】：

-----------已解决-----------

感谢您花时间帮助我。我设法让它现在工作。我认为问题是我的疏忽。我必须在我的模式上添加getVal，就像id="modal_"getVal一样。它调用了错误的模式，这就是输入框返回空的原因。我对此感到非常抱歉，我感谢人们所做的帮助。谢谢

我有一个包含文本框和按钮的简单模式。

<input type="text" class="form-control" id="textb" val_A="1">
<button type="button" id="but"> submit </button>

我想在单击按钮时获取文本框.val() 和属性val_A

$(document).on('click','#but', function() {
name = $('#textb').attr('value');
val_A = $('#textb').attr('val_A');

alert(name + "-" + val_A);

});

但我得到了name 的undefined结果。

我也试过$('#textb').val();，但没有成功。

请注意，我希望从模态框内的文本框中获取值，但不确定是否存在考虑模态行为的不同获取值的方法。

---------[更新]-----------

点击此按钮时，会出现模态

<button type="button" class="btn" val="1"> show modal </button>

按钮有一个特定的值，val=1，然后激活一个特定的模式。因此，$(#modal_+getVal).

$(document).on('click','.btn', function () {
getVal = $(this).attr('val');
$('#modal_+getVal').modal({show:true})
});

这让我想到了上面的问题。模态出现后，我想在单击时获取文本框的值，模态内的另一个按钮。

但它显示的只是未定义

【问题讨论】：

你能告诉我们你的标记和你的JS的其余部分吗？您的页面上的其他任何位置是否还有任何其他 ID 为 textb 的元素？
value 属性不会像 value 属性那样实时更新
你得到的 val_A 正确吗？
您是说表单处于模态对话框中。初始状态表单字段将处于隐藏模式。所以你必须在回调方法中显示表单后从表单中获取字段。或者您必须使用 :hidden 选择器来获取表单字段值。你在使用 jquery 对话框或任何其他插件吗？让我知道。如果您使用的是 jquery 对话框，您可以让对话框显示回调 $( ".selector" ).dialog({ open: function(event, ui) { here get the field values } });
@Jagadeesh 感谢您的投入。我使用引导模式而不是 jquery 对话框。

标签： jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

就您的问题而言，模态和任何其他 div 之间不应该有任何区别。如果文本区域（您的文本框是文本区域，不是吗？）不在另一个框架或 iframe 中，您可以找到具有“正常”jQuery 选择器用法的模式。话虽如此，这里有一些可能的解决方案：

如果你的文本框是文本区域，试试这个：

var textbox_value = $('#textb').val();

如果所有这些都不起作用，请尝试确定您是否选择了正确的元素！ console.log($('#textbox')) 打印什么？

编辑：

哦，而且，是的。你可能想试试这个：

<div id="foo" data-valA="test"></div>

<script>
    $('#foo').data('valA');
</script>

编辑 2：

我不能经常链接这个：Why is console.log() considered better than alert()?

【讨论】：

data() 不能在属性标记中没有 data- 前缀并且input 没有 text()
是的，这就是我写 data-valA 的原因。而且我知道输入没有文本，这就是它的全部内容。虽然我不得不承认，我没有看到那里的输入，并认为他的文本框可能是任何类型的元素。（哎呀！）编辑：删除它，谢谢指出。
我用过console.log()，它什么也没打印。只是空白。从文本框输入的值不打印。
但它确实找到了文本框本身？
嗨，对不起。你能告诉我你的意思是“找到文本框本身”吗？

【解决方案2】：

$('.btn').on('click', function () {
    var modelNumber = $(this).val()
    console.log('model number',modelNumber);
    $('#modal_'+modelNumber).modal({show:true})
    $('#modal_'+modelNumber).on('shown.bs.modal', function (e) {
      console.log('modal dialog shown, get the form values')
      // try to get input values here
   }) });

并将您的输入类型按钮属性“val”更改为“value”。

【讨论】：