需要帮助将数据属性传递到表单重定向

Question

希望有人可以帮助我。

首先总结一下，我有一个项目列表，每个项目都有一个“立即预订”按钮，一旦单击立即预订按钮，它们就会重定向到各自的页面。我在这之间添加的是一个模态弹出窗口。

因此，当新用户访问该站点时，单击其中一个列表项上的“立即预订”按钮，将出现模式。然后他们输入一些详细信息并提交提交表单

然后，理想情况下，它们将被重定向到适当的页面。带有“立即预订”按钮的项目是通过表达式引擎条目循环生成的，因此链接永远不会被硬编码。

我的问题是模态表单本身的代码不能在条目循环内，因此一旦提交就无法读取要链接到的 URL，所以我想我必须使用 JavaScript 来解决这个问题。

我的想法是为 Book Now 按钮添加一个 data-link 属性，然后在 JavaScript 中告诉表单，一旦提交它应该重定向到被点击链接的 data-link 属性内的值。

我希望这对某人有意义。这可能吗？有人可以提供一些建议

谢谢

编辑：添加代码

<a class="booking-tracker" href="#" data-link="{base_url}ticket/{url_title}">Book now</a>


<div class="modal-wrapper" id="wrapper-modal" style="display:none;">
<form>
  Name: <input type="text" name="name" id="name" value="" />
  Email: <input type="text" name="email" id="email" value="" />
  <input type="hidden" name="redirect" value="redirectvalue here pulled from initial link data-attribute">
  <input type="submit" value="submit" />
</form>
</div><!--modal-->


<script>         
$(document).ready(function() {
$('.booking-tracker').on("click", function (event) {
    if(f24('autoId') == '' && f24('personId') == '') {      
document.getElementById('wrapper-modal').style.display='block';
    } 
    else {
window.location = $(this).data('link');
}
});
});
</script>

因此，如果用户是该网站的新用户并且之前没有记录他们的详细信息，那么上面的这个脚本将触发模式，否则它将链接到该链接的默认 URL，这只是我正在努力的表单重定向与

Answer 1

使用按钮上的数据生成唯一的 url。单击按钮时，获取此数据并将其添加到表单的隐藏元素中。我做了一个小例子。希望对您有所帮助！

var redirect_link = 'www.thisisyourredirectlink.com/';
$('.click-for-modal').on('click' , function(e){
	e.preventDefault(); // Used anchor tags so prevent default
	var redirect_id = $(this).attr('id');
	var new_redirect = redirect_link + redirect_id;
	$('#redirect').removeAttr('value'); //remove if it has been set previously
	$('#redirect').attr('value' , new_redirect); // Add current id
	console.log(new_redirect);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="click-for-modal" id="1" href="">Button</a>
<a class="click-for-modal" id="2" href="">Button</a>
<a class="click-for-modal" id="3" href="">Button</a>
<a class="click-for-modal" id="4" href="">Button</a>
<a class="click-for-modal" id="5" href="">Button</a>
<a class="click-for-modal" id="6" href="">Button</a>

<div class="modal-wrapper" id="wrapper-modal" style="">
<form>
  Name: <input type="text" name="name" id="name" value="" />
  Email: <input type="text" name="email" id="email" value="" />
  <input id="redirect" type="hidden" name="redirect" value="redirectvalue here pulled from initial link data-attribute">
  <input type="submit" value="submit" />
</form>
</div><!--modal-->