How to get Specific Button ID when submitting a form?

How to get Specific Button ID when submitting a form? - javascript

<form action="" method="post" id="all-student-reservations-form" class="form-block">
<label style="display: inline-block; vertical-align: bottom;">Type<br>
<select name="drlist-type" id="drlist-type" class="input-large">
<?php foreach (array('All', 'Midterm', 'Final') as $examType) { ?>
<option <?php if ($type == $examType) echo 'selected' ?>><?php echo $examType ?></option>
<?php } ?>
</select>
</label>
<label style="display: inline-block; vertical-align: bottom;">Campus<br>
<?php echo campus_selector('drlist-campus', $campuses, $selectedCampus); ?>
</label>
<button type="submit" class="btn-large" id="report" name="report">View All Students Reservations</button>
<button type="submit" class="btn-large" id="download" name="report">Download Report</button>
<input type="hidden" name="postId" value="" />
</form>
$("#all-student-reservations-form").on("submit", function (e) {
e.preventDefault();
$('.btn-large').click(function()) {
var postId = $('#postId').val($(this).attr('id'));
});
alert(postId);
var type = $("#drlist-type").val(),
campus = $("#drlist-campus select").val();
window.location = site_url("reservations/studentsbyCurrentTerm/"+campus+'/'+type);
});
Didn't get PostId value when clicking on View/Download.

First you need to change the button type to button and trigger a function which set the postId then just submit your form.
<form action="" method="post" id="all-student-reservations-form" class="form-block">
<label style="display: inline-block; vertical-align: bottom;">Type<br>
<select name="drlist-type" id="drlist-type" class="input-large">
<?php foreach (array('All', 'Midterm', 'Final') as $examType) { ?>
<option <?php if ($type == $examType) echo 'selected' ?>><?php echo $examType ?></option>
<?php } ?>
</select>
</label>
<label style="display: inline-block; vertical-align: bottom;">Campus<br>
<?php echo campus_selector('drlist-campus', $campuses, $selectedCampus); ?>
</label>
<button type="button" class="btn-large" onclick="submitForm('report')" name="report">View All Students Reservations</button>
<button type="button" class="btn-large" onclick="submitForm('download')" name="report">Download Report</button>
<input type="hidden" name="postId" value="" />
function submitForm(id){
$("#postId").val(id);
$("form").submit();
}
$("#all-student-reservations-form").on("submit", function (e) {
e.preventDefault();
var postId = $('#postId').val();
alert(postId);
var type = $("#drlist-type").val(),
campus = $("#drlist-campus select").val();
window.location = site_url("reservations/studentsbyCurrentTerm/"+campus+'/'+type);
});

Related

ajax removing everything after space

In my form select field I use ajax to list my options, but when submitting to the controller everything after space will be removed.
<div class="col-md-9">
<form class="" action="<?php echo base_url(); ?>Sms/add" method="post">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Compose New Message</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="form-group">
<input class="form-control" value="<?php echo set_value('title'); ?>" name="title" placeholder="Subject: 20 characters" maxlength="20">
</div>
<div class="form-group">
<textarea id="compose-textarea" name="message" class="form-control" style="height: 150px" placeholder=" Enter your message here: 150 characters" maxlength="150"><?php echo set_value('message'); ?></textarea>
</div>
<div class="form-group">
<label><input type="radio" class="flat-red" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck" value="company"> Send To Company's Database</label>
</div>
<div class="form-group">
<label><input type="radio" class="flat-red" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck" value="ecofarmer"> Send To Ecofarmer Database</label>
</div>
<div id="ifYes" style="display:none" class="form-group">
<select class="form-control" name="database_name">
<option value="">Choose target</option>
<?php foreach ($databases as $item): ?>
<option value="<?php echo $item->db_id; ?>"><?php echo $item->db_name; ?></option>
<?php endforeach; ?>
</select>
</div>
<div id="ifNo" style="display:none">
<div class="form-group">
<select class="form-control" name="province" id="province">
<option value="">Choose Province</option>
<?php foreach ($provinces as $item): ?>
<option value="<?php echo $item->province_id; ?>"><?php echo $item->province_name; ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<select class="form-control" name="district" id="district" disabled="disabled">
<option value="">Choose District</option>
</select>
</div>
<div class="form-group">
<select class="form-control" name="ward" id="ward" disabled="disabled">
<option value="">Choose Ward</option>
</select>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<div class="pull-right">
<button type="submit" name="draft" class="btn btn-default" value="true"><i class="fa fa-pencil"></i> Draft</button>
<button type="submit" name="submit" class="btn btn-primary" value="true"><i class="fa fa-envelope-o"></i> Send</button>
</div>
<button type="reset" class="btn btn-default"><i class="fa fa-times"></i> Discard</button>
</div>
<!-- /.box-footer -->
</div>
<!-- /. box -->
</form>
Below is my JavaScript that I use for radio input and select options
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.display = 'inline';
}
else document.getElementById('ifYes').style.display = 'none';
if (document.getElementById('noCheck').checked) {
document.getElementById('ifNo').style.display = 'inline';
}
else document.getElementById('ifNo').style.display = 'none';
}
$('#province').change(function() {
var province = this.value;
$.ajax({
url: "<?php echo base_url('Sms/get_district'); ?>",
data:{pID:province},
type: 'post',
success: function(data){
var arr = JSON.parse(data);
document.getElementById("district").disabled = false;
var $el = $("#district");
$el.empty();
$el.append($("<option>Choose District</option>"));
$.each($(arr),function(key,value){
var div_data="<option value="+value.district_id+">"+value.district_name+"</option>";
$(div_data).appendTo('#district');
console.log(value.district_name);
});
}
});
});
$('#district').change(function() {
var district = this.value;
$.ajax({
url: "<?php echo base_url('Sms/get_ward'); ?>",
data:{dID:district},
type: 'post',
success: function(data){
var arr = JSON.parse(data);
document.getElementById("ward").disabled = false;
var $il = $("#ward");
$il.empty();
$il.append($("<option>Choose A Ward</option>"));
$.each($(arr),function(key,value){
var div_data="<option value="+value.ward_number+">"+value.ward_number+"</option>";
$(div_data).appendTo('#ward');
console.log(value.ward_number);
});
}
});
});
Now when I'm submitting the value of the selection ward is being removed of everything after the space. How can I prevent that from happening?

