i had attempted following code , little stuck here im wanting achieve:
- enter value in input , update preview html below
- once user happy preview output can click generate
- once clicked generate write preview html first_name-last_name.html file within same folder , redirect first_name-last_name.html file (this has not been coded, great if me add this)
jquery / html form:
<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> missing enteries, please check , 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 , if happy click create otherwise change values , verify again."); $("#btn").removeattr('disabled'); } }); $("#btn").click(function() { $.post("create_post.php", { // data sending request 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> have create e-mail signature. can view e-mail signature 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 { 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 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 , files transmitted confidential , intended solely use of individual or entity whom addressed. if have received email in error please notify system manager. message contains confidential information , intended individual named. if not named addressee should not disseminate, distribute or copy e-mail. please notify sender e-mail if have received e-mail mistake , delete e-mail system. if not intended recipient notified disclosing, copying, distributing or taking action in reliance on contents of information strictly prohibited.</p> </div> </div> </body> </html> current php post file:
<?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 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 { 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 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 , files transmitted confidential , intended solely use of individual or entity whom addressed. if have received email in error please notify system manager. message contains confidential information , intended individual named. if not named addressee should not disseminate, distribute or copy e-mail. please notify sender e-mail if have received e-mail mistake , delete e-mail system. if not intended recipient notified disclosing, copying, distributing or taking action in reliance on contents of information strictly prohibited.</p> </div> </body> </html> '); $file = fopen( $filepath, "w" ); fwrite( $file, $data ); fclose( $file ); $data = file_get_contents( $filepath ); //do after closing writing } } ?>
you can write file with:
touch( $filepath ); //create file if not exist $file = fopen( $filepath, "w" ); fwrite( $file, $data ); fclose( $file ); this replace entire file contents fwrite().
can check if file exists with
file_exists( $filepath ); you can define custom file path in manner like
$filepath = "whatever directory want go to/". $firstnamevariable ."-". $lastnamevariable .".html"; you can keep running $data variable write file @ end appending to, how $filepath above appending. or can write file multiple time.
fwrite( $file, "<html><head></head><body>" ); fwrite( $file, "<div>first name: ". $firstnamevaraible ."</div>" ); fwrite( $file, "<div>last name: ". $lastnamevariable ."</div>" ); fwrite( $file, "</body></html>" ); once you've created file, if want return entire contents user can do
$data = file_get_contents( $filepath ); //do after closing writing then can echo $data user or if want, echo function without need variable.
