我有一个表格,让游客输入入住日期和酒店名称的固定值。
这是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"
- jQuery("#模态联系人表单输入[名称='酒店名称']"). val(选定值);看起来什么也没做,但是它应该把name ="hotel_title"的input-tag设置为"Hilton Osaka Hotel",所以它看起来没有找到input-tag。这是我的问题。
有人能帮帮我吗?我做错了什么。
1条答案
按热度按时间o4hqfura1#
您似乎正在尝试更改名称为“check-in”的span内的文本。
使用jQuery,您无法更改跨度的
.val()
,必须使用.text()
。而不是这个。
执行此操作
.text()
(如果此文本中存在HTML标记,则将其删除)在jQuery中使用
.html( selected_value )
也可以,如果selected_ value
中有HTML标签,这些标签将被添加到span中。也检查您的报价:确保您使用了正确的引号selected_value = jQuery(“input[name ='check_in']
”
).val();