JQuery -我无法成功地以模态形式设置值

j0pj023g  于 2023-01-20  发布在  jQuery
关注(0)|答案(1)|浏览(127)

我有一个表格,让游客输入入住日期和酒店名称的固定值。
这是html代码,它有一个表单和一个由Contact Form 7生成的模态表单(最新版本带有<form> ... </form>标签:

<form name="request_to_book" id="request_to_book" class="form form-small">
 <div class="form-group">
…
    <div class="row">
        <div class="col col-check-in relative s6">
                        <input type="text" name="check_in" value="01 4, 2023" readonly="" class="form-control check_in " placeholder="m j, Y">
            <i class="fa fa-calendar field-icon"></i>
        </div>
    </div>
…
     <div class="row">
            <div class="col s12">
                <input type="hidden" id="hotel_title" name="hotel_title" value="Hilton Osaka Hotel" readonly="">
            </div>
      </div>
                <div class="pl25 pr25 pb20">
                <a class="waves-effect waves-light btn btn-success btn-full btn-medium bold" href="#modal-contact-form">
                    Request to book                </a>
       </div>
        <div id="modal-contact-form" class="modal" data-created_overlay="true">
                <div class="modal-title">
                    <h4 class="bold">Request to book</h4>
                    <a href="javascript:void(0);" class=" modal-action modal-close waves-effect waves-light btn-flat"><h3>Close</h3></a>
                </div>
                <div class="modal-content">
                    <div role="form" class="wpcf7" id="wpcf7-f1420-p62-o1" lang="en-US" dir="ltr">
…
<p><label> Your Name (required)<br>
    <span class="wpcf7-form-control-wrap" data-name="your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Your Email (required)<br>
    <span class="wpcf7-form-control-wrap" data-name="your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Villa : <span class="wpcf7-form-control-wrap" data-name="hotel_title"><input type="text" name="hotel_title" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" readonly="readonly" aria-required="true" aria-invalid="false"></span> </label><br>
…
<p><label> Check-in date (required)<br>
    <span class="wpcf7-form-control-wrap" data-name="check_in"><input type="text" name="check_in" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
...
<p><input type="submit" value="Send" class="wpcf7-form-control has-spinner wpcf7-submit"></p>
<div class="wpcf7-response-output" aria-hidden="true"></div></div>
                </div>
            </div>
</form>
<a href="javascript:void(0);" class="close-form-book"><i class="flaticon-error"></i></a>

我只想将表单的数据复制到模态表单中:

<script>
jQuery(document).ready(function() {
    jQuery('#request_to_book').change(function() {
        selected_value = jQuery("input[name='hotel_title']").val();
//        alert(selected_value);
        jQuery("#modal-contact-form input[name='hotel_title']").val( selected_value );

        selected_value = jQuery("input[name='check_in’]”).val();
//        alert(selected_value);
        jQuery(".modal-contact-form input[name='check_in']").val( selected_value );
    } );
} );
</script>

获取值的工作很完美,警报确认了这一点。但是我无法在模态联系表单中设置"check_in"的值。
澄清:
1.选择的值= jQuery("输入[名称='酒店名称']"). val();给出了酒店名称,用这个html代码给出了"Hilton Osaka Hotel"

  1. jQuery("#模态联系人表单输入[名称='酒店名称']"). val(选定值);看起来什么也没做,但是它应该把name ="hotel_title"的input-tag设置为"Hilton Osaka Hotel",所以它看起来没有找到input-tag。这是我的问题。
    有人能帮帮我吗?我做错了什么。
o4hqfura

o4hqfura1#

您似乎正在尝试更改名称为“check-in”的span内的文本。
使用jQuery,您无法更改跨度的.val(),必须使用.text()
而不是这个。

jQuery(".modal-contact-form input[name='check_in']").val( selected_value );

执行此操作.text()(如果此文本中存在HTML标记,则将其删除)

jQuery(".modal-contact-form input[name='check_in']").text( selected_value );

在jQuery中使用.html( selected_value )也可以,如果selected_ value中有HTML标签,这些标签将被添加到span中。
也检查您的报价:确保您使用了正确的引号selected_value = jQuery(“input[name ='check_in'] ).val();

相关问题