Input form and changing form PHP MySQL - javascript

I have made a database and a php to insert new information to the database. When I add some new information, everything works well, but when I want to change these information and update these, my input form look really different. This is my code for adding new information
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Klanten invoeren</title>
</head>
<body>
<form action="SEDDopslaan.php" method="post">
<p>
Reisnummer: <br>
<input name="reisnummer" type="text" size="30" tabindex="1">
</p>
<p>
Land: <br>
<select name="land">
<option value="Nederland">Nederland
<Option value="Duitsland">Duitsland
<Option value="Frankrijk">Frankrijk
<Option value="Belgie">Belgie
</select>
</p>
<p>
Plaats: <br>
<input name="plaats" type="text" size="30" tabindex="3">
</p>
<p>
Vertrekdatum: <br>
<input name="vertrekdatum" type="date" size="30" tabindex="4">
</p>
<p>
Retourdatum: <br>
<input name="retourdatum" type="date" size="30" tabindex="5">
</p>
<p>
Aantalpersonen: <br>
<input name="aantalpersonen" type="text" size="30" tabindex="2">
</p>
<p>
Prijs: <br>
<input name="prijs" type="text" size="30" tabindex="2">
</p>
<p>
Betaling voltooid: <br>
<input name="betalingvoltooid" type="checkbox" value="Ja" size="30" tabindex="2">Ja
<input name="betalingvoltooid" type="checkbox" value="Nee" size="30" tabindex="2">Nee
</p>
<p>
<input type="submit" name="submit" value="Verstuur" title="Verstuur dit formulier" tabindex="6">
</p>
</form>
</body>
</html>
And this is my code for changing information
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Klant wijzigen</title>
</head>
<body>
<?php
// Maken van verbinding
try {
$db = new PDO('mysql:host=localhost;dbname=Reisbureau','root','');
}
catch(PDOException $e) {
echo $e->getMessage();
}
// De SQL opdracht
// Hier wordt de klant geselecteerd om de gegevens op
// te halen die je wilt wijzigen. Het klantnummer zit
// in $_POST[verstopt]
$sql = "SELECT * FROM boeking WHERE reisnummer = $_POST[verstopt]";
$resultaat = $db->query($sql);
// De klantgegevens worden in variabelen gestopt zodat
// we ze in het formulier kunnen zien
foreach($resultaat as $row) {
$reisnummer = $row['reisnummer'];
$land = $row['land'];
$plaats = $row['plaats'];
$vertrekdatum = $row['vertrekdatum'];
$retourdatum = $row['retourdatum'];
$aantalpersonen = $row['aantalpersonen'];
$prijs = $row['prijs'];
$betalingvoltooid = $row['betalingvoltooid'];
}
// Sluiten van verbinding
$db = NULL;
echo "<form action='SEDDwijzigdefinitief.php'method='post'>
<p>Reisnummer: <br>
<input name='reisnummer' type='text' size='30'value=$reisnummer tabindex='1'>
</p>
<p>Land: <br>
<input name='land' type='text' size='30' value=$land tabindex='2'>
</p>
<p>Plaats: <br>
<input name='plaats' type='text' size='30' value=$plaats tabindex='3'>
</p>
<p>vertrekdatum: <br>
<input name='vertrekdatum' type='date' size='30'value=$vertrekdatum tabindex='4'>
</p>
<p>Retourdatum: <br>
<input name='retourdatum' type='date' size='30'value=$retourdatum tabindex='5'>
</p>
<p>Aantalpersonen: <br>
<input name='aantalpersonen' type='text' size='30'value=$aantalpersonen tabindex='5'>
</p>
<p>Prijs: <br>
<input name='prijs' type='text' size='30'value=$prijs tabindex='5'>
</p>
<p>Betalingvoltooid: <br>
<input name='betalingvoltooid' type='text' size='30'value=$betalingvoltooid tabindex='5'>
</p>
<p><input type='submit' name='submit'value='Verstuur' title='Verstuur dit formulier' tabindex='6'>
</p>
</form>"
?>
</body>
</html>
I would like to have exactly the same form in "Add information" as in "Change information"

