データ属性をフォームにリダイレクトする際の助けが必要です

Question

誰かがこれを手伝ってくれることを願っています。

最初にまとめると、今すぐ予約ボタンがクリックされた後、それぞれのページにリダイレクトされるアイテムのリストが表示されます。私はこれの間にモーダルポップアップを追加しました。

新しいユーザーがサイトにアクセスすると、リストアイテムの1つで今すぐ予約ボタンをクリックすると、モーダルが表示されます。彼らはいくつかの詳細を入力し、提出フォームを提出する

その後、理想的には、適切なページにリダイレクトされます。 [今すぐ予約]ボタンが付いているアイテムは、リンクが決してハードコードされないように、Expression Engineエントリのループを通じて生成されます。

私の問題は、モーダルフォーム自体のコードがエントリのループ内にあることができないため、一度送信するとリンクするURLを読み取ることができないため、これを解決するためにJavaScriptを使用する必要があるとわかりました。

データリンク属性を[今すぐ予約]ボタンに追加し、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-->