The problem was on quotes
I changed the code below
var div_data="<option value="+value.ward_number+">"+value.ward_number+"</option>";
To this
var div_data = '<option value="' + value.ward_number + '">' + value.ward_number + '</option>';

Change divs twice on different form submissions

I have a form with radio buttons in div1 and a captcha code to be solved in div2 and another content div3 Once the person checks a radio button in div1 and clicks submit, div1 is replaced by div2 and when a person completes the captcha in div2, I want div2 to be replaced by div3. But, once I am on div2 and complete the captcha, on submit, div1 is shown again with no signs of div3. Any way to achieve that?
<?php
require_once("solvemedialib.php");
$privkey="My_Private_key";
$hashkey="My_Hash_key";
$solvemedia_response = solvemedia_check_answer($privkey,
$_SERVER["REMOTE_ADDR"],
$_POST["adcopy_challenge"],
$_POST["adcopy_response"],
$hashkey);
if (!$solvemedia_response->is_valid) {
$errCaptcha = '<div class="alert">Please enter the Captcha!</div><br />';
} else {
?>
<script type="text/javascript">
$(document).ready(function(){
$("#3").css('display', 'block');
$("div#2").replaceWith( $( "#3" ) );
});
</script>
<?php
}
$genderErr = $gender = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["gender"])) {
$genderErr = "<div class='alert'>Please select a gender.</div>";
} else {
?>
<script type="text/javascript">
$(document).ready(function(){
$("#2").css('display', 'block');
$("div#1").replaceWith( $( "#2" ) );
});
</script>
<?php }}
?>
<div id="1">
<h1>Step 1: Choose your gender</h1>
<div>
<form id="genderform" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="radio" name="gender" value="male" <?php if (isset($gender) && $gender=="male");?>>Male<br />
<input type="radio" name="gender" value="female" <?php if (isset($gender) && $gender=="female");?>>Female<br />
<input form="genderform" id="submit" name="submit" type="submit" value="Submit">
<?php echo $genderErr;?>
</form>
</div>
</div>
<div id="2" style="display:none">
<h1>Step 2: Enter captcha to verify you are not a bot!</h1>
<div align="center">
<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<?php echo solvemedia_get_html("My-C-Key"); //outputs the widget ?><br />
<input id="submit" name="submit" type="submit" value="Submit">
</form>
<?php echo $errCaptcha;?>
</div>
</div>
<div id="3" style="display:none;"><h1>Step3</h1></div>
I am sorry if I am doing a silly mistake here. I am new to coding. Please help me out.

try this .....
<?php
require_once("solvemedialib.php");
$privkey="My_Private_key";
$hashkey="My_Hash_key";
$solvemedia_response = solvemedia_check_answer($privkey,
$_SERVER["REMOTE_ADDR"],
$_POST["adcopy_challenge"],
$_POST["adcopy_response"],
$hashkey);
if (!$solvemedia_response->is_valid) {
$errCaptcha = '<div class="alert">Please enter the Captcha!</div><br />';
} else {
?>
<script type="text/javascript">
$(document).ready(function(){
$("#3").css('display', 'block');
$("#1").css('display', 'none');
$("div#2").css('display', 'none');
});
</script>
<?php
}
$genderErr = $gender = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["gender"])) {
$genderErr = "<div class='alert'>Please select a gender.</div>";
} else {
?>
<script type="text/javascript">
$(document).ready(function(){
$("#2").css('display', 'block');
$("#3").css('display', 'none');
$("div#1").css('display', 'none');
});
</script>
<?php
}
}
?>
<div id="1">
<h1>Step 1: Choose your gender</h1>
<div>
<form id="genderform" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="radio" name="gender" value="male" <?php if (isset($gender) && $gender=="male");?>>Male<br />
<input type="radio" name="gender" value="female" <?php if (isset($gender) && $gender=="female");?>>Female<br />
<input form="genderform" id="submit" name="submit" type="submit" value="Submit">
<?php echo $genderErr;?>
</form>
</div>
</div>
<div id="2" style="display:none">
<h1>Step 2: Enter captcha to verify you are not a bot!</h1>
<div align="center">
<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<?php echo solvemedia_get_html("My-C-Key"); //outputs the widget ?><br />
<input id="submit" name="submit" type="submit" value="Submit">
</form>
<?php echo $errCaptcha;?>
</div>
</div>
<div id="3" style="display:none;"><h1>Step3</h1></div>
EDIT
Try this
<?php
require_once("solvemedialib.php");
$privkey="My_Private_key";
$hashkey="My_Hash_key";
$solvemedia_response = solvemedia_check_answer($privkey,
$_SERVER["REMOTE_ADDR"],
$_POST["adcopy_challenge"],
$_POST["adcopy_response"],
$hashkey);
if (!$solvemedia_response->is_valid) {
$errCaptcha = '<div class="alert">Please enter the Captcha!</div><br />';
} else {
?>
<script type="text/javascript">
$(document).ready(function(){
$("#3").css('display', 'block');
$("div#2").replaceWith( $( "#3" ) );
});
</script>
<?php
}
$genderErr = $gender = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["gender"])) {
$genderErr = "<div class='alert'>Please select a gender.</div>";
} else {
?>
<script type="text/javascript">
$(document).ready(function(){
$("#2").css('display', 'block');
$("div#1").replaceWith( $( "#2" ) );
});
</script>
<?php
}
}
?>
<?php if (!$solvemedia_response->is_valid && !isset($_POST["gender"])) { ?>
<div id="1">
<h1>Step 1: Choose your gender</h1>
<div>
<form id="genderform" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="radio" name="gender" value="male" <?php if (isset($gender) && $gender=="male");?>>Male<br />
<input type="radio" name="gender" value="female" <?php if (isset($gender) && $gender=="female");?>>Female<br />
<input form="genderform" id="submit" name="submit" type="submit" value="Submit">
<?php echo $genderErr;?>
</form>
</div>
</div>
<?php } ?>
<?php if (!$solvemedia_response->is_valid && isset($_POST["gender"])) { ?>
<div id="2" style="display:none">
<h1>Step 2: Enter captcha to verify you are not a bot!</h1>
<div align="center">
<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<?php echo solvemedia_get_html("My-C-Key"); //outputs the widget ?><br />
<input id="submit" name="submit" type="submit" value="Submit">
</form>
<?php echo $errCaptcha;?>
</div>
</div>
<?php } ?>
<?php if ($solvemedia_response->is_valid && !isset($_POST["gender"])) { ?>
<div id="3" style="display:none;"><h1>Step3</h1></div>
<?php } ?>

I don't think cookies or local storage will work. My approach would be to store the styling information for each user session on the server side db. Although node.js would jive well wıth the client sıde javascript, my familiarity with Python Django suggests the following possible solution.
enter code here
{% block body %}
{% if user.is_authenticated %}
<div id="container">User: {{ user.get_username }}
# conditional python code to render the div styles according to
# user preferances
</div>
{% endif %}
{% endblock %}

AJAX: Form Submit to post comments

I'm having an issue getting a form to submit and display the comment without the page refreshing (in-place) but when I click on the button, it takes me to the top of the page but does not perform any actions, does not insert into the database and thus does not display the comments in the page.
It is supposed to place the comment in the appropriate place with a fade effect.
Credits and Demo for the script: Original Script Here
The script provided int he link above, works if I try it as it comes but I had to modify it to fit my needs and this is what I have.
The Form:
<div class="comment-form">
<form id="form" action="" method="post">
<div class="top-form">
<span class="parent name">
<input class="field" type="hidden" name="Name" value="<?php echo $_SESSION["UserName"]; ?>" />
<input class="field" type="text" name="Name" value="<?php echo $_SESSION["UserName"]; ?>" disabled="disabled">
</span>
<span class="parent name">
<input class="field" type="hidden" name="ID" value="<?php echo $_SESSION["UserID"]; ?>" />
<input class="field" type="text" name="ID" value="<?php echo $_SESSION["UserID"]; ?>" disabled="disabled">
</span>
<span class="parent last">
<input class="field" type="hidden" name="PageID" value="<?php echo $_GET['PageID']; ?>" />
<input class="field" type="text" name="PageID" value="<?php echo $_GET['PageID']; ?>" disabled="disabled">
</span>
<div class="clear"></div>
</div>
<div class="bottom-form">
<label>Choose an Option</label>
<select id="commentbox" name="comment" class="bs-select form-control">
<option disabled selected value> -- Options -- </option>
<option value="First Option">First Option</option>
<option value="Second Option">Second Option</option>
<option value="Third Option">Third Option</option>
</select>
<button class="btn btn-icon submit" name="btn-sumbit" type="submit" id="submit" value="Post Message"><span class="icon"></span>Post Message</button>
</div>
</form>
</div>
<div class="comments">
<div class="section-title">
<h3>Messages</h3>
</div>
<ul class="level-1">
<div class="comment-block">
<?php echo $postedcomments; ?> <!-- loads previous comments on page load. it works. -->
</div>
</ul>
</div>
The script
located in the same page as the form.
<script>
$(document).ready(function(){
var form = $('form');
var submit = $('#submit');
form.on('btn-submit', function(e) {
// prevent default action
e.preventDefault();
// send ajax request
$.ajax({
url: 'data/queries/comment-insert.php',
type: 'POST',
cache: false,
data: form.serialize(), //form serialized data
beforeSend: function(){
// change submit button value text and disabled it
submit.val('Posting...').attr('disabled', 'disabled');
},
success: function(data){
// Append with fadeIn see http://stackoverflow.com/a/978731
var item = $(data).hide().fadeIn(800);
$('.comment-block').append(item);
// reset form and button
form.trigger('reset');
submit.val('Post Message').removeAttr('disabled');
},
error: function(e){
alert(e);
}
});
});
});
</script>
The Query
comment-insert.php
<?php
if (isset( $_SERVER['HTTP_X_REQUESTED_WITH'] )):
include_once 'include/dbconfig.php';
include_once 'include/dbconnection.php';
$conn = dbconnect();
if (!empty($_POST['comment'])) {
$Name = mysqli_real_escape_string($conn, $_POST['Name']);
$PageID = mysqli_real_escape_string($conn, $_POST['PageID']);
$ID = mysqli_real_escape_string($conn, $_POST['ID']);
$Comment = mysqli_real_escape_string($conn, $_POST['comment']);
$sql = "INSERT INTO comments
(PageID, PosterID, PosterName, PostDate, Comment)
VALUES
('$PageID', '$ID', '$Name', now(), '$Comment')";
mysqli_query($conn, $sql) or die("Error: ".mysqli_error($conn));
}
?>
<li><span class='comment'>
<span class='picture'>
<span><img src='users/images/<?php echo $_SESSION['Image'] ?>'></span>
</span>
<span class='content'><span class='title'><b><?php echo $Name ?></b>, Said:</span><br><?php echo $Comment ?></span>
<span class='clear'></span>
</span>
</li>
<?php
mysqli_close($conn);
endif?>

This works:
$(document).ready(function() {
//var form = $('#form');
//var submit = $('#submit');
$('#submit').on('click', function(e) {
e.preventDefault();
// the rest of your code goes here
})
});

