jQuery获得关于输入和输出当前更改的密钥

时间:2015-04-27 23:03:17

标签: php jquery html

我曾尝试使用以下代码,现在有点卡住了,但这是我想要实现的目标:

  1. 在输入中输入值并在
  2. 下面更新预览html
  3. 一旦用户对预览输出感到满意,可以点击生成
  4. 一旦点击生成,它实际上会将预览HTML写入同一文件夹中的first_name-last_name.html文件,然后重定向到first_name-last_name.html文件
  5. jQuery / HTML表单:

    <html>
    <head>
        <title>Ambient Lounge - Create eSig</title>
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
        <!-- Include JS File Here -->
        <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
        <style type="text/css">
            @import url('http://fonts.googleapis.com/css?family=Open+Sans');
    
            body {
                font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
            }
    
            hr {
                margin-bottom: 1.5em;
            }
    
            .error_wrapper {
                color: #D8000C;
                background-color: #FFBABA;
                padding: 10px;
                margin-bottom: 1em;
            }
    
            .success_wrapper {
                color: #4F8A10;
                background-color: #DFF2BF;
                padding: 10px;
                margin-bottom: 1em;
            }
    
            #main {
                float: left;
                width: 20%;
            }
    
            #preview {
                float: left;
                width: 80%;
            }
    
            form label {
                display: none;
            }
    
            form input {
                margin-bottom: 0.5em;
                padding: 5px;
                width: 80%;
            }
    
        </style>
        <!-- Include JS File Here -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
        $(document).ready(function() {
    
            $(".error_wrapper, .success_wrapper").hide();
    
            var v_first_name = $("#first_name").val();
            var v_last_name = $("#last_name").val();
            var v_title = $("#title").val();
            var v_address = $("#address").val();
            var v_phone = $("#phone").val();
            var v_mobile = $("#mobile").val();
            var v_email = $("#email").val();
            var v_web = $("#web").val();
    
            $(".input_change").keyup(function(){
                $("#btn").attr("disabled", "disabled");
                var current_input = $(this).attr("id");
                console.log(current_input);
                $("#p_" + current_input).html($("#" + current_input).val());
            });
    
            $("#verify").click(function() {
    
                var has_error = false;
    
                $('#first_name, #last_name, #title, #address, #email, #web').each(function() {
    
                    $(this).attr('style', 'border: 0;');
    
                    if ($(this).val() == '') {
                        $(".error_msg").html("<strong>Error(s):</strong> You are missing some enteries, please check and try again.");
                        $(".error_wrapper").show();
    
                        $(this).attr('style', 'border: 1px solid red;');
                        has_error = true;
                    }
                });
    
                if (has_error != true) {
                    $(".error_wrapper").hide();
                    alert("You have verified changes, please double check and if happy click create otherwise change values and verify again.");
                    $("#btn").removeAttr('disabled');
                }
    
            });
    
            $("#btn").click(function() {
                $.post("create_post.php", { // Data Sending With Request To Server
    
                    first_name:v_first_name,
                    last_name:v_last_name,
                    title:v_title,
                    address:v_address,
                    phone:v_phone,
                    mobile:v_mobile,
                    email:v_email,
                    web:v_web
    
                }, function(response,status) { // Required Callback Function
                    alert("*----Received Data----*\n\nStatus : " + status);//"response" receives - whatever written in echo of above PHP script.
                    alert(response);
                    if(status == "success") {
                        $("#form")[0].reset();
                    } else {
    
                    }
                });
            });
        });
        </script>
    </head>
    <body>
        <h2>Create e-mail signature</h2>
        <hr>
        <div class="error_wrapper">
            <div class="error_msg"></div>
            <ul></ul>
        </div>
        <div class="success_wrapper">
            <div class="success_msg"><strong>Congraulations!</strong> You have successfully create your e-mail signature. You can view your e-mail signature by clicking <a href="http://www.ambientlounge.com/emails/">here</a>.</div>
        </div>
    
        <div id="main">
            <form id="form" method="post">
                <label>First Name</label>
                <input type="text" name="first_name" id="first_name" class="input_change" placeholder="First name"/><br>
                <label>Last Name</label>
                <input type="text" name="last_name" id="last_name" class="input_change" placeholder="Last name"/><br>
                <label>Title</label>
                <input type="text" name="title" id="title" class="input_change" placeholder="Job title"/><br>
                <label>Address</label>
                <input type="text" name="address" id="address" class="input_change" placeholder="Business Address"/><br>
                <label>Phone</label>
                <input type="text" name="phone" id="phone" class="input_change" placeholder="Phone number"/><br>
                <label>Mobile</label>
                <input type="text" name="mobile" id="mobile" class="input_change" placeholder="Mobile number"/><br>
                <label>Email</label>
                <input type="text" name="email" id="email" class="input_change" placeholder="Email address"/><br>
                <label>Web</label>
                <input type="text" name="web" id="web" class="input_change" placeholder="Web address"/>
            </form>
            <button id="verify">Verify</button> <button id="btn" disabled>Create</button>
        </div>
    
        <div id="preview">
    
            <!-- PREVIEW OF HTML EMAIL -->
    
            <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
    
            <style type="text/css">
                @import url('http://fonts.googleapis.com/css?family=Open+Sans');
    
                .clear {
                    clear: both;
                }
    
                b {
                    font-weight: normal;
                }
    
                b.bold {
                    font-weight: bold;
                }
    
                .emailContent {
                    font-family:'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
                    width: 480px;
                    color: #767676;
                }
    
                .emailContent a {
                    color: #2A96B4;
                    text-decoration: none;
                }
    
                    .emailName {
                        height: 62px;
                    }
    
                    .emailName img {
                        float: right;
                        margin-top: 1.2em;
                        margin-right: 0.8em;
                    }
    
                    .emailName p {
                        color: #767676;
                        font-size: 0.8em;
                        float: left;
                    }
    
                    .emailName p span {
                        color: #2A96B4;
                        font-weight: bold;
                        font-size: 1.2em;
                    }
    
                    .emailLogo {
                        height: 46px;
                        clear: both;
                    }
    
                    .emailLogo img {
                        float: left;
                        margin-top: 0.3em;
                    }
    
                    .emailLogo ul.socialList {
                        list-style: none;
                        border-left: 1px solid #aaaaaa;
                        padding-left: 1.5em;
                        margin: 0 0 0 1.5em;
                        float: left;
                    }
    
                    .emailLogo ul.socialList li {
                        display: inline-block;
                    }
    
                    .emailLogo ul.socialList li img {
                        margin: 0;
                    }
    
                    .emailDetails {
                        clear: both;
                        border-top: 5px solid #2A96B4;
                        margin-top: 1em;
                    }
    
                    .emailDetails p {
                        font-size: 12px;
                        margin: 0.3em 0;
                    }
    
                    .emailDetails p.larger {
                        font-size: 14px;
                    }
    
                    .emailDetails p span { 
                        color: #2A96B4;
                    }
    
                .emailNotice {
                    border-top: 1px solid #aaaaaa;
                    font-size: 0.6em;
                    padding-top: 0.8em;
                    margin-top: 2.5em;
                }
    
            </style>
    
            <div class="emailContent">
                <div class="emailName">
                    <p><span><b id="p_first_name" class="bold">James</b> <b id="p_last_name" class="bold">Brandon</b></span><br><b id="p_title">Global Technical Lead</b></p>
                    <img src="http://www.ambientlounge.com/emails/like-us-on-facebook.png" alt="Like us on Facebook" />
                </div>
    
                <div class="clear"></div>
    
                <div class="emailLogo">
                    <img src="http://www.ambientlounge.com/emails/ambient-logo-email.png" alt="Ambient Lounge" />
                    <ul class="socialList">
                        <li><a href="http://www.facebook.com/ambientlounge" title="Ambient Lounge: Facebook"><img src="http://www.ambientlounge.com/emails/icon-facebook.png" alt="Facebook" /></a></li>
                        <li><a href="http://www.twitter.com/ambientlounge" title="Ambient Lounge: Twitter"><img src="http://www.ambientlounge.com/emails/icon-twitter.png" alt="Twitter" /></a></li>
                        <li><a href="http://www.instagram.com/ambientlounge" title="Ambient Lounge: Instagram"><img src="http://www.ambientlounge.com/emails/icon-instagram.png" alt="Instagram" /></a></li>
                    </ul>
                </div>
    
                <div class="clear"></div>
    
                <div class="emailDetails">
                    <p><span>a:</span> <b id="p_address">Old knows Factory, Unit 5C, Office 14, St Anns Hill Road, Nottingham, NG3 4GN</b></p>
                    <p><span>p:</span> <b id="p_phone">+44(0) 844 579 1112</b> | <span>m:</span> <b id="p_mobile">+44(0) 771 809 0 809</b></p>
                    <p class="larger"><a href="mailto:sarah@ambientlounge.co.uk"><span id="p_email">james@ambientlounge.com</b></a> | <a href="http://www.ambientlounge.co.uk/"><b id="p_web">www.ambientlounge.co.uk</b></a></p>
                </div>
    
                <p class="emailNotice">This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system. If you are not the intended recipient you are notified that disclosing, copying, distributing or taking any action in reliance on the contents of this information is strictly prohibited.</p>
            </div>
    
        </div>
    </body>
    </html>
    

    当前的PHP帖子文件:

    <?php
        if($_POST["first_name"]) {
            $first_name = $_POST["first_name"];
            $last_name = $_POST["last_name"];
            $title = $_POST["title"];
            $address = $_POST["address"];
            $phone = $_POST["phone"];
            $mobile = $_POST["mobile"];
            $email = $_POST["email"];
            $web = $_POST["web"];
    
            $filePath == $first_name + "-" + $last_name + ".html";
    
            if(file_exists($filePath)){
                echo "Already exisits";
            } else {
                touch( $filePath ); //create file if it does not exist
    
                fwrite( $file, '
                <html>
                    <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                        <title>Ambient Lounge - e-Mail Signature (James Brandon)</title>
                        <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
                        <style type="text/css">
                            @import url("http://fonts.googleapis.com/css?family=Open+Sans");
    
                            .clear {
                                clear: both;
                            }
    
                            .emailContent {
                                font-family:"Open Sans", "Helvetica Neue", Helvetica, sans-serif;
                                width: 480px;
                                color: #767676;
                            }
    
                            .emailContent a {
                                color: #2A96B4;
                                text-decoration: none;
                            }
    
                                .emailName {
                                    height: 62px;
                                }
    
                                .emailName img {
                                    float: right;
                                    margin-top: 1.2em;
                                    margin-right: 0.8em;
                                }
    
                                .emailName p {
                                    color: #767676;
                                    font-size: 0.8em;
                                    float: left;
                                }
    
                                .emailName p span {
                                    color: #2A96B4;
                                    font-weight: bold;
                                    font-size: 1.2em;
                                }
    
                                .emailLogo {
                                    height: 46px;
                                    clear: both;
                                }
    
                                .emailLogo img {
                                    float: left;
                                    margin-top: 0.3em;
                                }
    
                                .emailLogo ul.socialList {
                                    list-style: none;
                                    border-left: 1px solid #aaaaaa;
                                    padding-left: 1.5em;
                                    margin: 0 0 0 1.5em;
                                    float: left;
                                }
    
                                .emailLogo ul.socialList li {
                                    display: inline-block;
                                }
    
                                .emailLogo ul.socialList li img {
                                    margin: 0;
                                }
    
                                .emailDetails {
                                    clear: both;
                                    border-top: 5px solid #2A96B4;
                                    margin-top: 1em;
                                }
    
                                .emailDetails p {
                                    font-size: 12px;
                                    margin: 0.3em 0;
                                }
    
                                .emailDetails p.larger {
                                    font-size: 14px;
                                }
    
                                .emailDetails p span { 
                                    color: #2A96B4;
                                }
    
                            .emailNotice {
                                border-top: 1px solid #aaaaaa;
                                font-size: 0.6em;
                                padding-top: 0.8em;
                                margin-top: 2.5em;
                            }
    
                        </style>
    
                    <div class="emailContent">
                ');
                fwrite( $file, '
                    <div class="emailName">
                        <p><span>'.$first_name.' '.$last_name.'</span><br>'.$title.'</p>
                        <img src="http://www.ambientlounge.com/emails/like-us-on-facebook.png" alt="Like us on Facebook" />
                    </div>
    
                    <div class="clear"></div>
    
                    <div class="emailLogo">
                        <img src="http://www.ambientlounge.com/emails/ambient-logo-email.png" alt="Ambient Lounge" />
                        <ul class="socialList">
                            <li><a href="http://www.facebook.com/ambientlounge" title="Ambient Lounge: Facebook"><img src="http://www.ambientlounge.com/emails/icon-facebook.png" alt="Facebook" /></a></li>
                            <li><a href="http://www.twitter.com/ambientlounge" title="Ambient Lounge: Twitter"><img src="http://www.ambientlounge.com/emails/icon-twitter.png" alt="Twitter" /></a></li>
                            <li><a href="http://www.instagram.com/ambientlounge" title="Ambient Lounge: Instagram"><img src="http://www.ambientlounge.com/emails/icon-instagram.png" alt="Instagram" /></a></li>
                        </ul>
                    </div>
    
                    <div class="clear"></div>
    
                    <div class="emailDetails">
                        <p><span>a:</span> '.$address.'</p>
                        <p><span>p:</span> '.$phone.' | <span>m:</span> '.$mobile.'</p>
                        <p class="larger"><a href="mailto:'.$email.'">'.$email.'</a> | <a href="http://'.$web.'/">'.$web.'</a></p>
                    </div>
                ');
                fwrite( $file, '
                            <p class="emailNotice">This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system. If you are not the intended recipient you are notified that disclosing, copying, distributing or taking any action in reliance on the contents of this information is strictly prohibited.</p>
                        </div>
    
                    </body>
                </html>
                ');
    
                $file = fopen( $filePath, "w" );
                fwrite( $file, $data );
                fclose( $file );
    
                $data = file_get_contents( $filePath ); //do this after closing your writing
            }
        }
    ?>
    

1 个答案:

答案 0 :(得分:1)

您可以使用以下内容写入文件

touch( $filePath ); //create file if it does not exist
$file = fopen( $filePath, "w" );
fwrite( $file, $data );
fclose( $file );

这将用你想要的东西()替换整个文件内容 您可以使用

检查文件是否已存在
file_exists( $filePath );

您可以采用

之类的方式定义自定义文件路径
$filePath = "whatever directory you want it to go to/". $firstnamevariable ."-". $lastnamevariable .".html";

您可以通过附加保留一个正在写入文件的正在运行的$ data变量,就像上面的$ filePath附加一样。或者你可以简单地多次写入文件。

fwrite( $file, "<html><head></head><body>" );
fwrite( $file, "<div>First Name: ". $firstnamevaraible ."</div>" );
fwrite( $file, "<div>Last Name: ". $lastnamevariable ."</div>" );
fwrite( $file, "</body></html>" );

一旦您创建了文件,如果您想将整个内容返回给用户,您就可以

$data = file_get_contents( $filePath ); //do this after closing your writing

然后您可以向用户回显$ data,或者如果需要,只需回显该函数而无需变量。