I am working on a legacy java web application. The application uses iText 2.0.1. They do not want to upgrade the version of iText so I have to continue using this one.
I need to output to either pdf or html. I am creating a PdfPTable. I create a second PdfPTable and add some PdfPCells. I add the second table to the first table.
The pdf output works great. The Html output is empty.
This is my test code.
public void createOutput(String outputType) {
Document document = null;
DocWriter docWriter = null;
FileOutputStream outputFO = null;
File pdfFile = new File("output.pdf");
File htmlFile = new File("output.html");
try {
document = new Document(PageSize.LETTER.rotate(), 2, 2, 5, 2);
if (outputType.equals("pdf")) {
outputFO = new FileOutputStream(pdfFile);
docWriter = PdfWriter.getInstance(document, outputFO);
pdfContentByte = new PdfContentByte((PdfWriter) docWriter);
}
else {
outputFO = new FileOutputStream(htmlFile);
docWriter = HtmlWriter.getInstance(document, outputFO);
}
document.open();
PdfPTable outputTable = new PdfPTable(1);
PdfPTable innerTable = new PdfPTable(5);
float widths[] = { 156f, 156f, 156f, 156f, 156f };
outputTable.setTotalWidth(780);
outputTable.setLockedWidth(true);
innerTable.setTotalWidth(widths);
innerTable.setLockedWidth(true);
// Add some PdfPCell objects to the inner table.
// Add inner table to output Table
outputTable.addCell(innerTable);
document.add(outputTable);
}
catch (Exception ex) {
System.out.println(ex.getMessage());
}
finally {
if (docWriter != null && !docWriter.isCloseStream()) {
try {
docWriter.close();
}
catch (Exception ex) {
System.out.println(ex.getMessage());
}
}
if (document != null && document.isOpen()) {
try {
document.close();
}
catch (Exception ex) {
System.out.println(ex.getMessage());
}
try {
if (outputFO != null) {
outputFO.close();
}
}
catch (Exception ex) {
ex.printStackTrace();
}
}
}
This is the source of the html file:
<html>
<head>
<!-- iText 2.0.1 (by lowagie.com) -->
<!-- CreationDate: Thu Sep 03 21:00:47 GMT 2015 -->
</head>
<body leftmargin="2.0" rightmargin="2.0" topmargin="5.0" bottommargin="2.0">
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
<div style="page-break-before: always; " />
</body>
</html>
Related
I have created a simple form page for people to submit change requests and am struggling to get the invalid validation working for the input field where type="file".
I have written a function to run the object through custom validation (similar to how I handle Email validation), but I never receive the red outline and error message like I do for email. I am logging my "Not valid" message successfully when I try to upload more than 5 files, but still receive a green outline and the valid message on the input.
I think I've tried so much at this point I'm just confusing myself. I was able to get both valid and invalid messages at one point, but nothing beyond that.
I am trying to avoid validating every input individually if possible.
Thanks for any help in advance!
<!DOCTYPE html>
<html lang="en" class="vh-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="AWright" />
<link rel="icon" href="##URL_FAV_ICON##" />
<title>Change Request Form</title>
<!-- Bootstrap 5 CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- /Bootstrap 5 CSS-->
<!-- Axios Library -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- /Axios Library -->
<style></style>
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.11"></script>
</head>
<body>
<div id="awApp" class="d-flex flex-column vh-100">
<!-- FIXED NAVBAR AND/OR HEADER -->
<header>
<nav
class="navbar navbar-expand-md navbar-light fixed-top bg-light"
></nav>
</header>
<!-- / HEADER/NAVBAR -->
<!-- MAIN CONTENT -->
<main role="main" class="flex-shrink-0">
<div class="container">
<div class="row mt-5 pt-5">
<div class="col-md-8 offset-md-2">
<h2 class="mt-5 text-center" style="font-size: 3rem">
Program Change Request Form
</h2>
<p class="text-center">
Please complete the below form to submit your program change
request:
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="card shadow p-3 my-5">
<div class="card-body">
<form
novalidate
class="needs-validation"
name="mainForm"
#submit="submitForm"
method="post"
ref="requestForm"
>
<div class="row mb-2">
<div class="col-md-6 mb-3">
<label for="firstname" class="form-label mb-0"
>First Name*</label
>
<input
id="firstname"
type="text"
name="firstname"
class="form-control"
v-model="contact.firstName"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a first name.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastname" class="form-label mb-0"
>Last Name*</label
>
<input
id="lastname"
type="text"
name="lastname"
class="form-control"
v-model="contact.lastName"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a last name.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="email" class="form-label mb-0"
>Email Address*</label
>
<input
id="email"
type="text"
name="email"
class="form-control"
v-model="contact.email"
pattern="\b[a-zA-Z0-9._%-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,100}\b"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a valid email.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="name" class="form-label mb-0"
>Name of Request*</label
>
<input
id="name"
type="text"
name="RequestName"
class="form-control"
v-model="contact.name"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a name for the change request being made.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="description" class="form-label mb-0"
>Description of Request*</label
>
<textarea
id="description"
type="text"
name="RequestDetails"
class="form-control"
v-model="contact.description"
required
></textarea>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a description for the request being made.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="due_date" class="form-label mb-0"
>Estimated Due Date*</label
><br />
<em
><small
>Please note that this subject to change.</small
></em
>
<input
id="due_date"
type="text"
name="CompletionDate"
class="form-control"
v-model="contact.dueDate"
v-maska="dateMask"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a desired due date for the change request
in MM/dd/yyyy format.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="files" class="form-label mb-0"
>Please attach any assets (images, font files, etc)
here to upload*:</label
><br />
<small
><em
>*Maximum of 5 files can be uploaded at a time</em
></small
>
<input
type="file"
class="form-control"
id="files"
name="files"
#change="handleFilesUpload( $event )"
multiple
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please do not upload more than 5 files at a time.
</div>
</div>
</div>
<button
type="submit"
class="btn btn-primary px-4 py-2"
value="Submit"
>
Submit
</button>
<div>
<small class="form-text text-muted">
<em>* Denotes a required field.</em>
</small>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /MAIN CONTENT -->
</div>
<!--Bootstrap 5 JS-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!--/Bootstrap 5 JS-->
<!-- Maska JS -->
<script src="https://cdn.jsdelivr.net/npm/maska#latest/dist/maska.js"></script>
<!-- /Maska JS -->
<!-- VUE APP CODE -->
<script>
const app = Vue.createApp({
data() {
return {
currentYear: new Date().getFullYear(),
now: new Date().toISOString(),
contact: {
firstName: "##firstname##",
lastName: "##lastname##",
email: "##email##",
name: "",
description: "",
dueDate: "",
},
files: "",
};
},
methods: {
submitForm(e) {
const isValid =
this.contact.firstName &&
this.contact.lastName &&
this.contact.email &&
this.contact.name &&
this.contact.description &&
this.contact.dueDate &&
this.validEmail(this.contact.email) &&
this.files.length <= 5 &&
this.multipleFilesValidation(this.files);
e.target.classList.add("was-validated");
if (!isValid) {
e.preventDefault();
console.log("Not valid");
} else {
e.preventDefault();
this.postToZapier();
console.log("Success");
}
},
multipleFilesValidation: function (files) {
if (this.files.length > 5) {
console.log(this.files);
return false;
} else {
return true;
}
},
handleFilesUpload(event) {
this.files = event.target.files;
},
postToZapier() {
console.log(this.files);
var formData = new FormData();
for (var i = 0; i < this.files.length; i++) {
let file = this.files[i];
formData.append("files[" + i + "]", file);
}
console.log(formData);
var url = "https://hooks.zapier.com/hooks/catch/159749/b9h6kww/";
var requestForm = this.$refs.requestForm;
console.log(requestForm);
axios
.post(url, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then(function () {
console.log("Success!");
setTimeout(function () {
requestForm.submit();
}, 0);
})
.catch(function () {
console.log("Fail.");
});
},
validEmail: function (email) {
const re = /\b[a-zA-Z0-9._%-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,100}\b/;
return re.test(email);
},
},
computed: {
dateMask: function () {
return "##/##/####";
},
},
});
app.directive("maska", Maska.maska);
app.mount("#awApp");
</script>
<!-- /VUE APP CODE-->
</body>
</html>
I wrote this code in java 7 and it works without problems.
I'm now trying to use java 6, and it's getting strange : the request object does not have any visible parameter, so I can't access the info I send with the form.
Here is the code :
<%# page pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Thesaurus Builder</title>
<link type="text/css" rel="stylesheet" href="<c:url value="/form.css"/>" />
</head>
<body>
<form action="<c:url value='/' />" method="post" enctype="multipart/form-data"> <!-- accept-charset="UTF-8" -->
<fieldset>
<legend>Analyse de texte</legend>
<label for="file">Fichier à analyser</label>
<textarea rows="7" cols="100" name="file" id="file" ></textarea>
<br />
<br />
<label for="encoding">Encodage</label>
<input type="text" id="encoding" name="encoding" value="UTF-8" />
<br />
<br />
<label for="skos">Choississez un thesaurus</label>
<c:if test="${empty listThesaurus}">
<input type="text" id="skos" name="skos" value="No thesaurus avalaible" disabled = "disabled"/>
</c:if>
<c:if test="${not empty listThesaurus}">
<select id="skos" name="skos" >
<c:forEach var="item" items="${listThesaurus}">
<option value= "<c:out value="${item.key}/${item.value}" />" ><c:out value="${item.key} - ${item.value}" /></option>
</c:forEach>
</select>
</c:if>
<br />
<br />
<label for="model">Choississez un model (temp)</label>
<c:if test="${empty listModel}">
<input type="text" id="encoding" name="encoding" value="No model avalaible" disabled = "disabled"/>
</c:if>
<c:if test="${not empty listModel}">
<select id="model" name="model" >
<c:forEach var="item" items="${listModel}">
<option value= "<c:out value="${item.key}/${item.value}}" />" ><c:out value="${item.key} - ${item.value}" /></option>
</c:forEach>
<c:if test="${empty listModel}"></c:if>
</select>
</c:if>
<br />
<br />
<br />
<label for="debug">Mode Debug</label>
<input type="checkbox" id="debug" name="debug"/>
<br />
<br />
<input type="submit" value="Envoyer" class="sansLabel" />
<br />
</fieldset>
</form>
<c:if test="${not empty param.debug }">
<c:if test="${not empty debug }">
<p class="debug"><c:forEach items="${debug}" var="e">${e}<br/></c:forEach></p>
</c:if>
</c:if>
<c:if test="${not empty errors}">
<p class="error"><c:forEach items="${errors}" var="e">${e}<br/></c:forEach></p>
</c:if>
<c:if test="${not empty tags}">
<h3>Résultat Etude stockastique :</h3>
<div id="tagCLoud">
<h4>Tag Cloud </h4>
<c:forEach items="${tags}" var="tag">
<span style ="margin-right: 64px"><span class = "tags" style = "font-size: ${tag.value[1]};"><c:out value = "${tag.key}"/></span>(${tag.value[0]})</span>
</c:forEach>
</div>
<div id="coocurrence">
<h4>Co-occurrence </h4>
<c:forEach var = "i" begin="0" end="${ fn:length(coocurrence) -1}">
<c:forEach var = "j" begin="0" end="${ fn:length(coocurrence[i]) -1}">
<c:choose>
<c:when test="${j == 0}">
<c:out value="${coocurrence[i][j]} :"/><br>
</c:when>
<c:otherwise>
<span style ="margin-left: 30px">- <c:out value="${coocurrence[i][j]}"/></span><br>
</c:otherwise>
</c:choose>
</c:forEach>
<br>
</c:forEach>
</div>
<br>
<br>
<div id="concordance">
<h4>Concordance </h4>
<c:forEach var = "i" begin="0" end="${ fn:length(concordance) -1}">
<c:forEach var = "j" begin="0" end="${ fn:length(concordance) -2}">
<c:choose>
<c:when test="${j == 0}">
<c:out value="${concordance[i][j]} :"/><br>
</c:when>
<c:otherwise>
<span style ="margin-left: 30px">"<c:out value="${concordance[i][j]}"/>"</span><br>
</c:otherwise>
</c:choose>
</c:forEach>
<br>
</c:forEach>
</div>
</c:if>
<c:if test="${not empty prettyOutput}">
<h3>Résultat Etude Controlée :</h3>
<table>
<tr>
<th>Concept</th>
<th>Concept supérieur</th>
<th>Concept(s) référent(s)</th>
<th>Concept(s) reliés</th>
<th>Valeur</th>
</tr>
<c:forEach items="${prettyOutput}" var="o">
<tr>
<td><c:out value="${o['node']}"/></td>
<td><c:out value="${o['broader']}"/></td>
<td><c:out value="${o['narrower']}"/></td>
<td><c:out value="${o['related']}"/></td>
<td><c:out value="${o['nRank']}"/></td>
</tr>
</c:forEach>
</table>
</c:if>
</body>
</html>
And the sevlet code :
package laetan.web.servlets;
import java.io.IOException;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import laetan.web.model.analyzer.TextAnalyzer;
import laetan.web.model.builder.FileLoader;
import laetan.web.model.builder.Vocabulary;
public class Analyzer extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
FileLoader.getThesaurii(request,true);
FileLoader.getModels(request,true);
this.getServletContext().getRequestDispatcher( "/WEB-INF/input.jsp" ).forward( request, response );
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
String f = request.getParameter("file");
Vocabulary vocabulary = new Vocabulary(request,"load");
#SuppressWarnings("unused")
TextAnalyzer analyze = new TextAnalyzer(request, vocabulary);
this.getServletContext().getRequestDispatcher( "/WEB-INF/input.jsp" ).forward( request, response );
}
}
In the servlet, f is null.
I'm using Zk framework and trying to get a url parameter from zhtml page. I've tried:
Executions.getCurrent().getParameter("param");
It doesn't work for zhtml although I tried both zscript in the client side and page composer in the server side. But it is working for a zul page. How can I get a url parameter of zhtml as an example:
http://localhost:8080/pystest/reset_password.zhtml?param=xxx
Here is my zhtml page:
<!DOCTYPE html>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
<html lang="en" xmlns:zk="zk" xmlns:z="zul">
<head>
<meta charset="UTF-8"/>
<title>Reset Password</title>
<meta name="description" content="User reset password page" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- basic styles -->
<link href="css/strap.css" rel="stylesheet" />
<link rel="stylesheet" href="css/font.css" />
<!-- fonts -->
<link rel="stylesheet" href="css/ace-fonts.css" />
<!--styles -->
<link rel="stylesheet" href="css/min.css" />
<link rel="stylesheet" href="css/tlr.css" />
</head>
<body class="pass-layout">
<z:div sclass="main-container" apply="component.ResetPasswordComposer">
<div class="main-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="pass-container">
<div class="position-relative">
<div id="resetpass-box" class="resetpass-box visible widget-box no-border">
<div class="widget-body">
<div class="widget-main">
<h4 class="header green lighter bigger">
<i class="icon-group blue"></i>
Choose your new password.
</h4>
<form>
<fieldset>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<z:textbox type="password" class="form-control" placeholder="New password" id="password1" />
<i class="icon-lock"></i>
</span>
</label>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<z:textbox type="password" class="form-control" placeholder="Verify password" id="password2"/>
<i class="icon-retweet"></i>
</span>
</label>
<div class="space-24"></div>
<div class="clearfix">
<button type="reset" class="width-30 pull-left btn btn-sm">
<i class="icon-refresh"></i>
Reset
</button>
<button id="resetButton" type="button" class="width-65 pull-right btn btn-sm btn-success">
Submit
<i class="icon-arrow-right icon-on-right"></i>
</button>
</div>
</fieldset>
</form>
</div>
<div class="toolbar center">
</div>
</div><!-- /widget-body -->
</div><!-- /resetpass-box -->
</div><!-- /position-relative -->
</div><!-- /pass-container -->
</div><!-- /col-sm-10 col-sm-offset-1 -->
</div><!-- /row -->
</div><!-- /main-content -->
</z:div><!-- /main-container -->
<!-- below script is not working -->
<zk:zscript>
<![CDATA[
alert(Executions.getCurrent().getParameter("param"));
]]>
</zk:zscript>
</body>
</html>
And server side:
public class ResetPasswordComposer extends GenericForwardComposer<Component> {
/**
*
*/
private static final long serialVersionUID = 1L;
protected Textbox password1;
protected Textbox password2;
#Override
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
}
public void onClick$resetButton(){
UserOperator userOperator=new UserOperator();
try{
String token=getToken();
System.out.println(token);
}catch(Exception e){
e.printStackTrace();
}
}
private String getToken(){
Execution exec = Executions.getCurrent();
String param=exec.getParameter("param");
return param;
}
}
Your problem is actually that the
private String getToken(){
Execution exec = Executions.getCurrent();
String param=exec.getParameter("param");
return param;
}
Is only available in the doAfterCompose cyclus.
Asked it there and save it as a global string.
I'm going nuts trying to figure out why the datepicker variable is not being sent via email with the rest of my form submission?
This is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="assets/ico/favicon.png">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/andy.css" rel="stylesheet" type="text/css">
<link href="css/form.css" rel="stylesheet" type="text/css">
<link href="css/mq.css" rel="stylesheet" type="text/css">
<link href="css/default.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<!-- Google Web Fonts -->
<link href='http://fonts.googleapis.com/css?family=Maiden+Orange' rel='stylesheet' type='text/css'>
<style>
.cap-overlay .button { margin-top:10px}
.cap-overlay{width: 100%; color:#fff; background: rgba(0, 0, 0, 0.43);left:0;padding:12px; line-height: 1.4em;font-size:14px}
.cap-overlay h5 {color:#fff;}
a[data-toggle="drop-panel"] {display: block;}
</style>
<script>
$(window).load(function(){
$('.hcaption').hcaptions();
});
</script>
<script>
$(document).ready(function() {
$(".overlay").fancybox({
helpers : {
overlay : {
opacity: 0.8,
css : {
'background-color' : '#000'
}
}
},
maxWidth : 900,
maxHeight : 380,
fitToView : false,
width : 650,
height : 400,
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
helpers : {
overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox
}
});
</script>
<script>
var hdate = $('input#hdate').datepicker('getDate');
</script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form method="post" action="sendmail.php">
<label class='form_error_title'>Please check the required fields</label>
</div>
<ol class='phpfmg_form' >
<li class='field_block' id='field_0_div'><div class='col_label'>
<label class='form_field'>Date of Hunt</label> <label class='form_required' >*</label> </div>
<div class='col_field'>
<input type="text" name="hdate" id="hdate" class="datepicker input-large">
<div id='field_0_tip' class='instruction'></div>
</div>
</li>
<br>
<li class='field_block' id='field_1_div'><div class='col_label'>
<label class='form_field'>Name</label> <label class='form_required' >*</label> </div>
<div class='col_field'>
<input type="text" name="name" id="name" value="" class='text_box input-large'>
<div id='field_1_tip' class='instruction'></div>
</div>
</li>
<br>
<li class='field_block' id='field_2_div'><div class='col_label'>
<label class='form_field'>E-Mail Address</label> <label class='form_required' >*</label> </div>
<div class='col_field'>
<input type="text" name="email" id="email" value="" class='text_box input-large'>
<div id='field_2_tip' class='instruction'></div>
</div>
</li>
<br>
<li class='field_block' id='field_3_div'><div class='col_label'>
<label class='form_field'>Phone Number</label> <label class='form_required' >*</label> </div>
<div class='col_field'>
<input type="text" name="phone" id="phone" value="" class='text_box input-large'>
<div id='field_3_tip' class='instruction'></div>
</div>
</li>
<br>
<li class='field_block' id='field_4_div'><div class='col_label'>
<label class='form_field'>Select the hunt you're interested in:</label> <label class='form_required' >*</label> </div>
<div class='col_field'>
<input type='checkbox' name='hunt_type' id='gator' value="Gator" class='form_checkbox' ><label class='form_choice_text' for='field_4_0'>Gator</label><br>
<input type='checkbox' name='hunt_type' id='hog' value="Hog" class='form_checkbox' ><label class='form_choice_text' for='field_4_1'>Hog</label><br>
<input type='checkbox' name='hunt_type' id='dove' value="Dove" class='form_checkbox' ><label class='form_choice_text' for='field_4_2'>Dove</label><br>
</div>
</li>
<br>
<li class='field_block' id='field_5_div'><div class='col_label'>
<label class='form_field'>Total # of Guests</label> <label class='form_required' >*</label> </div>
<div class='col_field'>
<select name='guests' id='total-guests' class='text_select' >
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
</select>
<div id='field_5_tip' class='instruction'></div>
</div>
</li>
<br>
<li class='field_block' id='field_6_div'><div class='col_label'>
<label class='form_field'>Additional Information?</label> <label class='form_required' > </label> </div>
<div class='col_field'>
<textarea name="info" id="info" rows=4 cols=25 class='text_area input-large'></textarea>
<div id='field_6_tip' class='instruction'></div>
</div>
</li>
<!-- Add Captcha Here -->
<li>
<div class='col_label'> </div>
<div class='form_submit_block col_field'>
<input type="submit" value="Submit" class='form_button'>
<span id='phpfmg_processing' style='display:none;'>
<img id='phpfmg_processing_gif' src='admin.php?mod=image&func=processing' border=0 alt='Processing...'> <label id='phpfmg_processing_dots'></label>
</span>
</div>
</li>
</ol>
</form>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="dist/js/bootstrap.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/collapse.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/zebra_datepicker.js"></script>
<script>
$(document).ready(function() {
// assuming the controls you want to attach the plugin to
// have the "datepicker" class set
$('input.datepicker').Zebra_DatePicker();
});
</script>
</body>
</html>
And this is my php:
<?php
$hdate = $_POST['hdate'];
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$hunt_type = $_POST['hunt_type'];
$guests = $_POST['guests'];
$info = $_POST['info'];
$to = "andyw504#gmail.com";
$subject = "Some subject";
$body = "You have a new reservation!<br><br>
Date of Hunt: $hdate<br>
Name: $name<br>
E-mail: $email<br>
Phone Number: $phone<br>
Type of Hunt: $hunt_type<br>
Number of Guests: $guests<br>
Comments: $info<br>";
$headers = "From: $email" . "\r\n" .
"Reply-To: $to" . "\r\n" .
"X-Mailer: PHP/" . phpversion();
$headers .= 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
mail($to,$subject,$body,$headers);
echo "Email sent.";
exit;
?>
They've asked me to add more detail. The datepicker is popping up and putting the date in the text area. When I call that variable to send via email it is blank. Every other field is recorded and sent in the e-mail except the date, which is one of the most important parts of the form.
EDIT (new code for form and PHP)
First download Pickadate.js and look inside the index.htm file.
https://github.com/amsul/pickadate.js
You will see this <input id="input_01" class="datepicker" type="text"> just change that to <input id="input_01" class="datepicker" type="text" name="hdate"> and you'll be in business.
Plus there are a few themes to choose from.
Added [] in name='hunt_type[]' for all three checkboxes. This is important, because if someone chose 2 or more, only one will show up in the form.
Also added this in PHP handler which will handle the array for "hunt type":
foreach($_POST['hunt_type'] as $value) {
$hunt_type.= $value . "\n";
}
HTML form
<form method="post" action="handler.php">
Hunt date:
<input type="text" name="hdate">
<br>
Hunt type:
<li class='field_block' id='field_4_div'><div class='col_label'>
<label class='form_field'>Select the hunt you're interested in:</label> <label class='form_required' >*</label> </div>
<div class='col_field'>
<input type='checkbox' name='hunt_type[]' id='gator' value="Gator" class='form_checkbox' ><label class='form_choice_text' for='field_4_0'>Gator</label><br>
<input type='checkbox' name='hunt_type[]' id='hog' value="Hog" class='form_checkbox' ><label class='form_choice_text' for='field_4_1'>Hog</label><br>
<input type='checkbox' name='hunt_type[]' id='dove' value="Dove" class='form_checkbox' ><label class='form_choice_text' for='field_4_2'>Dove</label><br>
</div>
</li>
<br>
Name:
<input type="text" name="name">
<br>
Email:
<input type="text" name="email">
<br>
Tel:
<input type="text" name="phone">
<br>
Guests:
<input type="text" name="guests">
<br>
Comments:<br>
<textarea rows="6" name="info" cols="38"></textarea>
<br>
<input type="submit" name="submit" value="Submit">
</form>
PHP handler (handler.php)
<?php
$hdate = $_POST['hdate'];
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
//$hunt_type = $_POST['hunt_type'];
$guests = $_POST['guests'];
$info = $_POST['info'];
$to = "email#example.com";
$subject = "Some subject" . "\r\n";
foreach($_POST['hunt_type'] as $value) {
$hunt_type.= $value . "\n";
}
$body = "You have a new reservation!<br><br>
Date of Hunt: $hdate<br>
Name: $name<br>
E-mail: $email<br>
Phone Number: $phone<br>
Type of Hunt: $hunt_type<br>
Number of Guests: $guests<br>
Comments: $info<br>";
$headers = "From: $email" . "\r\n" .
"Reply-To: $to" . "\r\n" .
"X-Mailer: PHP/" . phpversion();
$headers .= 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
mail($to,$subject,$body,$headers);
echo "Email sent.";
exit;
?>
I have the following code that I found on here.
If I type in http://google.com
It loads google.com into the iframe.
My question is,
How can I have more than 1 iframe to be filled
Can I have it so that I do not have to put in http:// just the domain, google.com
Thanks, Here is the code:
<html>
<head>
<title>Blah</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" height="500" width="480">
</iframe>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" height="500" width="840">
</iframe>
</body>
</html>
Thanks alot. That is exactly what I was looking for! Here it is completed:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Blah</title>
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme1").src = 'http://' +
document.getElementById("txtSRC").value;
document.getElementById("myIfreme2").src = 'http://' +
document.getElementById("txtSRC").value;
document.getElementById("myIfreme3").src = 'http://' +
document.getElementById("txtSRC").value;
document.getElementById("myIfreme4").src = 'http://' +
document.getElementById("txtSRC").value;
document.getElementById("myIfreme5").src = 'http://' +
document.getElementById("txtSRC").value;
document.getElementById("myIfreme6").src = 'http://' +
document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL: http://
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<div style="clear:both">320 width</div>
<iframe id="myIfreme1" src="" frameborder="0" marginwidth="0" height="480" width="320"
scrolling="yes"></iframe>
<div style="clear:both">480 width</div>
<iframe id="myIfreme2" src="" frameborder="0" marginwidth="0" height="480" width="480"
scrolling="yes"></iframe>
<div style="clear:both">640 width</div>
<iframe id="myIfreme3" src="" frameborder="0" marginwidth="0" height="480" width="640"
scrolling="yes"></iframe>
<div style="clear:both">800 width</div>
<iframe id="myIfreme4" src="" frameborder="0" marginwidth="0" height="480" width="800"
scrolling="yes"></iframe>
<div style="clear:both">1024 width</div>
<iframe id="myIfreme5" src="" frameborder="0" marginwidth="0" height="480" width="1024"
scrolling="yes"></iframe>
<div style="clear:both">1280 width</div>
<iframe id="myIfreme6" src="" frameborder="0" marginwidth="0" height="480" width="1280"
scrolling="yes"></iframe>
</body>
</html>
THANKS alfasin - You are AWESOME!
Try:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Blah</title>
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme1").src = document.getElementById("txtSRC").value;
document.getElementById("myIfreme2").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme1" src="" frameborder="0" marginwidth="0" height="500" width="480">
</iframe>
<iframe id="myIfreme2" src="" frameborder="0" marginwidth="0" height="500" width="840">
</iframe>
</body>
</html>
If you don't want the user to enter http:// you can do:
...
<form>
Enter URL: http://
<input type="text" id="txtSRC" />
...
and
function SetSrc()
{
document.getElementById("myIfreme1").src = 'http://' + document.getElementById("txtSRC").value;
document.getElementById("myIfreme2").src = 'http://' + document.getElementById("txtSRC").value;
}
BTW, Google will block you from using www.google.com in an iframe.