Your jQuery event handler refers to an non-existent jQuery object. Try replacing the first line of the event handler with this:
form.on('submit', function(e) {

Hide button when no checkbox is checked and show button if Check All is clicked or one or more checkbox is clicked

I have a code here about hiding and showing the button whenever I checked or unchecked a checkbox. I made a two button with the same equivalent.
The first button will show if one or more checkbox was checked and hide when no checkbox was checked. But once I unchecked a checkbox the button will be hidden even there's still a checkbox that has been checked.
The second button will show if the All which means Check All was clicked and if None the button will be hidden.
So here's the problem:
When you checked a checkbox the button will show even you checked multiple checkbox the button is still there but once you unchecked a checkbox even there still checked checkbox the button will be hidden.
Another is when you clicked the All it will checked all the checkbox and a button will show even you unchecked a checkbox as long as there's still checked checkbox the button will stay but once you checked a checkbox another button shows up and two buttons will be there already.
Here's the code for the form with checkboxes:
<form id="drawing" action="" method="post">
<div id="sub_profile_cont">
<div class="sub_profile right">
<p class="sub_content_text" style='margin-left: 25px;'>
All | None
MISCELLANEOUS FEES:
</p>
<?php
if($pta_fee == $pta_fee_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'>
<input type='checkbox' value="<?php echo $pta_fee; ?>" disabled>
PTA Fee : ₱ <?php echo $pta_fee; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $pta_fee; ?>" id="required-checkbox1" onClick="CheckIfChecked(this.id)">
PTA Fee : ₱ <?php echo $pta_fee; ?></p>
<?php
}
if($maintenance_fee == $maintenance_fee_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'>
<input type='checkbox' value="<?php echo $maintenance_fee; ?>" disabled>
Maintenance Fee : ₱ <?php echo $maintenance_fee; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $maintenance_fee; ?>" id="required-checkbox2" onClick="CheckIfChecked(this.id)">
Maintenance Fee : ₱ <?php echo $maintenance_fee; ?></p>
<?php
}
if($id_school == $id_school_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'>
<input type='checkbox' value="<?php echo $id_school; ?>" disabled>
School ID : ₱ <?php echo $id_school; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $id_school; ?>" id="required-checkbox3" onClick="CheckIfChecked(this.id)">
School ID : ₱ <?php echo $id_school; ?></p>
<?php
}
if($electricity == $electricity_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'>
<input type='checkbox' value="<?php echo $electricity; ?>" disabled>
Electricity : ₱ <?php echo $electricity; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $electricity; ?>" id="required-checkbox4" onClick="CheckIfChecked(this.id)">
Electricity : ₱ <?php echo $electricity; ?></p>
<?php
}
?>
<div id="sub_profile_cont">
<div class="sub_profile left">
<p class="block_cont left">
<!--<input style="background: linear-gradient(rgb(20, 129, 191), rgb(13, 89, 160)); color: #ccc;" class="action_btn" type="button" id="pay_btn" value="COMPUTE" title="Select at least one" disable/>-->
<div id = "submit-button-container" style="display:none; "margin-bottom: -6px;"">
<input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>
</div>
<b style="display: none";>
<input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>
</b>
<!--<input class="action_btn" type="hidden" name="button" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>-->
</p>
</div>
</div>
</div>
</div>
</div>
</form>
Here's my script for the buttons:
This script is for checking checkbox one by one:
<script language="javascript">
function validate()
{
var chks = document.getElementsByName('draw[]');
var hasChecked = false;
for (var i = 0; i < chks.length; i++)
{
if (chks[i].checked)
{
hasChecked = true;
break;
}
}
if (hasChecked == false)
{
alert("Please select at least one.");
return false;
}
return true;
}
</script>
Here's the script for All checked all checkbox:
<script type="text/javascript">
function CheckIfChecked(id)
{
var CheckboxID = id;
var SubmitButtonContainerID = "submit-button-container";
if( document.getElementById(CheckboxID).checked ) { document.getElementById(SubmitButtonContainerID).style.display = "block"; }
else { document.getElementById(SubmitButtonContainerID).style.display = "none"; }
}
CheckIfChecked();
The output should be when I unchecked a checkbox, if one or more checkbox are still checked the button will stay. Another is if I clicked the All all checkbox will be checked but if I unchecked one checkbox and then checked it again onl

try this, but before you need to set jquery lib, for example like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<input type="checkbox">1
<input type="checkbox">2
<button style="display: none" id="one">one or more checked</button>
<button style="display: none" id="all">all checked</button>
<script>
$(function(){
$('[type=checkbox]').click(function ()
{
var checkedChbx = $('[type=checkbox]:checked');
if (checkedChbx.length > 0)
{
$('#one').show();
}
else
{
$('#one').hide();
}
if (checkedChbx.length == $('[type=checkbox]').length)
{
$('#all').show();
}
else
{
$('#all').hide();
}
});
});
</script>

Your Question is hard to understand,but i guess the following code will help you.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form id="drawing" action="" method="post">
<div id="sub_profile_cont">
<div class="sub_profile right">
<p class="sub_content_text" style='margin-left: 25px;'>
All | None
MISCELLANEOUS FEES:
</p>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="" id="required-checkbox1" onClick="CheckIfChecked()">
PTA Fee : ₱ </p>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="" id="required-checkbox2" onClick="CheckIfChecked()">
Maintenance Fee : ₱ </p>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="" id="required-checkbox3" onClick="CheckIfChecked()">
School ID : ₱</p>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="" id="required-checkbox4" onClick="CheckIfChecked()">
Electricity : ₱ </p>
<div id="sub_profile_cont">
<div class="sub_profile left">
<p class="block_cont left">
<!--<input style="background: linear-gradient(rgb(20, 129, 191), rgb(13, 89, 160)); color: #ccc;" class="action_btn" type="button" id="pay_btn" value="COMPUTE" title="Select at least one" disable/>-->
<div id = "first_button" style="display:none; "margin-bottom: -6px;"">
<input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>
</div>
<b style="display: none"; id="second_button">
<input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>
</b>
<!--<input class="action_btn" type="hidden" name="button" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>-->
</p>
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
function checkALL(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
chk_arr[k].checked = true;
}
CheckIfChecked();
}
function unCheckALL(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
chk_arr[k].checked = false;
}
CheckIfChecked();
}
function checkAny(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
if(chk_arr[k].checked==true){
return true;
}
}
return false;
}
function isCheckAll(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
if(chk_arr[k].checked==false){
return false;
}
}
return true;
}
function showFirstButton(){
document.getElementById('first_button').style.display = "block";
}
function hideFirstButton(){
document.getElementById('first_button').style.display = "none";
}
function showSecondButton(){
document.getElementById('second_button').style.display = "block";
}
function hideSecondButton(){
document.getElementById('second_button').style.display = "none";
}
function CheckIfChecked(){
checkAny() ? showFirstButton():hideFirstButton();
isCheckAll() ? showSecondButton():hideSecondButton();
}
</script>
</body>
</html>