Your code echo's your variables! You need to write like this:
echo "<input name='prijs' type='text' size='30'value='" . $prijs ."' tabindex='5'>";
So your code will echo the data from your database and not the $prijs plain as a string!
Hope this will help <3
Bonus:
If your $_POST[verstopt] should be a string then use single quotes '' in your query!
To pretend MySQL Injection, you could write your query like this:
$verstopt = mysqli_real_escape_string($db, $_POST[verstopt]);
$sql = "SELECT * FROM boeking WHERE reisnummer = $verstopt";
Change Checkbox value
You could use Javascript to change the value and then you post trough your <form> the input wehre the value is written in. Change the style from your input to style='display:none;' so that the user only can see the checkbox and not the input one which is gonna be used to send to your mysql query.
function test(){
var Result = document.getElementById("checkbox").checked;
document.getElementById('ResultCheckbox').value = Result;
}
<input type="checkbox" id="checkbox" onclick="test();">
<input name="checkboxAnswer" id="ResultCheckbox" value="no">

Have you tried using delevoper tools of your browser to watch the HTML code?
Also, have you tried using quotes to enter your PHP variables?
Something like:
<input name='reisnummer' type='text' size='30' value='".$reisnummer."' tabindex='1'>
What do you mean with form looking "different"?

Related

Display form info on alert (html and javascript)

