Question

我有一个用于用户输入的文本框，提交后文本框不显示结果。如果我再次单击文本框，则文本框仅显示结果。这意味着每次输入时，文本框都显示为null。再次单击“提交”按钮后，它只会再次显示结果。

但我想要的是当我填写完信息后，当我点击＆＃34;下一步＆＃34;按钮时，信息会自动显示。

这里我在jsfiddle中提供我的代码：

＆＃13;

npm install

＆＃13;

	$('.contactSelectDiv').off('click').click(function () {
				
			$('#contactInfoModel').openModal();

        })

		$('#btnNextContactInfoModel').click(function () {
$("body").find('input[name="email"]').val($('#contacttype').val()+ " " + " " + $('#contact').val());
			
			$('#contactInfoModel').closeModal();


			})

＆＃13;

我也在图中解释了我的问题。

Problem Explanation in Figure

Answer 1

已编辑的答案

这是你的jquery代码

$('.contactSelectDiv').off('click').click(function () {

    $("#storeType").val($(this).children("input").attr('id'));
    $('#contactInfoModel').openModal();
});

$('#btnNextContactInfoModel').click(function () {

    $("#contactInfoModel").closeModal();            
    $("#" + $("#storeType").val()).val($("#contact").val());
});

我在你的模态div中添加了一个隐藏的文件，这将保留元素的id以插入值。

<div id="contactInfoModel" class="modal modal-fixed-footer" style="max-height:100%;height:80%;width:60%;margin-left:20%;">
    <div class="modal-content">
        <div class="bread-crumbs-header">
            <div class="bread-crumbs-section">
                <!--<i class="header-icon small mdi-image-hdr-weak"></i>-->
                <div class="header truncate modal-header">
                    <span data-i18n="personal-particular-update.msg_lookup_contact_info"></span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12 m3 l3">
                <select id=contacttype>
                    <option value="" disabled selected>Please select</option>
                    <option value="1">Type 1</option>
                    <option value="2">Type 2</option>
                    <option value="3">Type 3</option>
                </select>
                <label data-i18n="personal-particular-update.msg_type"></label>
            </div>
            <div class="col s12 m3 l3">
                <td>Contact Info</td>
                <div id="Contact Info" >
                    <input id="contact" name="contacts" type="text">
                </div>
            </div>
            <input type="hidden" id="storeType" />
        </div>
    </div>
    <div class="modal-footer">
        <button id="btnNextContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light blue darken-2 right" type="button">
            <i class="mdi-navigation-check"></i>
            <span>Next</span>
        </button>
        <button id="btnCloseContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light red darken-2 left" type="button">
            <i class="mdi-navigation-close"></i>
            <span >cancel</span>
        </button>
    </div>
</div>

如何使用jQuery从弹出模式中逐行将值插入到html表中

1 个答案: