【发布时间】：2019-12-28 00:07:57
【问题描述】：
我有一个包含多个产品的 JSP 页面。每个产品都有一个按钮，该按钮调用包含在 JSP:INCLUDE 页面中的模型。 我们将模态代码放入单独的 JSP 中以便更好地组织它。
我们想使用这个模态并根据我们从被点击的按钮传递给模态的值来显示文本。它类似于“产品一”的按钮将显示模式“产品一”中的文本，可能还有其他一些文本。
我在 stackoverflow 和 google 上进行了搜索，但找不到一些提示来存档。我尝试使用 JSP:PARAM 和 JSP INCLUDE，但这是在页面级别。例如，对于用户单击标题上的不同文本的每个按钮，我都需要它。
…… 预订旅游的按钮。
<button data-aos="fade-up-right" data-aos-duration="2000" data-aos-offset="100" class="gold-btn call-us" onClick="document.getElementId('action').value=this.value;return true;">Book Tour</button>
它调用了一个名为“call-us”的模态
“call-us”模式代码：
<div class="callback">
<div class="callus--modal">
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell large-12 medium-12 small-12 text-right">
<div class="callus-close">X</div>
</div>
<div class="cell large-12 medium-12 small-12 text-center">
<img src="http://www.roma-vaticano.com/assets/images/common/divider.png">
</div>
<div class="cell large-12 medium-12 small-12 text-center">
<h2>${param.booking_title}</h2>
<h3>We will call you back</h3>
</div>
</div>
<form id="callback-form">
<div class="grid-x grid-margin-x">
<div class="cell large-12 medium-12 small-12 text-center">
<input type="text" name="name" id="callback_name" value="" placeholder="First and Last Name *" required>
</div>
<div class="cell large-4 medium-4 small-12 text-center">
<input type="text" name="prefix" id="callback_prefix" maxlength="3" value="" placeholder="prefix *" required>
</div>
<div class="cell large-8 medium-8 small-12 text-center">
<input type="text" name="phone" id="callback_phone" value="" placeholder="Phone Number *" required>
</div>
<div class="cell large-12 medium-12 small-12 text-center">
<input type="text" name="email" id="callback_email" value="" placeholder="email address *" required>
</div>
<div class="cell large-12 medium-12 small-12 text-center">
<div class="autorizzazione" style="text-align: left;">
<div class="check_box">
<input type="checkbox" value="si" id="callback_auth" name="privacy" required>
<label for="e_auth"></label>
</div>
<p>I confirm that i have read the privacy policy. *</p>
<div style="clear: both;"></div>
</div>
<div class="autorizzazione" style="text-align: left;">
<div class="check_box">
<input type="checkbox" value="si" id="callback_newsletter" name="newsletter">
<label for="e_auth"></label>
</div>
<p>I want to recieve special offers about Rome and the Vatican</p>
<div style="clear: both;"></div>
</div>
</div>
</div>
<div class="grid-x grid-margin-x">
<div class="cell large-12 medium-12 small-12 text-center">
<input class="gold-btn" id="callback_submit" type="submit" value="CALL ME BACK" style="border: none !important; position: relative; float: none;">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
$("#callback-form").validate({
errorClass: "contact-error",
validClass: "contact-valid",
rules: {
name: "required",
prefix: {
required: true,
maxlength: 3
},
phone: "required",
email: "required",
privacy: "required"
},
messages: {},
submitHandler: function(form) {
sendCallbackEmail();
}
});
function sendCallbackEmail() {
var name = $('#callback_name').val();
var prefix = $('#callback_prefix').val();
var phone = $('#callback_phone').val();
var email = $('#callback_email').val();
var params = {};
params.name = name;
params.prefix = prefix;
params.phone = phone;
params.email = email;
$.get( "/contacts/callback", params ).done(function( data ) {
if (data.success) {
$('#callback_submit').val("SENT");
$("#callback_submit").prop("disabled",true);
} else {
alert("Error");
}
});
}
</script>
如您所见，我们使用 JSP:PARAM 进行了尝试，这很有效。但不是在按钮级别上，它为每个正常的按钮显示相同的值。 ${param.booking_title} 在模态中所在的位置应该有将从按钮传递到显示的模态的值的文本。
我们想在页面的每个按钮上添加不同的文本。
【问题讨论】：
标签： javascript html jsp