I currently have a form in which a user can put his name, age and the message and then I have a button to submit the message and it is supposed to show an alert with the form information but when I put the information and click the button nothing is happening (the alert doesn't show). Here is the html form and javascript function code:
<form action="#" method="get">
<fieldset>
<legend>Informações do utilizador</legend>
<label for="nome">Nome:</label>
<input id="nome" name="nome" type="text" />
<br />
<label for="idade">Idade:</label>
<select id="idade" name="idade">
<option value="menor"><18</option>
<option value="jovem">18-21</option>
<option value="jovemadulto">22-29</option>
<option value="adulto">30-39</option>
<option value="adultoavancado">40-49</option>
<option value="idoso">>=50</option>
</select>
</fieldset>
<fieldset>
<legend>Ideias para tornar um campus mais sustentável</legend>
<label for="mensagem">Mensagem:</label><br />
<textarea id="mensagem" name="mensagem" rows="10" cols="50" placeholder="Introduza a sua ideia">
</textarea>
<br />
<input id="enviar" name="enviar" type="submit" onClick="submitForm()" value="Enviar">
<script>
function submitForm() {
var n = document.getElementById('nome').value;
var i = document.getElementById('idade').value;
var m = document.getElementById('mensagem').value;
alert("Nome: "+s+"\n Idade: "+i+"\n Mensagem: "+m);
}
</script>
<input id="limpar" name="limpar" type="reset" value="Limpar" />
</fieldset>
</form>
the correct way to do that...
const myForm = document.querySelector('#my-form') // use the form parent
// to refer each form elements
// think about how to write your code:
// easier to read again = less typing errors
myForm.onsubmit = evt =>
{
alert( 'Nome: ' + myForm.nome.value // access each element by his name
+ '\n Idade: ' + myForm.idade.value
+ '\n Mensagem: ' + myForm.mensagem.value
);
evt.preventDefault(); // for testing without page relaod
}
<form action="#" method="get" id="my-form"> <!-- have an id (or a name) here -->
<fieldset>
<legend>Informações do utilizador</legend>
<label for="nome">Nome:</label>
<input id="nome" name="nome" type="text" />
<br />
<label for="idade">Idade:</label>
<select id="idade" name="idade">
<option value="menor"><18</option>
<option value="jovem">18-21</option>
<option value="jovemadulto">22-29</option>
<option value="adulto">30-39</option>
<option value="adultoavancado">40-49</option>
<option value="idoso">>=50</option>
</select>
</fieldset>
<fieldset>
<legend>Ideias para tornar um campus mais sustentável</legend>
<label for="mensagem">Mensagem:</label><br />
<textarea id="mensagem" name="mensagem"
rows="10" cols="50" placeholder="Introduza a sua ideia"></textarea>
<br>
<button type="submit"> Enviar </button>
<button type="reset"> Limpar </button>
</fieldset>
</form>

Disable form button and field with Javascript

I need to disable some filed and button in a form. The form shows user data and the button "Modifica" allow the user to modify field (username, mail, password). If user is worker can modify also exp and photo field. If user is manager this field are hidden.
I wrote some javascript in order to hide and disable fields but the button "modifica" seems to be blocked and I don't know why.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" type="text/css" media="all" href="../CSS/style.css" th:href="#{.../CSS/style.css}"/>
<script type="text/javascript" src="../js/updateProfile.js" th:src="#{/js/updateProfile.js}" defer> </script>
<script type="text/javascript" th:src="#{/js/loadimage.js}" defer ></script> <!--defer fa eseguire js dopo il parsing di html-->
</head>
<body>
<div class="container">
<div th:replace="header :: header"></div>
<h1>Profilo Utente</h1>
<div class="form">
<form action="updateprofile" method="post" enctype="multipart/form-data">
<p>
<label for="username">Username: </label><br>
<input type="text" id="username" name="username" th:attr="value=${session.user.username}" required/><br>
</p>
<p>
<label for="email">Mail: </label><br>
<input type="email" id="email" name="email" th:attr="value=${session.user.email}" required/><br>
</p>
<p>
<label for="password">Password: </label><br>
<input type="password" id="password" name="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Deve contenere almeno 8 caratteri di cui un numero, una lettera maiuscola e una lettera minuscola." /><br>
</p>
<div id="password-confirm-block">
<p>
<label id="text-password-confirm" for="password-confirm">Reinserisci password: </label><br>
<input type="password" id="password-confirm" />
</p>
<p id="password-message" class="error-message"></p>
</div>
<p>
Tipo di utente:<br>
<input type="radio" name="usertype" id="manager" value="manager" th:checked="${session.user.isManager!=null && session.user.isManager}" required/>
<label for="manager">Manager</label><br>
<input type="radio" name="usertype" id="worker" value="worker" th:checked="${session.user.isManager!= null && !session.user.isManager}" checked required/>
<label for="worker">Worker</label><br>
</p>
<div id="worker-data">
<p>
<label for="exp">Exp level:</label><br>
<select name="exp" id="exp">
<option value="" disabled selected>Exp level</option>
<option value="LOW" th:selected="${session.user.exp == 'LOW'}">LOW</option>
<option value="MEDIUM" th:selected="${session.user.exp == 'MEDIUM'}">MEDIUM</option>
<option value="HIGH" th:selected="${session.user.exp == 'HIGH'}">HIGH</option>
</select><br>
</p>
<p>
<label for="photo">Profile photo</label><br>
<div id="container"style="position: relative; width:300px;">
<canvas id="canvas_background" width="300px" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
</div>
<input type="file" name="photo" id="photo" accept="image/*"/><br>
</div>
<!-- TODO: Rivedere i messaggi di errore inseriti -->
<span class="error-message" th:if="${session.signupfailed}">Salvataggio non riuscito</span>
<p>
<input id="buttonModifica" type="button" value="Modifica" />
<input id="buttonAnnulla" type="reset" value="Annulla" />
<input id="buttonAggiorna" type="submit" value="Aggiorna" />
</p>
</form>
</div>
</div>
</body>
</html>
Javascript:
var username = document.getElementById("username");
var email = document.getElementById("email");
var password = document.getElementById("password");
var passwordConfirmBlock = document.getElementById("password-confirm-block");
var radioWorker = document.getElementById("worker");
var radioManager = document.getElementById("manager");
var exp = document.getElementById("exp");
var photo = document.getElementById("photo");
var buttonModifica = document.getElementById("buttonModifica");
var buttonAnnulla = document.getElementById("buttonAnnulla");
var buttonAggiorna = document.getElementById("buttonAggiorna");
function init() {
view();
buttonModifica.addEventListener("click", modify, true);
buttonAnnulla.addEventListener("click", view, true);
}
init();
function modify() {
unlockImputs();
buttonAnnulla.hidden=false;
buttonAggiorna.hidden=false;
buttonModifica.hidden=true;
}
function view() {
lockImputs();
buttonAnnulla.hidden=true;
buttonAggiorna.hidden=true;
buttonModifica.hidden=false;
}
function lockImputs (){
username.readOnly=true;
email.readOnly=true;
password.readOnly=true;
passwordConfirmBlock.hidden=true;
radioManager.disabled=true;
radioWorker.disabled=true;
exp.disabled=true;
photo.disabled=true;
}
function unlockImputs (){
username.readOnly=false;
email.readOnly=false;
password.readOnly=false;
radioManager.disabled=false;
radioWorker.disabled=false;
exp.disabled=false;
photo.disabled=false;
}
If you need to disable the button "Modifica", You can just set "disabled" to true for this button's id:
document.getElementById("buttonModifica").disabled = true;
You can get that HTML_DOM with document object then you can apply event listener on it.
Then get another id to which you want to disable and apply disable property into it
For reference :
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/disabled

How to make an html dropdown work with PHP post?

I just modified my php file switching from a text box from one of my fields to a dropdown list and it no longer returns the "sexo" field in the output. Can someone tell me why this is? All I did was switch from a text box to a list.
It won't return all of the results it will only return the values from all columns except the sexo column which should be either Masculino or Femenino
The error I'm guessing has to be in the form or in the POST variable for "sexo"
<?php
include_once 'includes/db_connect.php';
include_once 'includes/functions.php';
sec_session_start();
if(!isset($_SESSION['username'])) {
header("Location: index.php");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<link rel="stylesheet" href="datepicker.css" type="text/css" />
<link rel="stylesheet" href="demo.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="datepicker.js"></script>
<script type="text/javascript" src="ValidarDatos.js"></script>
<title>Consulta niño Coprodeli Intranet</title>
</head>
<body>
<div id="content">
<div id="logo"> <img src="images/logo.jpg" /> </div>
<ul id="menu">
<li>Home</li>
<li>Niños</li>
<li>Padrinos</li>
<li>Centros</li>
<li>Informes</li>
<li>Usuarios</li>
<li>Salir</li>
</ul>
<div id="intro2">
<h1>Intranet Coprodeli</h1>
<p>Apadrinamiento y Programa<br />
de Niños en Alto Riesgo</p>
<div id="login">
</div>
</div>
<div id="right2">
<h4 class="migas">Estás en: Inicio | Consulta de niños</h4>
<br />
<?php
$output = NULL;
if(isset($_POST['submit'])){
// Connect to the database
$mysqli = NEW MySQLi("localhost","root","","coprodeli");
$nino_id = $mysqli->real_escape_string( $_POST['nino_id']);
$nombre = $mysqli->real_escape_string( $_POST['nombre']);
$apellidos = $mysqli->real_escape_string( $_POST['apellidos']);
$sexo = $mysqli->real_escape_string( $_POST['sexo']);
$estado = $mysqli->real_escape_string( $_POST['estado']);
$fecha_de_nacimiento_desde = $mysqli->real_escape_string( $_POST['fecha_de_nacimiento_desde']);
$fecha_de_nacimiento_hasta = $mysqli->real_escape_string( $_POST['fecha_de_nacimiento_hasta']);
$tipo_de_centro = $mysqli->real_escape_string( $_POST['tipo_de_centro']);
$nombre_del_centro = $mysqli->real_escape_string( $_POST['nombre_del_centro']);
$region_del_centro = $mysqli->real_escape_string( $_POST['region_del_centro']);
$nivel_de_estudio = $mysqli->real_escape_string( $_POST['nivel_de_estudio']);
$entrada_desde = $mysqli->real_escape_string( $_POST['entrada_desde']);
$entrada_hasta = $mysqli->real_escape_string( $_POST['entrada_hasta']);
$egreso_desde = $mysqli->real_escape_string( $_POST['egreso_desde']);
$egreso_hasta = $mysqli->real_escape_string( $_POST['egreso_hasta']);
//Query the database
$resultSet = $mysqli->query("SELECT nino_id, nombre, apellidos, sexo, estado, fecha_de_nacimiento_desde, fecha_de_nacimiento_hasta,
tipo_de_centro, nombre_del_centro, region_del_centro, nivel_de_estudio, entrada_desde, entrada_hasta, egreso_desde, egreso_hasta FROM nino
WHERE nino_id = '$nino_id' AND nombre = '$nombre' AND apellidos = '$apellidos' AND sexo = '$sexo' AND estado = '$estado' AND fecha_de_nacimiento_desde = '$fecha_de_nacimiento_desde'
AND fecha_de_nacimiento_hasta = '$fecha_de_nacimiento_hasta' AND tipo_de_centro = '$tipo_de_centro' AND nombre_del_centro = '$nombre_del_centro' AND
region_del_centro = '$region_del_centro' AND nivel_de_estudio = '$nivel_de_estudio' AND entrada_desde = '$entrada_desde' AND entrada_hasta = '$entrada_hasta'
AND egreso_desde = '$egreso_desde' AND egreso_hasta = '$egreso_hasta';" ) ;
// Edited on 9/7/2015 12:39PM by Anthony Sawah. I changed it from " if($resultSet['num_rows'] > 0) { " to " if($resultSet->num_rows > 0) {"
if($resultSet->num_rows > 0) {
while($rows = $resultSet->fetch_assoc())
{
$nino_id = $rows['nino_id'];
$nombre = $rows['nombre'];
$apellidos = $rows['apellidos'];
$sexo = $rows['sexo'];
$estado = $rows['estado'];
$fecha_de_nacimiento_desde = $rows['fecha_de_nacimiento_desde'];
$fecha_de_nacimiento_hasta = $rows['fecha_de_nacimiento_hasta'];
$tipo_de_centro = $rows['tipo_de_centro'];
$nombre_del_centro = $rows['nombre_del_centro'];
$region_del_centro = $rows['region_del_centro'];
$nivel_de_estudio = $rows['nivel_de_estudio'];
$entrada_desde = $rows['entrada_desde'];
$entrada_hasta = $rows['entrada_hasta'];
$egreso_desde = $rows['egreso_desde'];
$egreso_hasta = $rows['egreso_hasta'];
$output .= "<tr><td>".$estado."</td><td>".$nino_id."</td><td>".$apellidos."</td><td>".$nombre."</td><td>".$egreso_desde."</td><td>".$egreso_hasta."</td>";
}
}else{
$output = "No results";
}
}
?>
<fieldset class="required">
<legend>Consulta de niños:</legend>
<form method ="POST">
<p>ID niño: <input type="text" name="nino_id" />
<br> </br>
Nombre: <input type="text" name="nombre" />
<br> </br>
Apellidos: <input type="text" name="apellidos" /> <br> </br>
Sexo:
<select name="sexo">
<option value=""> Select...</option>
<option value="Masculino">Masculino</option>
<option value="Femenino">Femenino</option>
</select>
<br>
</br>
Estado: <input type="text" name="estado" /> <br> </br>
Fecha de
nacimiento desde
(DD-MM-YYYY): <input type="text" name="fecha_de_nacimiento_desde" /> <br> </br>
Fecha de
nacimiento hasta
(DD-MM-YYYY): <input type="text" name="fecha_de_nacimiento_hasta" /> <br> </br>
Tipo de centro: <input type="text" name="tipo_de_centro" /> <br> </br>
Nombre Del Centro: <input type="text" name="nombre_del_centro" /> <br> </br>
Región del Centro: <input type="text" name="region_del_centro" /> <br> </br>
Nivel de estudio: <input type="text" name="nivel_de_estudio" /> <br> </br>
Entrada desde
(DD-MM-YYYY): <input type="text" name="entrada_desde" /> <br> </br>
Entrada hasta
(DD-MM-YYYY): <input type="text" name="entrada_hasta" /> <br> </br>
Egreso desde
(DD-MM-YYYY): <input type="text" name="egreso_desde" /> <br> </br>
Egreso hasta
(DD-MM-YYYY): <input type="text" name="egreso_hasta" /> <br> </br>
<input type="submit" name="submit" value="Search" />
</p>
</form>
</fieldset>
<fieldset id="" class="required">
<legend>Resultado de la búsqueda:</legend>
<form id="form7" name="ResultadoBusqueda" action="ConsultarDetalleNino.php" enctype="multipart/form-data" method="post" >
<table>
<tr>
<td class="especial" width="11"></td>
<td colspan="6" class="especial"> </td>
</tr>
<tr>
<th></th>
<th width="15"></th>
<th width="88">Estado</th>
<th width="104">ID ninos </th>
<th width="234">Apellidos</th>
<th width="81">Nombre</th>
<th width="128">Fecha Ingreso</th>
<th width="106">Fecha Egreso</th>
</tr>
<?php echo $output;?>
</table>
<div class="actions">
<input name="ConsultarDetalleNino" type="submit" class="primaryAction" id="submit-" value="Consultar Detalle">
<input name="Cancelar" type="submit" class="primaryAction" id="submit-" value="Cancelar">
</div>
</form>
<form id="ListadoNinos" name="ListadoNinos" action="InformeNinos.php" method="post" target="_blank"></form>
</fieldset>
<div style="clear: both"></div>
</div>
<div id="footer">
<div id="col1">
<p> <br />
© </p>
</div>
<div id="col2">
<p>Info:<strong></strong><br />
Info2: <strong>completar</strong></p>
</div>
<div id="col3">
<p>
</div>
</div>
</div>
</body>
</html>
The reason being is because $sexo isn't included in your echo'd $output .= variables.
NOTA: There are other variables in your loop that are not part of the echo'd output, so make sure to add those if you want them to be echo'd also.

HTML input output

User enters their name here as part of a form.
<p>Name <font color="red">(required) </font> <input name="flname" required="required" placeholder="Your Name" </p>
This solution currently provides a way of providing a sample text that can also be edited, and the PHP can run inside it, unlike <textarea>. However, my problem is that unlike <textarea>, I cannot seem to get the <div contenteditable... to submit its information to the email php file I have set up on the server. Anyone have any idea how I'd implement this.
<div contenteditable="true" name="message" required="" placeholder="Your Message" >Dear <?php echo "$mptitle $mpsecondname" ?>, <p> Please support us... </p>
<p> Kind Regards, </p>
<script type="text/javascript"> document.write(document.getElementById('flname').id);</script>
</div>
<div align="center">
# Update 2:
Hi,
Thank you both for your quick resposnes.
I tried to implement your solution here:
<div align="left">
<form action="form.php" method="post" enctype="multipart/form-data">
<p>Name <font color="red">(required) </font> <input name="flname" required="required" placeholder="Your Name" </p>
<p>Email <font color="red">(required) </font> <input name="emailfrom" type="email" required="required" placeholder="Your Email"> </p>
<p>Address <font color="red">(required) </font> <input name="address" type="name" required="required" placeholder="Address"> </p>
<p>City <font color="red">(required) </font> <input name="city" type="name" required="required" placeholder="City"> </p>
<p>Postcode <font color="red">(required) </font> <input name="postcode" type="name" required="required" placeholder="Postcode"> </p>
<p>What is 2+2? <font color="red">(required) </font> <input name="human" required placeholder="Type Here"> </p>
<p> <b> You can edit the text below as much or as little as you wish </b> </p>
<div contenteditable="true" required="" placeholder="Your Message" >Dear <?php echo "$mptitle $mpsecondname" ?>, <p> Please support us... </p> <p> Kind Regards, </p>
</div>
<input type=hidden name=userContent id=userContent>
<script>
var el=document.getElementById('userForm');
el.addEventListener('submit', function() {
var elInput=document.getElementById('userContent');
var elDiv=document.getElementById('divContent');
elInput.value = elDiv.innerHTML;
});
</script>
<div align="center">
<input id="cancel" name="cancel" type="submit" value="Cancel" />
<input id="submit" name="submit" type="submit" value="Submit">
</form>
</div>
</div>
PHP:
<?php
ini_set('display_errors',1); error_reporting(E_ALL);
include('mplookup.php');
$name = $_POST['flname'];
$email = $_POST['emailfrom'];
$message = $_POST['userContent'];
$address = $_POST['address'];
$city = $_POST['city'];
$postcode = $_POST['postcode'];
$human = $_POST['human'];
$to = "";
$body = $message;
$subject = 'From: $email \r\n : Sisi\'s visit to the UK: Sent using EG4DEMUK\'s Tool ';
?>
<?php
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $email))
{
echo '<p>Thank you for your email!</p>';
} else {
echo '<p>Oops! An error occurred. Try sending your message again.</p>';
}
}
?>
However, the emails outputed look like this
From: Hassan Ismail
E-Mail:
Message
Thanks in advance
A <div> is not a form element, so it won't be submitted. You need to implement an event listener on the submit event of the form that picks up the content of the <div> and puts it in a form element. Add a hidden <input> to the form for the purpose.
Here's a simple example:
<div id=divContent style="width:400px; height=200px;overflow:auto" contenteditable>Some content</div>
<form id=userForm>
<input type=hidden name=userContent id=userContent>
<input type=submit name=submit value="Send!">
</form>
<script>
var el=document.getElementById('userForm');
el.addEventListener('submit', function() {
var elInput=document.getElementById('userContent');
var elDiv=document.getElementById('divContent');
elInput.value = elDiv.innerHTML;
});
</script>
var el=document.getElementById('userForm');
el.addEventListener('submit', function() {
var elInput=document.getElementById('userContent');
var elDiv=document.getElementById('divContent');
elInput.value = elDiv.innerHTML;
});
<div id=divContent style="width:400px; height=200px;overflow:auto" contenteditable>Some content</div>
<form id=userForm>
<input type=hidden name=userContent id=userContent>
<input type=submit name=submit value="Send!">
</form>
<script>
getElementById('flname') ... is it clearly written in the name of the method that themethod gets an element by its Id, but not by his name. Use getElementsByName or set an id to you input tag. your input tag is not closed too ... don't use font - it is obsolete. if you want to submit tag content, use ajax, or setup a hidden field somwhere in the code, then use submit handler to set it with the content of the div before the actual submit.
<div id="yourdivid">....</div>
<input id="submitarea" type="hiden" name="submitarea">
$(function() {
$('#yourformid').submit( function() {
$('#submitarea').val($('#yourdivid').html());
});
});

