0

我有一个 div 标签，它构成了我网站的一个区域，我希望允许用户提交他们的电子邮件作为邮件列表的一部分。我有执行此操作的 php 代码，但是，我想做一些调整以使其在可用性方面更好。

我目前有相关区域的 html

    <div id="sideimage1">
    <div id="maillist">
    <div class="sidebartitle">Keep Up To Date</div>
    <div class="sidebartext">Sign up now to receive free newsletters and the best deals direct to your email.</div>
    <form id="maillist" name="maillist" method="post" action="maillistprocess.php" style="padding-top:10px;">

    <div style="text-align:left;"><input name="email" type="text" id="email" size="40" style="margin-top:5px; margin-left:15px; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;" value="name@example.com"/>
    </div>

    <div style="padding-top: 15px; text-align: left; margin-left:15px;">
    <input name="submit" type="image" alt="Click To Join Our Mailing List" class="JoinNowbutton" 
    src="../WebImages/JoinNowButton1.jpg" onmouseover="this.src='../WebImages/JoinNowButton2.jpg'" onmouseout="this.src='../WebImages/JoinNowButton1.jpg'"/></div>
    </form>
    </div>

我想知道是否有人知道，当用户单击加入按钮时，它会根据我的 php 脚本中的验证结果替换“sibebartext”，例如“恭喜”或“您尚未输入值”出一个空盒子。在我知道如何做到这一点之前，我只是让我的 php 直接用户在他们成功注册后返回主页。

我认为可能需要使用 jquery 来完成，但对此没有太多经验。

提前致谢。

4

3 回答 3

1

您可以为此使用 jquery。通过 AJAX 而不是常规请求提交表单的简单方法可以使用：

$('form').submit(function() {
  var $el = $(this);
  var url = $el.attr('action');

  $.post(url, $el.serialize(), function(data) { 
    if (data=='success') {
      $('.sidebartext').html('congratz');
    } else {
      alert('error: ' + data);
    }
  }).error(function() { alert('something went wrong'); });

  return false;
});

然后在 php 中，在成功时返回“成功”作为完整响应，或者在失败时返回错误消息

于 2012-12-14T15:41:14.240 回答
1 
$("form#maillist").on("submit", function() {
  var s = $("#email").val();
  if(s=="") {
    $(".sidebartext").text("Enter Some Value");
    return false;
    //easier to return false. Else it could get complicated with more checks and all the nested if statments (considering also checking name/addres/etc
  }

  $.ajax({
    url : "check.php",
    data : s,
    cache : false,
    success : function(data) {
      if(data=='Completed')
        $('.sidebartext').html("Congratulations!");
      else
        $('.sidebartext').html("Error! " + data); //allow for more information in the error then just error (perhaps invalid email or email already in use)
    }
  }
});

在 PHP CHECK 和 ECHO 中“恭喜！” 成功和 ECHO “错误！” 对于一些错误，还将 check.php 更改为您的 php 脚本名称！

于 2012-12-14T15:43:32.987 回答
0

您可以使用 javascript 检查空白值，然后在一切正常的情况下提交表单：

function checkForm(){
        if(document.getElementById('email').value == ''){
            document.getElementById('sidebartext').innerHTML = 'You have not entered a vlaue';
        }else{
            form[0].submit;
        }
    }

确保<div class="sidebartext">有一个 id sidebartext。

我建议进行 ajax 调用以确保电子邮件实际插入到数据库中。这是一个例子。

ajax 调用的另一个例子：

xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', '/ajax/script.php?id=' + id, true);
xmlHttp.onreadystatechange = function()
{
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
    {
       //complete
    }
    else
    {
       //try again
    }
}
于 2012-12-14T15:45:17.013 回答