jQuery & Php 如何使用 jquery 链接点击将 php-html 表单放入 div答案

【问题标题】：jQuery & Php how to put php-html form into div with jquery link clickjQuery & Php 如何使用 jquery 链接点击将 php-html 表单放入 div
【发布时间】：2011-10-22 17:14:42
【问题描述】：

我有一个关于 jQuery 和 Php 的问题。

我有一个网站，我只使用 html、jquery、css，现在我需要实现 php 联系表单。是的，我得到了一些完整的联系表格，它运作良好，只有当我点击链接调用该表格时，它才会打开新表格，我不需要那个。我希望在 DIV 中打开该表单。

如何使用 jquery 点击事件将这个 html-php 表单打开到 div 中？

这是我需要在 jquery 链接点击的 div 中放入的 php 文件：

<?php 
$your_email ='yourname@your-website.com';// <<=== update to your email address

session_start();
$errors = '';
$name = '';
$visitor_email = '';
$user_message = '';

if(isset($_POST['submit']))
{

    $name = $_POST['name'];
    $visitor_email = $_POST['email'];
    $user_message = $_POST['message'];
    ///------------Do Validations-------------
    if(empty($name)||empty($visitor_email))
    {
        $errors .= "\n Name and Email are required fields. ";   
    }
    if(IsInjected($visitor_email))
    {
        $errors .= "\n Bad email value!";
    }
    if(empty($_SESSION['6_letters_code'] ) ||
      strcasecmp($_SESSION['6_letters_code'], $_POST['6_letters_code']) != 0)
    {
    //Note: the captcha code is compared case insensitively.
    //if you want case sensitive match, update the check above to
    // strcmp()
        $errors .= "\n The captcha code does not match!";
    }

    if(empty($errors))
    {
        //send the email
        $to = $your_email;
        $subject="New form submission";
        $from = $your_email;
        $ip = isset($_SERVER['REMOTE_ADDR']) ? $_SERVER['REMOTE_ADDR'] : '';

        $body = "A user  $name submitted the contact form:\n".
        "Name: $name\n".
        "Email: $visitor_email \n".
        "Message: \n ".
        "$user_message\n".
        "IP: $ip\n";    

        $headers = "From: $from \r\n";
        $headers .= "Reply-To: $visitor_email \r\n";

        mail($to, $subject, $body,$headers);

        header('Location: thank-you.html');
    }
}

// Function to validate against any email injection attempts
function IsInjected($str)
{
  $injections = array('(\n+)',
              '(\r+)',
              '(\t+)',
              '(%0A+)',
              '(%0D+)',
              '(%08+)',
              '(%09+)'
              );
  $inject = join('|', $injections);
  $inject = "/$inject/i";
  if(preg_match($inject,$str))
    {
    return true;
  }
  else
    {
    return false;
  }
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
    <title>Contact Us</title>
<!-- define some style elements-->
<style>
label,a, body 
{
    font-family : Arial, Helvetica, sans-serif;
    font-size : 12px; 
}
.err
{
    font-family : Verdana, Helvetica, sans-serif;
    font-size : 12px;
    color: red;
}
</style>    
<!-- a helper script for vaidating the form-->
<script language="JavaScript" src="scripts/gen_validatorv31.js" type="text/javascript"></script>    
</head>

<body>
<?php
if(!empty($errors)){
echo "<p class='err'>".nl2br($errors)."</p>";
}
?>
<div id='contact_form_errorloc' class='err'></div>
<form method="POST" name="contact_form" 
action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>"> 
<p>
<label for='name'>Name: </label><br>
<input type="text" name="name" value='<?php echo htmlentities($name) ?>'>
</p>
<p>
<label for='email'>Email: </label><br>
<input type="text" name="email" value='<?php echo htmlentities($visitor_email) ?>'>
</p>
<p>
<label for='message'>Message:</label> <br>
<textarea name="message" rows=8 cols=30><?php echo htmlentities($user_message) ?></textarea>
</p>
<p>
<img src="captcha_code_file.php?rand=<?php echo rand(); ?>" id='captchaimg' ><br>
<label for='message'>Enter the code above here :</label><br>
<input id="6_letters_code" name="6_letters_code" type="text"><br>
<small>Can't read the image? click <a href='javascript: refreshCaptcha();'>here</a> to refresh</small>
</p>
<input type="submit" value="Submit" name='submit'>
</form>
<script language="JavaScript">
// Code for validating the form
// Visit http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
// for details
var frmvalidator  = new Validator("contact_form");
//remove the following two lines if you like error message box popups
frmvalidator.EnableOnPageErrorDisplaySingleBox();
frmvalidator.EnableMsgsTogether();

frmvalidator.addValidation("name","req","Please provide your name"); 
frmvalidator.addValidation("email","req","Please provide your email"); 
frmvalidator.addValidation("email","email","Please enter a valid email address"); 
</script>
<script language='JavaScript' type='text/javascript'>
function refreshCaptcha()
{
    var img = document.images['captchaimg'];
    img.src = img.src.substring(0,img.src.lastIndexOf("?"))+"?rand="+Math.random()*1000;
}
</script>
</body>
</html>

【问题讨论】：

请在此处发布相关的 HTML & JS / jQuery 代码。

标签： php jquery html

【解决方案1】：

在 PHP 中创建表单并将其输出为 HTML .. 然后使用 jquery 隐藏 div ...

<div id="divWrapper">
<form>
//your form 
</form>
</div>

jquery {

$("#divWrapper").hide();

$("#yourButton").click(function() {
$("#divWrapper").show();  //or slideDown etc... 

});
}

如果您需要使用 javascript 即时生成 HTML，只需将其分配给变量并使用 .append ..

var someHTML = "<form> // some stuff </form>";

jquery {
$("#yourButton").click(function() {

$("#divWrapper").append(someHTML);
});

}

希望有帮助

【讨论】：