使用php填充表单字段

时间:2016-05-29 12:22:17

标签: javascript php html

好的,我在这里结束了我的智慧。我正在为朋友制作一个网站,以展示他的作品。每件作品都有自己的页面。在这些页面上,我们有一个链接

<a class="btn" href="../contact_2.html">Contact us about this item</a>

将我们带到联系表单页面,用户需要在联系之前填写收入明细。我们想要做的是让'subject'字段填充链接被点击的页面主题的名称。即,您正在(../port_pages/38mmspruce.html),单击“与我们联系”链接,当您到达“contact.html”页面时,主题字段已填充“38mmSpruce”。 就目前而言,表单功能完美 - $ _POST方法正在使用中,它会按原样发送表单。然而,试图让主题领域填充正在推动我绕弯道。我得到的最接近的是这个html:

<label for="subject">Subject *</label>
<input id="subject" type="text" name="subject" class="form-control" 
placeholder="Please enter the subject you'd like to discuss *"
value="<? php echo $_POST='subject'?>"
rows="1" required="required">

用以下内容填充主题字段:

<? php echo $_POST='subject' ?>

而不是ACTUAL主题。我也尝试了这一点,我已经将$ _POST的每次出现都更改为$ _GET,但它返回相同的结果。如果我将锚更改为:

<a class="btn" href="../contact.php">Contact us about this item</a>

在不加载表单页面的情况下关闭电子邮件。我也尝试过将查询字符串添加到锚点,但它们不会返回任何数据。我知道这一定非常简单,但我已经对它持续了近一个星期了,尽管我试图研究这个问题的每一个可能的变化,但我找不到正确的答案。以下是相关页面的代码:

contact.php

<?php


$from = 'Demo contact form <example@example.com>';
$sendTo = 'Demo contact form <example@example.com>';
$subject = $_POST['subject'];
$fields = array('name' => 'Name', 'email' => 'Email', 'subject' => 
'Subject', 'message' => 'Message'); 
$okMessage = 'Contact form succesfully submitted. Thank you, I will get
back to you soon!';
$errorMessage = 'There was an error while submitting the form. Please 
try again later';

try
{
$emailText = "You have new message from contact
form\n=============================\n";

foreach ($_POST as $key => $value) {

    if (isset($fields[$key])) {
        $emailText .= "$fields[$key]: $value\n";
    }
}

mail($sendTo, $subject, $emailText, "From: " . $from);

$responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&  
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);

header('Content-Type: application/json');

echo $encoded;
}
else {
echo $responseArray['message'];
}


?>

conatact.js

$(function () {

$("#contact-form").submit(function () {

    var url = "contact.php";


    $.ajax({
        type: "POST",
        url: url,
        data: $(this).serialize(), 
        success: function (data)
        {
            var messageAlert = 'alert-' + data.type;
            var messageText = data.message;

            var alertBox = '<div class="alert ' + messageAlert + ' 
 alert-dismissable"><button type="button" class="close" data-
 dismiss="alert" aria-hidden="true">&times;</button>' + messageText + 
 '</div>';
            if (messageAlert && messageText) {
                $('#contact-form').find('.messages').html(alertBox);
                $('#contact-form')[0].reset();

            }
        }
    });
    return false; 
});

});

最后,html的表单部分(编辑。完整页面按要求发布)

