양식에 데이터 속성을 전달하는 데 도움이 필요합니다.

Question

누군가가이 문제를 해결할 수 있기를 바랍니다.

먼저 요약하면, 지금 책 버튼이 클릭되고 나서 각각의 페이지로 리디렉션되는 항목 각각에 '지금 예약하기'버튼이 있습니다. 내가이 사이에 추가 한 것은 모달 팝업입니다.

그래서 새 사용자가 사이트를 방문하면 목록 항목 중 하나에서 지금 예약 버튼을 클릭하면 모달이 나타납니다. 그런 다음 세부 정보를 입력하고 양식을 제출하십시오.

그런 다음 이상적인 경우 해당 페이지로 리디렉션됩니다. 지금 예약 단추가있는 항목은 Expression Engine 항목의 루프를 통해 생성되므로 링크가 절대 하드 코딩되지 않습니다.

내 문제는 모달 양식의 코드 자체가 항목 루프 안에있을 수 없으므로 어떤 URL을 제출했는지 읽을 수 없으므로이 문제를 해결하기 위해 JavaScript를 사용해야한다는 것입니다.

제 생각에는 Book Now 버튼에 데이터 링크 속성을 추가 한 다음 JavaScript에서 한번 제출 한 양식에 클릭 한 링크의 데이터 링크 속성 안의 값으로 리디렉션해야한다고 설명합니다.

누군가에게 도움이되기를 바랍니다. 이것이 가능한가? 누군가가 아마도 몇 가지 조언을

감사를 제공 할 수 것은

편집 : 사용자가 사이트에 새로운 이전에 자신의 세부 사항을 기록하지 않은 경우 추가 코드

<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){ 
 
\t e.preventDefault(); // Used anchor tags so prevent default 
 
\t var redirect_id = $(this).attr('id'); 
 
\t var new_redirect = redirect_link + redirect_id; 
 
\t $('#redirect').removeAttr('value'); //remove if it has been set previously 
 
\t $('#redirect').attr('value' , new_redirect); // Add current id 
 
\t 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-->