Can you help me ?
It's part of my form. I want sum of values from more inputs (type=radio) after check it dynamically. I want count total price (variable - $res).
I know that this is string, but when I was changed settype to int, it doesn't work.
Please, help me :)
<div class="wrapper_input">
<input type="radio" name="fee" id="radio1" value="300">
<label for="radio1">D1 300,00 €</label>
</div>
<div class="wrapper_input">
<input type="radio" name="fee" id="radio2" value="150">
<label for="radio2">D2 150,00 €</label>
</div>
<script>
$('.wrapper_input input[type=radio]').on('change', function(event) {
var result = $(this).val();
$('.result').html(result);
})
</script>
<?php
$prem = "<span class='result'></span>";
?>
<br>
<div class="case2">
<input type="radio" name="fee1" id="radio1" value="300">
<label>D5 300,00 €</label>
</div>
<div class="case2">
<input type="radio" name="fee1" id="radio2" value="150">
<label for="radio6">D6 150,00 €</label>
</div>
<script>
$('.case2 input[type=radio]').on('change', function(event) {
var result2 = $(this).val();
$('.result2').html(result2);
})
</script>
<?php
$prem2 = "<span class='result2'></span>";
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
TOTAL PRICE
<?php
$res = $prem + $prem2;
echo $res;
?>
Based of the comment from questioner, here's a simple example to calculate the total price on client side:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript">
var globalSum = 0;
function summerize(formfieldObj)
{
globalSum = 0;
formulaObj = $(formfieldObj).parents("form");
$(formulaObj).find("input[type='radio']:checked").each(function()
{
globalSum = parseInt($(this).val()) + globalSum;
$("#totalprice").html(globalSum);
$(formulaObj).find("input[name='total']").val(globalSum);
});
}
</script>
</head>
<body>
<form name="bla" method="post">
<div class="wrapper_input">
<input type="radio" name="fee" id="radio1" value="300" onClick="summerize(this)">
<label for="radio1">D1 300,00 €</label>
</div>
<div class="wrapper_input">
<input type="radio" name="fee" id="radio2" value="150" onClick="summerize(this)">
<label for="radio2">D2 150,00 €</label>
</div>
<br>
<div class="case2">
<input type="radio" name="fee1" id="radio3" value="300" onClick="summerize(this)">
<label for="radio3">D5 300,00 €</label>
</div>
<div class="case2">
<input type="radio" name="fee1" id="radio4" value="150" onClick="summerize(this)">
<label for="radio4">D6 150,00 €</label>
</div>
<input type="submit" value="Pay">
<input type="hidden" name="total">
</div>
</form>
<div>TOTAL PRICE:<br><span id="totalprice"></span></div>
</body>
</html>
Hope it will help to lead into right direction.
Related
I have a form like below and I want to add vaidation for JQuery, I tried using html required attribute but it is not working, help me in this
The code is
//question 1
<label class="container">
<input class="chk check_answer1" type="checkbox" name="answers[]" value='1' required="required">
<span class="checkmark"></span>
</label>
<label class="container">
<input class="chk check_answer1" type="checkbox" name="answers[]" value='1' required="required">
<span class="checkmark"></span>
</label><label class="container">
<input class="chk check_answer1" type="checkbox" name="answers[]" value='1' required="required">
<span class="checkmark"></span>
</label>
//question 2
<label class="container">
<input class="chk check_answer2" type="checkbox" name="answers[]" value='2' required="required">
<span class="checkmark"></span>
</label>
<label class="container">
<input class="chk check_answer2" type="checkbox" name="answers[]" value='2' required="required">
<span class="checkmark"></span>
</label><label class="container">
<input class="chk check_answer2" type="checkbox" name="answers[]" value='2' required="required">
<span class="checkmark"></span>
</label>
//question 3
<label class="container">
<input class="chk check_answer3" type="checkbox" name="answers[]" value='3' required="required">
<span class="checkmark"></span>
</label>
<label class="container">
<input class="chk check_answer3" type="checkbox" name="answers[]" value='3' required="required">
<span class="checkmark"></span>
</label><label class="container">
<input class="chk check_answer3" type="checkbox" name="answers[]" value='3' required="required">
<span class="checkmark"></span>
</label>
This is the code and In this page the user has to select atleast one option for every question
First you need to name the grouped inputs that are alike the same name in your HTML.
Use .on(change function() then locate the input (element) you're using, $(this) and get its name.
Then we write a conditional to see if it is checked, if so remove any other instances of a check from that <input> names group.
EDIT: Function on each input to check the onchange and then if all instances of your inputs has one checked element we change the disabled attribute to false, unlocking the submit button.
You can add display messages if you like and css to the Jquery code by adding an empty <div id="msg"></div> where you want to display info, then call on the value of that div to place text there depending on the message you wish to convey.
//--> Remove the code below if you do want the user to only select one option per
//--> group and it is okay for them to select multiple options per group...
$(':checkbox').on('change', function() {
var th = $(this),
name = th.prop('name');
if (th.is(':checked')) {
th.attr('checked', 'checked');
$(':checkbox[name="' + name + '"]').not($(this)).prop('checked', false);
}
});
//--> This handles the locking of the submit button
function checkChecked(divId) {
var oneOfEachChecked = false;
$('#' + divId + ' input[type="checkbox"]').each(function() {
if ($(".check_answer1").is(":checked") && $(".check_answer2").is(":checked") && $(".check_answer3").is(":checked")) {
oneOfEachChecked = true;
$('#submit').prop('disabled', false);
$('#mash').show().text(' <--- Mash me now, I am unlocked!').css('background', 'lightgreen');
}
});
if (oneOfEachChecked === false) {
$('#submit').prop('disabled', true);
$('#mash').show().text(' X Sorry no go! X').css('background', '#FA3300');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div class="divs" id="check_answer1">
//question 1
<label class="container"></label>
<input class="chk check_answer1" onchange="checkChecked('check_answer1')" type="checkbox" name="check_answer1" value="1">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer1" onchange="checkChecked('check_answer1')" type="checkbox" name="check_answer1" value="1">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer1" onchange="checkChecked('check_answer1')" type="checkbox" name="check_answer1" value="1">
<span class="checkmark"></span>
</div>
<div class="divs" id="check_answer2">
//question 2
<label class="container"></label>
<input class="chk check_answer2" onchange="checkChecked('check_answer2')" type="checkbox" name="check_answer2" value="2">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer2" onchange="checkChecked('check_answer2')" type="checkbox" name="check_answer2" value="2">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer2" onchange="checkChecked('check_answer2')" type="checkbox" name="check_answer2" value="2">
<span class="checkmark"></span>
</div>
<div class="divs" id="check_answer3">
//question 3
<label class="container"></label>
<input class="chk check_answer3" onchange="checkChecked('check_answer3')" type="checkbox" name="check_answer3" value="3">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer3" onchange="checkChecked('check_answer3')" type="checkbox" name="check_answer3" value="3">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer3" onchange="checkChecked('check_answer3')" type="checkbox" name="check_answer3" value="3">
<span class="checkmark"></span>
</div>
<input id="submit" type="submit" name="submit" value="submit" disabled><span id="mash"></span>
</form>
I have a task where a form will appear when the star rating is below 3 and must be filled (required). but if the star rating is above 3 then the form does not need to appear and does not need to be filled.
the form is hidden and displayed when the star value below 3 is
<div id="masukan">
<label>Masukan Untuk Kami </label>
<textarea name="masukan" id="masukan" class="form-control" placeholder="Kritik Dan Saran Membangun Anda" required=""></textarea></div>
because the logic is when the rating is below 3 users must fill in the form (show) and if the rating is above 3 users do not have to fill in the form (hide). the problem is when saving to the database where the user gives a 3 star rating.
the code that I now have is like this:
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Berikan Pendapatmu Tentang Bagaimana Kami !!</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
<label>Tanggal Lahir</label>
<input type="date" name="tgl_lahir" id="tgl_lahir" class="form-control" value="Tanggal Lahir Anda !" required="" />
<br />
<label>Pekerjaan</label>
<input type="text" name="pekerjaan" id="pekerjaan" class="form-control" placeholder="Tuliskan Pekerjaan Utama Anda!" required="" />
<br />
<label>Rating Kepuasan</label><br/>
<fieldset id='demo3' class="rating">
<input class="stars" type="radio" id="star53" name="rating" value="5" />
<label class = "full" for="star53" title="5 Bintang"></label>
<input class="stars" type="radio" id="star4half3" name="rating" value="4.5" />
<label class="half" for="star4half3" title="4,5 Bintang"></label>
<input class="stars" type="radio" id="star43" name="rating" value="4" />
<label class = "full" for="star43" title="4 Bintang"></label>
<input class="stars" type="radio" id="star3half3" name="rating" value="3.5" />
<label class="half" for="star3half3" title="3,5 Bintang"></label>
<input class="stars" type="radio" id="star33" name="rating" value="3" />
<label class = "full" for="star33" title="3 Bintang"></label>
<input class="stars" type="radio" id="star2half3" name="rating" value="2.5" />
<label class="half" for="star2half3" title="2,5 Bintang"></label>
<input class="stars" type="radio" id="star23" name="rating" value="2" />
<label class = "full" for="star23" title="2 Bintang"></label>
<input class="stars" type="radio" id="star1half3" name="rating" value="1.5" />
<label class="half" for="star1half3" title="1,5 Bintang"></label>
<input class="stars" type="radio" id="star13" name="rating" value="1" />
<label class = "full" for="star13" title="1 Bintang"></label>
<input class="stars" type="radio" id="starhalf3" name="rating" value="0.5" />
<label class="half" for="starhalf3" title="0,5 Bintang"></label>
</fieldset>
<br />
<br />
<div id="masukan">
<label>Masukan Untuk Kami </label>
<textarea name="masukan" id="masukan" class="form-control" placeholder="Kritik Dan Saran Membangun Anda" required=""></textarea></div>
<br />
<label>Email Anda</label><br/>
<input type="text" name="email_member" id="email_member" class="form-control" readonly value="<?php echo $email_member;?>" />
<br />
<br/>
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#insert_form').on("submit", function(event){
event.preventDefault();
if($('#tgl_lahir').val() == "")
{
alert("Tanggal Lahir harus di isi");
}
else if($('#pekerjaan').val() == '')
{
alert("Pekerjaan harus di isi");
}
else
{
$.ajax({
url:"insert.php",
method:"POST",
data:$('#insert_form').serialize(),
beforeSend:function(){
$('#insert').val("Inserting");
},
success:function(data){
$('#insert_form')[0].reset();
$('#add_data_Modal').modal('hide');
$('#employee_table').html(data);
}
});
}
});
});
$('input[type=radio][name=rating]').change(function() {
if ($(this ).val() <=3) {
$ ('#masukan').show();
}
else {
$('#masukan').hide();
}
});
</script>
and this proses.php
<?php
include"page/koneksi.php";
try{
$tgl_lahir = $_POST["tgl_lahir"];
$pekerjaan = $_POST["pekerjaan"];
$rating = $_POST["rating"];
$masukan = $_POST["masukan"];
$email_member = $_POST["email_member"];
if (isset($tgl_lahir) AND isset($pekerjaan) AND isset($rating) AND isset($masukan) AND isset($email_member)) {
$query = $db_con->prepare("insert into tb_voting (tgl_lahir,pekerjaan,kepuasan,masukan,email_member)
values ('$tgl_lahir','$pekerjaan','$rating','$masukan','$email_member')"); }
$query->execute($_POST);
echo "Data telah disimpan";
}catch(PDOException $e){
echo "Error! gagal menyimpan:".$e->getMessage();
}
?>
<div class="container">
<div class="form-group">
<form>
<button>click to add/remove<input type="text" name="addfirst" value="10" readonly></button><br>
<button>click to add/remove<input type="text" name="addsecond" value="10" readonly></button><br>
<button>click to add/remove<input type="text" name="addthird" value="10" readonly></button><br>
<button>click to add/remove<input type="text" name="addfourth" value="10" readonly></button><br>
<label>total values</label>
<input type="text" name="total_ammount" value="50" readonly>
</form>
</div>
</div>
if i click button to add first input value which is 10 so it will addition with my total input field values if again the same button so substract the values.
remaining field should do the same work also.
how it is possible by using jquery please explain it.
Please Try the below code.,
function addValue(dhis){
var val=parseFloat(dhis.children().val()) // get the text box value
var total_ammount=parseFloat($('#total_ammount').val())+val
$('#total_ammount').val(total_ammount);
dhis.attr('onclick','subValue($(this))') // change the onclick function
}
function subValue(dhis){
var val=parseFloat(dhis.children().val()) // get the text box value
var total_ammount=parseFloat($('#total_ammount').val())-val
$('#total_ammount').val(total_ammount);
dhis.attr('onclick','addValue($(this))') // change the onclick function
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="form-group">
<form>
<button type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addfirst" value="10" readonly></button><br>
<button type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addsecond" value="10" readonly></button><br>
<button type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addthird" value="10" readonly></button><br>
<button type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addfourth" value="10" readonly></button><br>
<label>total values</label>
<input type="text" name="total_ammount" id="total_ammount" value="50" readonly>
</form>
</div>
</div>
I'm currently developing warehouse inventory system. And the only task left is how to generate and print the bin IDs of the rack. The code below generate only 1 barcode. It only generates the last checked item. I need to print multiple barcode at once for printing. Here's the link I used as a reference to generate the barcode.
<?php
require ("../../connect/db.php");
$sql = "select * from location_bin where rack_id = 3";
$rack = mysqli_query($mysqli, $sql);
while($row = mysqli_fetch_array($rack)){
$id = $row['bin_id'];
echo "<input type='checkbox' name='barcodeValue' id='barcodeValue' value='$id'/>$id<br>";
}
?>
Here's the script in generating the barcode.
<script type="text/javascript">
function generate(){
$(document).ready( function() {
$("input[name=barcodeValue]:checked").each(function () {
var id = $(this).attr("value");
function generateBarcode(id){
var value = id;
var btype = $("input[name=btype]:checked").val();
var renderer = $("input[name=renderer]:checked").val();
var quietZone = false;
if ($("#quietzone").is(':checked') || $("#quietzone").attr('checked')){
quietZone = true;
}
var settings = {
output:renderer,
bgColor: $("#bgColor").val(),
color: $("#color").val(),
barWidth: $("#barWidth").val(),
barHeight: $("#barHeight").val(),
moduleSize: $("#moduleSize").val(),
posX: $("#posX").val(),
posY: $("#posY").val(),
addQuietZone: $("#quietZoneSize").val()
};
if ($("#rectangular").is(':checked') || $("#rectangular").attr('checked')){
value = {code:value, rect: true};
}
if (renderer == 'canvas'){
clearCanvas();
$("#barcodeTarget").hide();
$("#canvasTarget").show().barcode(value, btype, settings);
} else {
$("#canvasTarget").hide();
$("#barcodeTarget").html("").show().barcode(value, btype, settings);
}
}
function showConfig1D(){
$('.config .barcode1D').show();
$('.config .barcode2D').hide();
}
function showConfig2D(){
$('.config .barcode1D').hide();
$('.config .barcode2D').show();
}
function clearCanvas(){
var canvas = $('#canvasTarget').get(0);
var ctx = canvas.getContext('2d');
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.fillStyle = '#FFFFFF';
ctx.strokeStyle = '#000000';
ctx.clearRect (0, 0, canvas.width, canvas.height);
ctx.strokeRect (0, 0, canvas.width, canvas.height);
}
$(function(){
$('input[name=btype]').click(function(){
if ($(this).attr('id') == 'datamatrix') showConfig2D(); else showConfig1D();
});
$('input[name=renderer]').click(function(){
if ($(this).attr('id') == 'canvas') $('#miscCanvas').show(); else $('#miscCanvas').hide();
});
generateBarcode(id);
});
});
});
}
</script>
Below is the HTML code.
<div class="title">Type</div>
<input type="radio" name="btype" id="code39" value="code39" checked><label for="code39">code 39</label><br />
<input type="radio" name="btype" id="code93" value="code93"><label for="code93">code 93</label><br />
<input type="radio" name="btype" id="code128" value="code128"><label for="code128">code 128</label><br />
<input type="radio" name="btype" id="datamatrix" value="datamatrix"><label for="datamatrix">Data Matrix</label><br /><br />
</div>
<div class="config" style="display:none">
<div class="title">Misc</div>
Background : <input type="text" id="bgColor" value="#FFFFFF" size="7"><br />
"1" Bars : <input type="text" id="color" value="#000000" size="7"><br />
<div class="barcode1D">
bar width: <input type="text" id="barWidth" value="1" size="3"><br />
bar height: <input type="text" id="barHeight" value="50" size="3"><br />
</div>
<div class="barcode2D">
Module Size: <input type="text" id="moduleSize" value="5" size="3"><br />
Quiet Zone Modules: <input type="text" id="quietZoneSize" value="1" size="3"><br />
Form: <input type="checkbox" name="rectangular" id="rectangular"><label for="rectangular">Rectangular</label><br />
</div>
<div id="miscCanvas">
x : <input type="text" id="posX" value="10" size="3"><br />
y : <input type="text" id="posY" value="20" size="3"><br />
</div>
</div>
<div class="config">
<div class="title">Format</div>
<input type="radio" id="css" name="renderer" value="css" checked="checked"><label for="css">CSS</label><br />
<input type="radio" id="bmp" name="renderer" value="bmp"><label for="bmp">BMP (not usable in IE)</label><br />
<input type="radio" id="canvas" name="renderer" value="canvas"><label for="canvas">Canvas (not usable in IE)</label><br />
</div>
</div>
<div id="submit">
<input type="button" onClick="generate();" value=" Generate the barcode ">
</div>
</div>
<div id="barcodeTarget" class="barcodeTarget"></div>
<canvas id="canvasTarget" width="150" height="100"></canvas>
Output screenshot
Try this, also made a JSFIDDLE
HTML
<input class="thischeckbox" type='checkbox' name='123' id='123' value='123' />123
<br>
<input class="thischeckbox" type='checkbox' name='456' id='456' value='456' />456
<br>
<input class="thischeckbox" type='checkbox' name='789' id='789' value='789' />789
<br>
<div class="title">Type</div>
<input type="radio" name="btype" id="code39" value="code39" checked>
<label for="code39">code 39</label>
<br />
<input type="radio" name="btype" id="code93" value="code93">
<label for="code93">code 93</label>
<br />
<input type="radio" name="btype" id="code128" value="code128">
<label for="code128">code 128</label>
<br />
<input type="radio" name="btype" id="datamatrix" value="datamatrix">
<label for="datamatrix">Data Matrix</label>
<br />
<br />
<div class="config">
<div class="title">Format</div>
<input type="radio" id="css" name="renderer" value="css" checked="checked">
<label for="css">CSS</label>
<br />
<input type="radio" id="bmp" name="renderer" value="bmp">
<label for="bmp">BMP (not usable in IE)</label>
<br />
<input type="radio" id="canvas" name="renderer" value="canvas">
<label for="canvas">Canvas (not usable in IE)</label>
<br />
</div>
<div class="config">
<div class="title">Misc</div>
Background :
<input type="text" id="bgColor" value="#FFFFFF" size="7">
<br /> "1" Bars :
<input type="text" id="color" value="#000000" size="7">
<br />
<div class="barcode1D">
bar width:
<input type="text" id="barWidth" value="1" size="3">
<br /> bar height:
<input type="text" id="barHeight" value="50" size="3">
<br />
</div>
<div class="barcode2D">
Module Size:
<input type="text" id="moduleSize" value="5" size="3">
<br /> Quiet Zone Modules:
<input type="text" id="quietZoneSize" value="1" size="3">
<br /> Form:
<input type="checkbox" name="rectangular" id="rectangular">
<label for="rectangular">Rectangular</label>
<br />
</div>
<div id="miscCanvas">
x :
<input type="text" id="posX" value="10" size="3">
<br /> y :
<input type="text" id="posY" value="20" size="3">
<br />
</div>
</div>
<div id="submit">
<input id="generatecode" type="button" onClick="generate();" value=" Generate the barcode ">
</div>
<div id="barcodeTarget" class="barcodeTarget"></div>
<canvas id="canvasTarget" width="150" height="100"></canvas>
js
$('.barcode2D').hide();
$('.barcode1D').show();
$('#miscCanvas').hide();
$('#generatecode').click(function() {
$('input[type=checkbox]:checked').each(function() {
var id = $(this).attr("id");
generateBarcode(id)
});
});
$(document).on('change', 'input[name=btype]', function() {
if ($(this).attr('id') == 'datamatrix') {
showConfig2D();
} else {
showConfig1D();
}
});
$(document).on('change', 'input[name=renderer]', function() {
if ($(this).attr('id') == 'canvas') {
$('.config').show();
$('#miscCanvas').show();
} else {
$('.config').show();
$('#miscCanvas').hide();
}
});
function generateBarcode(id) {
var value = id;
var btype = $("input[name=btype]:checked").val();
var renderer = $("input[name=renderer]:checked").val();
var quietZone = false;
if ($("#quietzone").val() != '') {
quietZone = true;
}
var settings = {
output: renderer,
bgColor: $("#bgColor").val(),
color: $("#color").val(),
barWidth: $("#barWidth").val(),
barHeight: $("#barHeight").val(),
moduleSize: $("#moduleSize").val(),
posX: $("#posX").val(),
posY: $("#posY").val(),
addQuietZone: $("#quietZoneSize").val()
};
if ($("#rectangular").is(':checked') || $("#rectangular").attr('checked')) {
alert("Test")
value = {
code: value,
rect: true
};
}
if (renderer == 'canvas') {
clearCanvas();
$("#barcodeTarget").hide();
$("#canvasTarget").show().barcode(value, btype, settings);
} else {
$("#canvasTarget").hide();
$("#barcodeTarget").html("").show().barcode(value, btype, settings);
}
}
function showConfig1D() {
$('.config').show();
$('.barcode2D').hide();
$('.barcode1D').show();
}
function showConfig2D() {
$('.config').show();
$('.barcode1D').hide();
$('.barcode2D').show();
}
function clearCanvas() {
var canvas = $('#canvasTarget').get(0);
var ctx = canvas.getContext('2d');
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.fillStyle = '#FFFFFF';
ctx.strokeStyle = '#000000';
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeRect(0, 0, canvas.width, canvas.height);
}
in my code when i click on submit 3 btn it echos back empty $email though post is created in db the title is always empty, however if i change if(isset($_POST['submit3'])) to if(isset($_POST['submit1'])), it doesn't enter the details into db or echo back anything
<script type="text/javascript">
$( document ).ready(function() {
$("#form1").show();
$("#form2").hide();
$("#form3").hide();
$('button[name="submit1"]').click(function(e) {
$("#form2").show();
$("#form1").hide();
$("#form3").hide();
e.preventDefault();
});
$('button[name="submit2"]').click(function(e) {
$("#form3").show();
$("#form1").hide();
$("#form2").hide();
e.preventDefault();
});
});
</script>
<body>
<form id="form1" method="post" >
<div>
<input type="text" id="inputemail" name="email" placeholder="Email" height="34px" >
</div>
<div >
<button id="submit1" type="submit" name="submit1" ><strong>Start</strong></button>
</div>
</form>
<form id="form2" method="post" style="display:none">
<div>
<input type="text" id="inputpwd" name="pwd" placeholder="Password" height="34px" required>
</div>
<div >
<button id="submit2" type="submit" name="submit2" ><strong>Next</strong></button>
</div>
</form>
<form id="form3" method="post" style="display:none">
<div required>
<input type="checkbox" value="0" name="book_type[]"> Romance</input><br>
<input type="checkbox" value="1" name="book_type[]"> Action</input><br>
<input type="checkbox" value="2" name="book_type[]"> suspense</input><br>
<input type="checkbox" value="3" name="book_type[]"> thriller</input><br>
</div>
<div >
<button id="submit3" type="submit" name="submit3" onclick="submitform();"><strong>Next</strong></button>
</div>
</form>
</body>
<?php
$email=$_POST['email'];
$pwd=$_POST['pwd'];
$bookchk=array();
$todaydate = new DateTime();
$todaydate =$todaydate->format('Y-m-d H-i-s');
if(isset($_POST['submit3']))
{
echo $email;
$formarg= array('post_type'=>'details',
'post_title'=>$email,
'post_author'=>'1',
'post_status'=>'publish',
'post_date'=>$todaydate );
$wpdb->insert('wp_posts',$formarg);
$bookpostid=$wpdb->insert_id;
foreach($_POST['book_type'] as $selectedplan)
{
$bookchk[]=$selectedplan;
}
update_field('field_561b9999ebb56',$bookchk[0],$contestpostid);
update_field('pwd',$pwd,$bookpostid);
}
?>
Try it:
<button id="submit3" type="submit" name="submit3" value="Next" onclick="submitform();"><strong>Next</strong></button>
<?php
session_start();
if(isset($_POST['email'])){$_SESSION["email"] = $_POST['email'];}
if(isset($_POST['pwd'])){$_SESSION["pwd"] = $_POST['pwd'];}
if(isset($_POST['book_type'])){$_SESSION["book_type"] = $_POST['book_type'];}
if(isset($_SESSION["email"]) && isset($_SESSION["pwd"]) && isset($_SESSION["book_type"])){
echo "email:".$_SESSION["email"]."<br>";
echo "pwd:" .$_SESSION["pwd"]."<br>";
echo("options:");
for($i=0;$i<sizeof($_SESSION["book_type"]);$i++){
echo $_SESSION["book_type"][$i]."|";
}
session_destroy();
$_SESSION["email"] = "";
$_SESSION["pwd"] = "";
$_SESSION["book_type"] = "";
}
$todaydate = new DateTime();
$todaydate =$todaydate->format('Y-m-d H-i-s');
?>
<body>
<?php if(empty($_SESSION["email"])):?>
<form id="form1" method="post">
<div>
<input type="text" id="email" name="email" placeholder="Email" height="34px" >
</div>
<div >
<input id="submit1" type="submit" name="submit1" value = "Start">
</div>
</form>
<?php endif;?>
<?php if(isset($_SESSION["email"]) && empty($_SESSION["pwd"]) ):?>
<form id="form2" method="post">
<div>
<input type="text" id="pwd" name="pwd" placeholder="Password" height="34px" required>
</div>
<div >
<input id="submit2" type="submit" name="submit2" value = "Next">
</div>
</form>
<?php endif;?>
<?php if(isset($_SESSION["email"]) && isset($_SESSION["pwd"]) && empty($_SESSION["book_type"])):?>
<form id="form3" method="post">
<div required>
<input type="checkbox" value="0" name="book_type[]"> Romance</input><br>
<input type="checkbox" value="1" name="book_type[]"> Action</input><br>
<input type="checkbox" value="2" name="book_type[]"> suspense</input><br>
<input type="checkbox" value="3" name="book_type[]"> thriller</input><br>
</div>
<div >
<button id="submit3" type="submit" name="submit3" onclick="submitform();"><strong>Next</strong></button>
</div>
</form>
<?php endif;?>
</body>
You are getting back empty $email when submitting through button
id="submit3" because an input field with attribute name="email"
doesn't exists within your third form <form id="form3" ...> </form>
You are receving nothing when submitting through button
id="submit1" because e.preventDefault(); method prevents form from
submitting when you click submit button.
To proceed submitting of your first and second form remove e.preventDefault(); from submit button click handlers