How to pass a variable from a page to other in php

I have a page *book_order*,which is used to add orders into a table *order_management*, where order_id is auto incremented in that table. once after submit this page i want the order_id to be passed to other page *book_order2* to add products under same order_id. For that i have created seperete *order_management2* table in which order_id is not auto-incremented.
My requirement is that i want to pass order_id from book_order page to book_order2 page and that variable is to be remembered till i do keep on adding....if i want to add new order, i will go to book_order page, else i will use book_order2 page.
book_order.php
<div class="grid_4">
<div class="da-panel">
<div class="da-panel-header">
<span class="da-panel-title">
<img src="images/icons/color/wand.png" alt="" />
<font face="Cambria" size="7" color="#009900"><b>Book Order</b></font>
</span>
</div>
<div class="da-panel-toolbar top">
<ul>
<li><div class="da-button blue large">View all Orders</div></li>
</ul>
</div>
<div class="da-panel-content">
<?php
if(isset($_POST['submit']))
{
extract($_POST);
$order_date=date("Y-m-d");
$sql=mysql_query("select sku,quantity_in_stock,sold_quantity,crdate from stock_info where product_name = '$prod'");
$array=mysql_fetch_array($sql);
$sku = $array[0];
$qis = $array[1];
$sold_quan = $array[2];
$crdate = $array[3];
$sql2=mysql_query("INSERT INTO order_management(order_date,brand,product,price,customer_name,phone_number,email,address,quantity,channel,courier,order_status,sku)
VALUES
('$order_date','$brand','$prod','$pri','$customername','$phonenumber', '$email','$address','$quantity','$channel','$courier','booked','$sku')");
if($sql2)
{
echo "<div class='da-message success'>Successfully Booked Your Order</div>";
?>
<script>
var r = confirm("want to add more products?");
if (r == true)
{
//x="You pressed OK!";
window.location = "main.php?page=book_order2";
}
else
{
//x="You pressed Cancel!";
window.location = "main.php";
}
</script>
<?php
}
else
{
die(mysql_error());
}
$quantity_left = $qis - $quantity;
$sold_quan = $sold_quan + $quantity;
$diff_in_days = (strtotime($order_date) - strtotime($crdate))/(60 * 60 * 24);
$expctd_stock=round((7*$quantity_left)/$diff_in_days);
//echo $expctd_stock;
$sql3 =mysql_query("UPDATE stock_info SET quantity_in_stock = '$quantity_left',last_sold_date='$order_date', sold_quantity='$sold_quan', expected_stock='$expctd_stock' WHERE sku='$sku'");
/*$sql3 = mysql_query("update order_management set sku='$sku' where order_date=''");*/
$sql4 =mysql_query("select order_id from order_management where sku='$sku'");
$idarray=mysql_fetch_array($sql4);
$id = $idarray[0];
//$_SESSION['id'] = $id;
}
?>
<form id="da-ex-validate1" class="da-form" method="post" action="">
<div class="da-form-row">
<label>Brand<span class="required">*</span></label>
<div class="da-form-item small">
<!--<input type="text" name="brand" id="brand" class="required" value=""/>-->
<select name="brand" id="brand" onChange="retrievedata(this.value)">
<option value="">--- select brand ---</option>
<?php
$ord=mysql_query("select * from brand_info");
while($ord1=mysql_fetch_array($ord))
{
?>
<option value="<?php echo $ord1['brand'];?>"><?php echo $ord1['brand'];?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="da-form-row">
<label>Product<span class="required">*</span></label>
<div class="da-form-item small">
<select name="prod" id="prod" onChange="retrievequantity(this.value)">
<option value="">--- select product ---</option>
</select>
</div>
</div>
<div class="da-form-row">
<label>Customer name<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="customername" id="customername" class="required char" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Phone Number<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="phonenumber" id="phonenumber" class="required number" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Email<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="email" id="email" class="required email" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Address<span class="required">*</span></label>
<div class="da-form-item small">
<textarea name="address" id="address" class="required"></textarea>
</div>
</div>
<div class="da-form-row">
<label>Quantity<span class="required">*</span></label>
<div class="da-form-item small">
<select name="quantity" id="quantity">
<option value=""> --- select Quantity--- </option>
</select>
</div>
</div>
<div class="da-form-row">
<label>Total Price<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="pri" id="pri" class="required number" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Courier<span class="required"></span></label>
<div class="da-form-item small">
<!--<input type="text" name="courier" id="courier" class="required" value=""/>-->
<select name="courier" id="courier">
<option value=""> ---select courier --- </option>
<?php
$ord=mysql_query("select courier_name from courier_info");
while($ord1=mysql_fetch_array($ord))
{
?>
<option value="<?php echo $ord1['courier_name'];?>"><?php echo $ord1['courier_name'];?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="da-form-row">
<label>Channel<span class="required"></span></label>
<div class="da-form-item small">
<!--<input type="text" name="channel" id="channel" class="required" value=""/>-->
<select name="channel" id="channel">
<option value=""> --- select channel ---</option>
<?php
$ord=mysql_query("select channel from channel_info");
while($ord1=mysql_fetch_array($ord))
{
?>
<option value="<?php echo $ord1['channel'];?>"><?php echo $ord1['channel'];?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="da-button-row">
<input type="submit" name="submit" value="submit" class="da-button grey" />
</div>
</fieldset>
</form>
</div>
<!-- End of .grid_4 --> </div>
</div>
<script>
function retrievedata(data)
{
var option_html = "";
<?php
$sql=mysql_query("SELECT distinct brand,product_name FROM stock_info");
while($ord1=mysql_fetch_array($sql))
{
?>
if(data == '<?php echo $ord1['brand']; ?>')
{
option_html += "<option><?php echo $ord1['product_name']; ?></option>";
/*alert(option_html);*/
}
<?php
}
?>
var par = document.getElementById("prod");
par.innerHTML = "<option>--- select product ---</option>"+option_html;
}
function retrievequantity(product)
{
var option_quantity_html = "";
<?php
$sql=mysql_query("SELECT product_name, quantity_in_stock FROM stock_info");
while($ord2=mysql_fetch_array($sql))
{
$i=1;
?>
if(product == '<?php echo $ord2['product_name']; ?>')
{
<?php
while($i<=intval($ord2['quantity_in_stock'])){?>
option_quantity_html += "<option><?php echo $i++; ?></option>";
<?php }?>
}
<?php
}
?>
var par = document.getElementById("quantity");
par.innerHTML = option_quantity_html;
}
</script>
book_order2.php
<?php /*?><?php
$id = $_SESSION['id'];
echo $id;
?><?php */?>
<?php
include("includes/db.php");
?>
<div class="grid_4">
<div class="da-panel">
<div class="da-panel-header">
<span class="da-panel-title">
<img src="images/icons/color/wand.png" alt="" />
<font face="Cambria" size="7" color="#009900"><b>Book Order</b></font>
</span>
</div>
<div class="da-panel-toolbar top">
<ul>
<li><div class="da-button blue large">View all Orders</div></li>
</ul>
</div>
<div class="da-panel-content">
<?php
if(isset($_POST['submit']))
{
extract($_POST);
$order_date=date("Y-m-d");
$sql=mysql_query("select sku,quantity_in_stock,sold_quantity,crdate from stock_info where product_name = '$prod'");
$array=mysql_fetch_array($sql);
$sku = $array[0];
$qis = $array[1];
$sold_quan = $array[2];
$crdate = $array[3];
$sql2=mysql_query("INSERT INTO order_management2(order_id,order_date,brand,product,price,customer_name,phone_number,email,address,quantity,channel,courier,order_status,sku)
VALUES
('$id','$order_date','$brand','$prod','$pri','$customername','$phonenumber', '$email','$address','$quantity','$channel','$courier','booked','$sku')");
if($sql2)
{
echo "<div class='da-message success'>Successfully Booked Your Order</div>";
?>
<script>
var r = confirm("want to add more products?");
if (r == true)
{
//x="You pressed OK!";
window.location = "main.php?page=book_order2";
}
else
{
//x="You pressed Cancel!";
window.location = "main.php";
}
</script>
<?php
}
else
{
die(mysql_error());
}
$quantity_left = $qis - $quantity;
$sold_quan = $sold_quan + $quantity;
$diff_in_days = (strtotime($order_date) - strtotime($crdate))/(60 * 60 * 24);
$expctd_stock=round((7*$quantity_left)/$diff_in_days);
//echo $expctd_stock;
$sql3 =mysql_query("UPDATE stock_info SET quantity_in_stock = '$quantity_left',last_sold_date='$order_date', sold_quantity='$sold_quan', expected_stock='$expctd_stock' WHERE sku='$sku'");
/*$sql3 = mysql_query("update order_management set sku='$sku' where order_date=''");*/
//$sql4 =mysql_query("select order_id from order_management where sku='$sku'");
//$idarray=mysql_fetch_array($sql4);
}
?>
<form id="da-ex-validate1" class="da-form" method="post" action="">
<div class="da-form-row">
<label>Brand<span class="required">*</span></label>
<div class="da-form-item small">
<!--<input type="text" name="brand" id="brand" class="required" value=""/>-->
<select name="brand" id="brand" onChange="retrievedata(this.value)">
<option value="">--- select brand ---</option>
<?php
$ord=mysql_query("select * from brand_info");
while($ord1=mysql_fetch_array($ord))
{
?>
<option value="<?php echo $ord1['brand'];?>"><?php echo $ord1['brand'];?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="da-form-row">
<label>Product<span class="required">*</span></label>
<div class="da-form-item small">
<select name="prod" id="prod" onChange="retrievequantity(this.value)">
<option value="">--- select product ---</option>
</select>
</div>
</div>
<div class="da-form-row">
<label>Customer name<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="customername" id="customername" class="required char" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Phone Number<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="phonenumber" id="phonenumber" class="required number" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Email<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="email" id="email" class="required email" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Address<span class="required">*</span></label>
<div class="da-form-item small">
<textarea name="address" id="address" class="required"></textarea>
</div>
</div>
<div class="da-form-row">
<label>Quantity<span class="required">*</span></label>
<div class="da-form-item small">
<select name="quantity" id="quantity">
<option value=""> --- select Quantity--- </option>
</select>
</div>
</div>
<div class="da-form-row">
<label>Total Price<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="pri" id="pri" class="required number" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Courier<span class="required"></span></label>
<div class="da-form-item small">
<!--<input type="text" name="courier" id="courier" class="required" value=""/>-->
<select name="courier" id="courier">
<option value=""> ---select courier --- </option>
<?php
$ord=mysql_query("select courier_name from courier_info");
while($ord1=mysql_fetch_array($ord))
{
?>
<option value="<?php echo $ord1['courier_name'];?>"><?php echo $ord1['courier_name'];?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="da-form-row">
<label>Channel<span class="required"></span></label>
<div class="da-form-item small">
<!--<input type="text" name="channel" id="channel" class="required" value=""/>-->
<select name="channel" id="channel">
<option value=""> --- select channel ---</option>
<?php
$ord=mysql_query("select channel from channel_info");
while($ord1=mysql_fetch_array($ord))
{
?>
<option value="<?php echo $ord1['channel'];?>"><?php echo $ord1['channel'];?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="da-button-row">
<input type="submit" name="submit" value="submit" class="da-button grey" />
<?php /*?><a href="book_order2.php?&id=<?php echo $id; ?>" name="submit" value="submit" class="da-button grey">Book Order</a<?php */?>
</div>
</fieldset>
</form>
</div>
<!-- End of .grid_4 --> </div>
</div>
<script>
function retrievedata(data)
{
var option_html = "";
<?php
$sql=mysql_query("SELECT distinct brand,product_name FROM stock_info");
while($ord1=mysql_fetch_array($sql))
{
?>
if(data == '<?php echo $ord1['brand']; ?>')
{
option_html += "<option><?php echo $ord1['product_name']; ?></option>";
/*alert(option_html);*/
}
<?php
}
?>
var par = document.getElementById("prod");
par.innerHTML = "<option>--- select product ---</option>"+option_html;
}
function retrievequantity(product)
{
var option_quantity_html = "";
<?php
$sql=mysql_query("SELECT product_name, quantity_in_stock FROM stock_info");
while($ord2=mysql_fetch_array($sql))
{
$i=1;
?>
if(product == '<?php echo $ord2['product_name']; ?>')
{
<?php
while($i<=intval($ord2['quantity_in_stock'])){?>
option_quantity_html += "<option><?php echo $i++; ?></option>";
<?php }?>
}
<?php
}
?>
var par = document.getElementById("quantity");
par.innerHTML = option_quantity_html;
}
</script>

You can store the order number in the session. This way, it will be protected and persisted across pages.
When you insert the order in book_order.php, store it in the session:
$sql2=mysql_query(....); // inserting
if($sql2){
$_SESSION['order_id'] = mysql_insert_id();
}
Now, in book_order2.php you can retrieve the order ID before you do the insert of the product:
$id = $_SESSION['order_id'];
// insert product with order_id = $id
In order to use PHP sessions, you must calll session_start() at the beginning of any script that makes use of the session. If you have a global/header include then you can do it there.
Side notes:
mysql_* is deprecated. Consider upgrading to PDO or MySQLi. This is a good PDO tutorial, especially if you're upgrading from mysql_*.
Use a Prepared Statement with bound parameters instead of concatenating variables into SQL.

I would use ajax. For example:
$(document).ready(function()
{
$("form").on('submit',function(event)
{
event.preventDefault();
data = "var=data";
$.ajax
({
type: "GET",
url: "parser.php",
data: data
}).done(function(msg)
{
alert(msg);
});
});
});
It will send GET into parser.php. And the data field would be data in $_GET['var']

Develop Reference

JavaScript is the programming language of the Web.

How to get Specific Button ID when submitting a form? - javascript

Related

ajax removing everything after space

Change divs twice on different form submissions

AJAX: Form Submit to post comments

Hide button when no checkbox is checked and show button if Check All is clicked or one or more checkbox is clicked

How to pass a variable from a page to other in php

Categories

Resources