单击按钮时应在访问网址或链接之前询问电子邮件

Question

我想要为优惠券网站实现的目标（https://www.dealivore.in/store/oyo-rooms-coupons）是，当有人尝试单击按钮时，它应该打开一个框，在其中输入他们的信息电子邮件 ID，提交后应该会将他们带到报价页面。

现在这是一个优惠券代码，它只是向最终用户显示代码。

尝试过这个但不起作用

<input type="text" id="txtNumber">
<input type="button" onclick="openPage()" value="Show The Page">
<script type="text/javascript">
function openPage() {
    var value1 = document.getElementById('txtNumber').value;
    var url="http://www.domainname.com/" + value1 + ".pdf";
   //alert(url);
   window.open(url,"_blank");
}
</script>

Answer 1

为什么不拥有这样的东西呢？我知道它不仅仅是 JS 作为你的代码，但我只是用这段代码解决了与你类似的问题：

        <button type="button" onclick="takeMeToCoupons()"> Coupons please! </button>
             <div id = "emailConfirmDialog" style = "display: none">
                 <p>Please enter your email:</p>
                    <div id = "formContainer">
                       <form th:action = "@{/yourControllerAddress/regsiterEmail}" th:object = "${webUser}" method = "post" id = "emailForm">                   
                            <input type="text" name="action" placeholder = "Enter your email" th:field="*{email}">
                            <button type="button" th:onclick="confirmEmailSent()"> Confirm </button>
                            <button type="button" th:onclick="cancelEmailSent([[${selectedContact.id}]])" > Cancel </button>
                    </div>
             </div>
<script>
        function takeMeToCoupons() {
            const dialog = document.getElementById("emailConfirmDialog");
            if (dialog) {
                dialog.style.display = "flex";
            } else {
                console.error("Something happened when making the box visible");
            }
        }

        function confirmEmailSent() {
            const form = document.getElementById("emailForm");
            if (form) {
                form.submit();
            } else {
                console.error("Something happened when storing the email");
            }
        }

        function cancelEmailSent() {
            const dialog = document.getElementById("emailConfirmDialog");
            if (dialog) {
                dialog.style.display = 'none';
            } else {
                console.error("Something happened when cancelling");
            }
        }
</script>

希望这可以帮助您，或者至少让您知道从哪里继续:)