Insert after for dynamic row

I have a dynamic adding row button. I can add more Ids and more clients but when I click on the plus it adds them in the top of my page and not after my row. How do I do that? Here is my code :
<b>Dimanche</b> </br><?php echo $date1 ?>
</td>
<!-- numéro de projet du dimanche -->
<td>
<span id="numpro" >
<form method="post" action="" onsubmit="return false;">
<input type="text" id="name" name="add_name"onkeypress="return handleEnter(event, this, 'task');"/></br>
<?php
if($result!=false && mysqli_num_rows($result)>0)
{
while($product = mysqli_fetch_array($result)): ?>
<p id="oldRow<?=$product['id']?>">
<input type="text" name="name<?=$product['id']?>" value="<?=$product['name']?>" /></p>
<?php endwhile; } ?>
</span>
<input onclick="addRow(this.form);" type="button" value="+" />
</td>
</form>
<html>
<div >
<form method="post" >
<div id="itemRows">
<?php
if($result!=false && mysqli_num_rows($result)>0)
{
while($product = mysqli_fetch_array($result)): ?>
<p id="oldRow<?=$product['id']?>">
<input type="text" name="name<?=$product['id']?>" value="<?=$product['name']?>" /></p>
<?php endwhile; } ?>
</div>
<p><input type="submit" name="ok" value="Ajouter à la B.D"></p>
</form>
</div>
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'"> <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="text" name="client1[]" size="12" class = "client1" id ="client1" disabled value="'+frm.client1.value+'"><input type="button" value="-" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_client1.value = '';
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
</span>
</td>
</td>
<!-- client du dimanche -->
<td>
<span id="proclient">
<input type="text" name="client1" size="12" class = "client1" id ="client1" disabled />
</span>
</td>
<!-- description du projet de dimanche -->
<td>
<span id="prodesc">
<input type="text" name="desc1" size="30" id ="desc1" class "desc" disabled />
</span>
</td>
<!-- ddescription de la tache du dimanche -->
<td>
<span id="protache">
<textarea rows="1" cols="20" name="taskDesc1" id ="task1" class "task"> </textarea>
</span>
</td>
<!-- lieu pour dimanche -->
<td>
<span id="prolieu">
<input type="text" name="prolieu1" size="10" id ="lieu1" class "lieu">
</span>
</td>
<!-- tache -->
<td>
<span id="tache">
<!-- <input type="text" name="tache" size="30" id="tache"class= "tache" /> -->
<!-- début section cobobox tache avec tool tip -->
<label title="Select your state"> <select title="Select your state" id="state" name="state">
<?php
$stmt->execute();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo ' <option title="';
echo $row['tacName'];
echo '">';
echo $row['tacId'];
echo '</option>'."\n";
$task = array();
//echo '<option value="'.$row['tacName'].'">'.$row['tacId'].'</option>'."\n";
}
?>
</select>
</label>
<!-- Fin section cobobox tache avec tool tip -->
</span>
</td>
<!-- calculter le temps pour le diamnche -->
<td>
<span id="calculTemps">
<input type="number" name="tempsd" size="30" id="temps1"class= "temps" min= "0" max="24" value="0" />
</span>
</td>
EDIT Here a demo of my problem
EDIT Here a demo of my goal I want
Try to use JQuery functions insertAfter and appendTo together with selectors :last or :first.
Common examples: jQuery('<p>').html('Some content').insertAfter('#id_here:last'); jQuery('<p>').html('Some content').appendTo('#itemRows');

Categories