<body>

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-
    toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Those That 
               Know</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-
         collapse-1">
            <ul class="nav navbar-nav navbar-right">
                 <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>
                 <li> 
                    <a href="mainportfolio.html">Portfolio</a>
                </li>

                <li class="active">
                    <a href="contact_2.html">Contact</a>
                </li>


                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div> 
  </nav>  



  <!-- Page Content -->
 <div class="container">

    <!-- Page Heading/Breadcrumbs -->
    <div class="row">
        <div class="col-lg-12 text-left">
            <h1 class="page-header">Contact
                <small>Get in touch</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="index.html">Home</a>
                </li>
                <li class="active">Contact</li>
            </ol>
        </div>

    </div>
    <!-- /.row -->



    <!-- Content Row -->

        <!-- Map Column -->

        <!-- Contact Details Column -->

            <div class="row">
        <div class="col-md-6">
            <img class="img-responsive" src="images/About Main Pic.png"
   alt="">
        </div>
        <div class="col-md-6">
            <h2>Contact Details</h2>
            <h2>Those That Know HQ<br>Wallsend-on-Tyne<br>
            </h2>
            <p><i class="fa fa-envelope-o"></i> 
                <abbr title="Email">E</abbr>: <a
   href="mailto:name@example.com">example@example.com</a>
            </p>
            <p><i class="fa fa-clock-o"></i> 
                <abbr title="Hours">H</abbr>: Open 24 hours</p>

            <ul class="list-unstyled list-inline list-social-icons">
                <li>
                    <a class="btn btn-social-icon btn-facebook" 
  href="#"><i class="fa fa-
  facebook-square fa-2x"></i></a>
                </li>
                <li>
                    <a class="btn btn-social-icon btn-envelope"><i
 class="fa fa-envelope-square fa-2x"></i></a>
                </li>
                <li>
                    <a class="btn btn-social-icon-large btn-instagram" 
 href="#"><i class="fa fa-instagram fa-2x"></i></a>
                </li>
                <button onclick="goBack()">Back</button>

        </div>
    </div>

            </ul>

        </div>
    </div>


    <div class="container">

        <div class="row">

            <div class="col-lg-12">

                <h1>Get in touch with  <a href="contact_2.html">Those
 That Know</a></h1>

                <p class="lead">If you'd like to contact me about 
placing an order, or about anything you've seen on the site, please 
fill in the form below.</p>
                <p>Please include information about the piece you've 
been looking at. It'll help us to get started on your order.</p>    


                <form id="contact-form" method="post" 
action="contact.php" name="contact-form" role="form">

                    <div class="messages"></div>

                    <div class="controls">

                        <div class="row">
                            <div class="col-md-6">
                                <label for="form_name">Name *</label>
                                <input id="form_name" type="text"
 name="name" class="form-control" placeholder="Please enter your name 

 *" required="required">
                            </div>

                            <div class="col-md-6">
                                <label for="form_email">Email *</label>
                                <input id="form_email" type="email" 
name="email" class="form-control" placeholder="Please enter your email 
*" required="required">
                            </div>

                            <div class="col-md-12">
                                <label for="form_subject">Subject * 
</label>
                                <input id="form_subject" type="text" 
name="subject" class="form-control" placeholder="Please enter the
 subject you'd like to discuss *" 
                                value="<? php echo $_POST['subject'];?
>"
                                rows="1" required="required">
                            </div>

                            <div class="col-md-12">
                                <label for="form_message">Message *
</label>
                                <textarea id="form_message" 
name="message" class="form-control" placeholder="Your message here *"
 rows="4" required="required"></textarea>
                            </div>

                            <div class="col-md-12">
                                <input type="submit" class="btn btn-
success btn-send" value="Send message">
                            </div>

                            <div class="col-md-12">
                                <p class="text-muted"><strong>*
</strong> These fields are required.</p>
                            </div>
                        </div>
                    </div>


                </form>

            </div><!-- /.8 -->

        </div> <!-- /.row-->

    <!-- /.container-->

      <footer>
        <div class="row">
            <div class="col-lg-12">
                <p>Copyright &copy; Those That Know 2016</p>
            </div>
        </div>
    </footer>
    <script>

function goBack() {
window.history.back();

}



</script>




    <script src="https://code.jquery.com/jquery-1.12.0.min.js"> 
 </script>
    <script 
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/
bootstrap.min.js">
</script>
    <script src="js/contact.js"></script>
</body>
</html>

正如您所看到的,它是一个Bootstrap表单,并且随附了.js和.php文件。我已经将邮件设置更改为真实邮件设置以进行测试,以确保它能够正常工作,但是我根本无法弄清楚如何让php“回显”主题从页面进入表单中的相关字段。我还删除了在链接中的页面名称之后添加查询字符串的所有尝试,因为我无法使它们中的任何一个工作。我真的需要一个直接回答这个益智游戏 - 这是我第三次问这里,没有什么工作。我认为很明显我的技能非常弱,但是我正在努力解决这个问题,解决这个问题真的会帮助我继续解决一系列新问题。 我们非常感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

将您的contact_2.html重命名为contact_2.php,以便PHP解释器对其进行解析。

更改

中的href
<a class="btn" href="../contact_2.html">Contact us about this item</a>

相应。

最后将<? php echo $_POST='subject' ? >替换为

<?php if (!empty($_POST['subject'])) echo $_POST['subject']; ?>
像@manniL说的那样。

答案 1 :(得分:0)

而不是echo $_POST='subject',请使用正确的语法:

echo $_POST['subject'];