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.
Related
I do not write bootstrap code but some how i manage to do it now but form does not looks good. two issue is there. How to fix my issue. thanks
1) buttons are not properly aligned.
2) how to create gap between two buttons.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-2 form-group">
<label for="textbox1">Phone No</label>
<input class="form-control" id="textbox1" type="text" />
</div>
<div class="col-md-2 form-group">
<label for="textbox2">Post Code</label>
<input class="form-control" id="textbox2" type="text" />
</div>
<span class="clearfix"></span>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-primary" value="Reset">Reset</button>
</div>
</div>
</form>
here is the code for you:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.m{
margin:10px;
}
</style>
</head>
<body style="background-color: green">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-2 form-group">
<label for="textbox1">Phone No</label>
<input class="form-control" id="textbox1" type="text" />
</div>
<div class="col-md-2 form-group">
<label for="textbox2">Post Code</label>
<input class="form-control" id="textbox2" type="text" />
</div>
<span class="clearfix"></span>
<button type="submit" class="btn btn-primary m">Submit</button>
<button type="reset" class="btn btn-primary m" value="Reset">Reset</button>
</div>
</div>
</form> </body>
</html>
check this out fiddle: https://jsfiddle.net/sh8k20xx/
Forgive me if this question is basic - I'm new to code!! I am running into problems formatting my bootstrap from. Right now, the form overlaps header. What can I do to fix this? I've tried using a bootstrap form as well as a simple one, as illustrated in my code below. But it keeps messing with the format! I'd appreciate any help... thanks in advance!
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href=styles/main.css>
<title>grab.</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<style>
nav {
width: 100%;
padding: 80px;
}
body { padding-top: 70px;
padding-bottom: 70px
}
form {
position: fixed;
top: 230px;
left: 800px;
width: 100px;
height: 100px;
}
</style>
<div class=container>
<!-- Second navbar for sign in -->
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="images/grab.jpg" width="100" height="100" class="d-inline-block align-top" alt="logo">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav navbar-right">
<li><a href="about.html" style="display:inline" >About Us</a></li>
<li><a href="faq.html" style="display:inline" >FAQ</a></li>
<li>
<a class="btn btn-warning btn-outline btn-circle collapsed" style="display:inline" data-toggle="collapse" href="#nav-collapse2" aria-expanded="false" aria-controls="nav-collapse1">Sign Up</a>
<a class="btn btn-warning btn-outline btn-circle collapsed" style="display:inline" data-toggle="collapse" href="#nav-collapse2" aria-expanded="false" aria-controls="nav-collapse2">Log In</a>
</li>
</ul>
<div class="collapse nav navbar-nav nav-collapse slide-down" id="nav-collapse1">
<form class="navbar-form navbar-right form-inline" role="form">
<div class="form-group">
<div class="form-group">
<label class="sr-only" for="Username">Username</label>
<input type="username" class="form-control" id="Username" placeholder="Username" required />
</div>
<label class="sr-only" for="Email">Email</label>
<input type="email" class="form-control" id="Email" placeholder="Email" autofocus required />
</div>
<div class="form-group">
<label class="sr-only" for="Password">Password</label>
<input type="password" class="form-control" id="Password" placeholder="Password" required />
</div>
<button type="submit" class="btn btn-warning">Submit</button>
</form>
</div>
</div><!-- /.navbar-collapse -->
<div class="collapse nav navbar-nav nav-collapse slide-down" id="nav-collapse2">
<form class="navbar-form navbar-right form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="Username">Username</label>
<input type="username" class="form-control" id="Username" placeholder="Username" />
</div>
<div class="form-group">
<label class="sr-only" for="Password">Password</label>
<input type="password" class="form-control" id="Password" placeholder="Password" required />
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-warning">Submit</button>
</form>
</div>
</div><!-- /.navbar-collapse -->
</nav><!-- /.navbar -->
</div>
</head>
<body>
<div class="container">
<h1>Futurama Character Bio</h1>
<form action="processing-page.php" method="POST" enctype='multipart/form-data'>
File: <input type='file' name='profilepic' />
<label for="characterName">Character Name</label>
<input type="text" name="character" id="characterName" />
<br>
<label for="genderM">Male</label>
<input type="radio" name="gender" id="genderM" value="Male"/>
<label for="genderF">Female</label>
<input type="radio" name="gender" id="genderF" value="Female"/>
<label for="genderX">X</label>
<input type="radio" name="gender" id="genderX" value="X"/>
<label for="genderZ">zhe</label>
<input type="radio" name="gender" id="genderZ" value="zhe"/>
<br>
<label for="morals">Morals</label>
<input type="checkbox" name="morals" id="morals"/>
<br>
<textarea name="bio" rows="10" cols="20"></textarea>
<br>
<select name="planet">
<option value="1">Earth</option>
<option value="2">Gorgolon</option>
<option value="3+">Mars</option>
</select>
<input type="submit" name="submit" />
</form>
</body>
</div><!-- content container -->
</body>
</html>
position: fixed;
That's your issue under
form {
position: fixed;
top: 230px;
left: 800px;
width: 100px;
height: 100px;
}
I got a issue with my view, that I can't solve.
My view has 6 forms but when I do the main submit a entire form has null values and a inputText in another form has null too, that's my view:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
<h:head>
<title>Novo Cliente</title>
</h:head>
<h:body>
<ui:composition template="templateAdmin.xhtml">
<ui:define name="conteudoAdmin">
<!-- inicio conteudo de novo cliente -->
<div class="row mt">
<div class="col-lg-12">
<div class="form-panel">
<h4 class="mb"><i class="fa fa-angle-right"></i> Novo Cliente</h4>
<h:form class="form-horizontal style-form" id="tipoCliente">
<th></th>
<h:commandButton class="btn btn-primary" value="Pessoa Física" action="#{clienteController.pessoaFisica()}" />
<p:spacer width="75" height="10" />
<h:commandButton class="btn btn-success" value="Pessoa Jurídica" action="#{clienteController.pessoaJuridica()}" />
<br></br>
<br></br>
<br></br>
</h:form>
<h:form class="form-horizontal style-form" id="buscaCliente" >
<!--inicio condicao CPF CNPJ-->
<div class="form-group">
<h:outputLabel class="col-sm-2 col-sm-2 control-label" value="CPF" for="cpf" rendered="#{clienteController.cliente.tipoPessoa == 0}" />
<h:outputLabel class="col-sm-2 col-sm-2 control-label" value="CNPJ" for="cnpj" rendered="#{clienteController.cliente.tipoPessoa == 1}" />
<div class="col-sm-10">
<p:inputMask mask="999.999.999-99" id="cpf"
value="#{clienteController.cliente.identificacao}"
rendered="#{clienteController.cliente.tipoPessoa == 0}"
/>
<p:inputMask mask=" 99.999.999/9999-99" id="cnpj"
value="#{clienteController.cliente.identificacao}"
rendered="#{clienteController.cliente.tipoPessoa == 1}"
/>
<p:spacer width="55" height="10" />
<h:commandButton id="verifcarCliente" value="Verificar Cliente"
actionListener="#{clienteController.buscaClienteCPFCNPJ()}" >
</h:commandButton>
</div>
</div>
</h:form>
<h:form class="form-horizontal style-form" id="dadosCliente" rendered="#{clienteController.existeCliente == false}" >
<div class="form-group">
<h:outputLabel value="Razão Social" class="col-sm-2 col-sm-2 control-label" />
<div class="col-sm-10">
<h:inputText value="#{clienteController.cliente.nomeFantasia}" class="form-control" />
</div>
</div>
<div class="form-group">
<h:outputLabel value="Nome" class="col-sm-2 col-sm-2 control-label" />
<div class="col-sm-10">
<h:inputText value="#{clienteController.cliente.nome}" class="form-control" />
</div>
</div>
<div class="form-group">
<h:outputLabel for="mask" value="Data de Nascimento" class="col-sm-2 col-sm-2 control-label" />
<div class="col-sm-10">
<p:inputMask mask="99/99/9999" id="dataNasc"
value="#{clienteController.dataNascimento}" />
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-2 col-sm-2 control-label" value="Telefone" for="tel" />
<div class="col-sm-10">
<p:inputMask mask="(99)9999-9999" id="tel"
value="#{clienteController.cliente.telefone}"/>
</div>
</div>
<div class="form-group">
<h:outputLabel value="E-mail" class="col-sm-2 col-sm-2 control-label" />
<div class="col-sm-10">
<h:inputText id="email" value="#{clienteController.cliente.email}" class="form-control" required="true"
pt:placeholder="ex: email#dominio.com"
validatorMessage="Endereço de email inválido.">
<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]#[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
</h:inputText>
<h:message for="email" />
</div>
</div>
<div class="form-group">
<h:outputLabel value="Site" class="col-sm-2 col-sm-2 control-label" />
<div class="col-sm-10">
<h:inputText id="site" value="#{clienteController.cliente.site}" class="form-control"
validatorMessage="Endereço de site inválido.">
<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_].[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
</h:inputText>
<h:message for="site" />
</div>
</div>
</h:form>
<h:form class="form-horizontal style-form" id="novoClienteCEP" rendered="#{clienteController.existeCliente == false}">
<div class="form-group">
<h:outputLabel class="col-sm-2 col-sm-2 control-label" value="CEP" for="cep" />
<div class="col-sm-10">
<h:inputText id="cep" value="#{clienteController.cep}"
pt:placeholder="Somente Números" maxlength="8" required="true"
validatorMessage="Digite somente os Números">
<f:validateRegex pattern="[0-9]+" />
<f:validateLength minimum="8" maximum="8" />
</h:inputText>
<p:spacer width="55" height="10" />
<h:commandButton id="Buscar_Dados" value="Buscar Dados"
actionListener="#{clienteController.buscarDadosCEP}" >
<f:ajax execute="#form" render="novoClienteCEPDados"/>
</h:commandButton>
</div>
</div>
</h:form>
<!--inicio autopreenchimento de endereço-->
<h:form class="form-horizontal style-form" id="novoClienteCEPDados" rendered="#{clienteController.existeCliente == false}">
<ui:repeat value="#{clienteController.enderecos}" var="dadosEndereco" >
<h:column >
<div class="form-group">
<h:outputLabel value="Logradouro" class="col-sm-2 col-sm-2 control-label" />
<div class="col-sm-10">
<h:inputText value="#{dadosEndereco.tipoEndereco} #{dadosEndereco.logradouro}"
class="form-control" disabled="true" />
</div>
</div>
<div class="form-group">
<h:outputLabel value="Número" class="col-sm-2 col-sm-2 control-label" />
<div class="col-sm-10">
<h:inputText value="#{clienteController.numero}" class="form-control" disabled="false"
pt:placeholder="Somente Números" required="true"
validatorMessage="Digite somente os Números">
<f:validateLength minimum="1" />
</h:inputText>
</div>
</div>
<div class="form-group">
<h:outputLabel value="Bairro" class="col-sm-2 col-sm-2 control-label" />
<div class="col-sm-10">
<h:inputText value="#{dadosEndereco.bairro}" class="form-control" disabled="true" />
</div>
</div>
<div class="form-group">
<h:outputLabel value="Cidade" class="col-sm-2 col-sm-2 control-label" />
<div class="col-sm-10">
<h:inputText value="#{dadosEndereco.cidade}" class="form-control" disabled="true" />
</div>
</div>
<div class="form-group">
<h:outputLabel value="Estado" class="col-sm-2 col-sm-2 control-label" />
<div class="col-sm-10">
<h:inputText value="#{dadosEndereco.UF}" class="form-control" disabled="true" />
</div>
</div>
</h:column>
</ui:repeat>
</h:form>
<h:form class="form-horizontal style-form" id="novoClienteSalvar" rendered="#{clienteController.existeCliente == false}">
<!--fim auto preenchimeto endereco-->
<h:commandButton id="Salvar" value="Salvar" action="#{clienteController.salvar}" >
<f:ajax execute="#all" render="#all"/>
</h:commandButton>
<p:spacer width="95" height="10" />
<h:commandButton value="Cancelar" type="reset"/> <p:spacer width="25" height="10" />
</h:form>
</div>
</div>
</div>
<!-- fim conteudo de novo cliente -->
</ui:define>
</ui:composition>
</h:body>
The form dadosCliente and this inputText is null
<div class="form-group">
<h:outputLabel value="Número" class="col-sm-2 col-sm-2 control-label" />
<div class="col-sm-10">
<h:inputText value="#{clienteController.numero}" class="form-control" disabled="false"
pt:placeholder="Somente Números" required="true"
validatorMessage="Digite somente os Números">
<f:validateLength minimum="1" />
</h:inputText>
</div>
</div>
All other forms are correct, if I nest some forms It works, but I read that's not a good thing to do.
Anyone??
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;
?>
Hi I have two forms on a page, one is a small newsletter sign up form and the other is a larger event booking form. when the large booking form is submitted it submits the small newsletter form aswell. think it has something to do with the action url.
Here is the page code:
<script type="text/javascript"><!--
function validate(f){
var regex = /^\s*$/i;
for(var i=0; i<f.elements.length; i++){
if(regex.test(f.elements[i].value)){
alert("Please fill in all fields.");
f.elements[i].focus();
return false;
}
}
if(f.user_email.value.indexOf('#',0)==-1 || f.user_email.value.indexOf('.',0)==-1)
{
alert("You must provide a VALID email address.");
f.user_email.focus();
return false;
}
return true;
}
//--></script>
<div id="eventform" />
<form action="/Booking?ename=testevent&edate=19%20October%202011&submitform=yes" method="post" onsubmit='return validate(this);'>
<fieldset class="fieldset">
<div class="leftform">
<label for="booking_name">Event: </label><br class="nobr" />
<input name="booking_name" type="text" id="booking_name" value="testevent" />
</div>
<div class="rightform">
<label for="event_date">Date: </label><br class="nobr" />
<input name="event_date" type="text" id="event_date" value="19 October 2011" />
</div>
<div class="clear"></div>
<div class="leftform">
<label for="user_name">Name: </label><br class="nobr" />
<input name="user_name" type="text" id="user_name" />
</div>
<div class="rightform">
<label for="organisation">Organisation: </label><br class="nobr" />
<input name="organisation" type="text" id="organisation" />
</div>
<div class="clear"></div>
<div class="leftform">
<label for="address">Address: </label><br class="nobr" />
<input name="address" type="text" id="address" />
</div>
<div class="rightform">
<label for="postcode">Postcode: </label><br class="nobr" />
<input name="postcode" type="text" id="postcode" />
</div>
<div class="clear"></div>
<div class="leftform">
<label for="user_telephone">Contact Number: </label><br class="nobr" />
<input name="user_telephone" type="text" id="user_telephone" />
</div>
<div class="rightform">
<label for="user_email">Email Contact: </label><br class="nobr" />
<input name="user_email" type="text" id="user_email" />
</div>
<div class="clear"></div>
<br />
<hr />
<h3>Attendees</h3>
<p>Please list the name(s) and email address(s) of those you wish to book a place at the above event.</p>
<div class="leftform">
<input placeholder="Name" name="attendee1" type="text" id="attendee1" />
</div>
<div class="rightform">
<input placeholder="Email Address" name="attendee_email1" type="text" id="attendee_email1" />
</div>
<div class="clear"></div>
<div class="leftform">
<input placeholder="Name" name="attendee2" type="text" id="attendee2" />
</div>
<div class="rightform">
<input placeholder="Email Address" name="attendee_email2" type="text" id="attendee_email2" />
</div>
<div class="clear"></div>
<div class="leftform">
<input placeholder="Name" name="attendee3" type="text" id="attendee3" />
</div>
<div class="rightform">
<input placeholder="Email Address" name="attendee_email3" type="text" id="attendee_email3" />
</div>
<div class="clear"></div>
<div class="leftform">
<input placeholder="Name" name="attendee4" type="text" id="attendee4" />
</div>
<div class="rightform">
<input placeholder="Email Address" name="attendee_email4" type="text" id="attendee_email4" />
</div>
<div class="clear"></div>
<div class="leftform">
<input placeholder="Name" name="attendee5" type="text" id="attendee5" />
</div>
<div class="rightform">
<input placeholder="Email Address" name="attendee_email5" type="text" id="attendee_email5" />
</div>
<div class="clear"></div>
<br />
<hr />
<h3>Invoice Details</h3>
<p>Please give details of where the invoice should be sent.</p>
<label for="invoice_name">Name: </label><br class="nobr" />
<input name="invoice_name" type="text" id="invoice_name" /><br />
<label for="invoice_address">Address: </label><br class="nobr" />
<input name="invoice_address" type="text" id="invoice_address" /><br />
<label for="invoice_postcode">Postcode: </label><br class="nobr" />
<input name="invoice_postcode" type="text" id="invoice_postcode" /><br />
<p>Once we have received your booking form the person booking and those attending will receive a confirmation email confirming your places at the event and an invoice will be issued.
If you have any questions please do not hesitate to contact.</p>
</fieldset>
<br />
<input id="bookingform_submit" class="submitform" type="submit" value="Submit" />
<br /><br />
</form>
</div>
</div>
</div>
<div class="clear"></div>
</div></div>
<!--/content-->
<!--footer-->
<div id="outer-footer">
<div id="footer">
<div class="footer-1">
<h6>Get in touch...</h6>
<ul>
<li>Suite 124-128 Baltic Chambers,50 Wellington Street Glasgow G2 6HJ.</li>
<li><span>Tel:</span> 0141 248 1242</li>
<li><span>Fax:</span> 0141 221 1911</li>
<li><span>Email Us:</span>info#tis.org.uk </li>
</ul>
</div>
<div class="footer-2">
<h6>Join our newsletter...</h6>
<ul>
<li>Hear about the latest event and courses.</li>
<script type="text/javascript"><!--
function validate(f){
var regex = /^\s*$/i;
for(var i=0; i<f.elements.length; i++){
if(regex.test(f.elements[i].value)){
alert("Please fill in all fields.");
f.elements[i].focus();
return false;
}
}
if(f.user_email.value.indexOf('#',0)==-1 || f.user_email.value.indexOf('.',0)==-1)
{
alert("You must provide a VALID email address.");
f.user_email.focus();
return false;
}
return true;
}
//--></script>
<li>
<form action="./&submitform=yes" method="post">
<span class="input_space">
<input name="user_name" id="user_name" type="text" align="left" onblur="if(this.value=='')this.value='Your Name';"
onfocus="if(this.value=='Your Name')this.value='';" value="Your Name" />
</span>
<span>
<input name="user_email" id="user_email" type="text" align="left" onblur="if(this.value=='')this.value='Your Email Address';"
onfocus="if(this.value=='Your Email Address')this.value='';" value="Your Email Address" />
</span>
<input id="newsletterform_submit" type="submit" value="" class="submit-2" />
</form>
I dont think it is submitting the form twice, i think that the variable "submitform" = yes is being set by both, so when you click through to the large form it thinks that form 2 has been submitted also - but in reality it hasn't... you probably want to check that the form has really been submitted using the $_POST variables.