Develop Reference

How to dynamically sum multiple input records in a PHP while loop using java-script onfocusout

I'm using a way to calculate the value of this id id="salenag<?php echo $a; ?>"
multiple values which come from the database using PHP and then I'll add value into the input field the sum of all multiples input fields show in id no sale_nag.
I'm using for this a Javascript method but it did not work;
how it works correctly its use for point of sale to stock out. I want a solution. Please help me out.
<input type='text' value='0' id='sale_nag'>
<table>
<?php
$a =1;
while ($pro_row = mysqli_fetch_assoc($select_pro)) {
$rm = $pro_row['room'];
$ra = $pro_row['rack'];
$sal = $pro_row['sale_nag'];
$ma = $pro_row['marka'];
$cha = $pro_row['chalan'];
$pro_query2="SELECT *,SUM(sale_nag) AS snag FROM stockout_details WHERE marka='$ma' and chalan='$cha' and room='$rm' and rack='$ra'
";
$select_pro2 = mysqli_query($con, $pro_query2);
$pro_row2 = mysqli_fetch_assoc($select_pro2);
if ( $sal - $pro_row2['snag'] > 0) {
?>
<div class="form_grid_2 d-none" >
<input name="inv[]" required class="" value="<?php echo $inv_pro1 ; ?>" type="text"/>
<span class="label_intro ">inv #</span>
</div>
<div class="form_grid_2 d-none" >
<input name="purchi[]" required class="" value="<?php echo $id ; ?> " type="text"/>
<span class="label_intro ">Purchi #</span>
</div>
<div class="form_grid_2 d-none" >
<input name="invstockin[]" required class="" readonly value="<?php echo $pro_row['stockoutinv'];?>" type="text"/>
<span class="label_intro ">Inv#</span>
</div>
<div class="form_grid_2" >
<input name="marka[]" required class="" readonly value="<?php echo $ma = $pro_row['marka'];?>" type="text"/>
<span class="label_intro ">Marka #</span>
</div>
<div class="form_grid_2 " >
<input name="chalan[]" required class=" " readonly value="<?php echo $cha = $pro_row['chalan'];?>" type="text"/>
<span class="label_intro ">Chalan #</span>
</div>
<div class="form_grid_2 " >
<?php
?>
<input name="nag[]" class="" readonly value="<?php
echo $sal - $pro_row2['snag'] ;
?>" type="text"/>
<span class="label_intro ">NAG #</span>
</div>
<div class="form_grid_2 " >
<input name="outnag[]" id="salenag<?php echo $a; ?>" onfocusout="chachvalue(<?php echo $a; ?>);" class="" value="0" type="text"/>
<span class="label_intro ">Nag stock-out #</span>
</div>
<div class="form_grid_2 " >
<input name="room[]" required class="" readonly value="<?php echo $pro_row['room'];?>" type="text"/>
<span class="label_intro ">Room #</span>
</div>
<div class="form_grid_2 " >
<input name="rack[]" required class="" readonly value="<?php echo $pro_row['rack'];?>" type="text"/>
<span class="label_intro ">Rack #</span>
</div>
<script type="text/javascript">
function chachvalue(<?php echo $a;?>){
var x1 = document.getElementById('salenag<?php echo $a ;?>').value;
var x2 = document.getElementById('sale_nag').value;
var result = x1 + x2 ;
document.getElementById('sale_nag').value=result;
}
</script>
<?php
$a++; }
}
?>
</table>

Since your question is tagged jQuery, I'm assuming you can use it.
First, change your function to this:
function chachvalue(element) {
// get value of input that unfocused
var x1 = parseInt(element.val());
// select #sale_nag element
var sale_nag = $('#sale_nag');
// set value of sale_nag to sale_nag + x1
sale_nag.val(parseInt(sale_nag.val()) + x1);
}
Now, create a jQuery handler for your inputs
$('.outnag_input').on('focusout', function() {
chachvalue($(this));
});
Now your input element can be simplified to this
<input name="outnag[]" class="outnag_input" value="0" type="text"/>
You should also move the chachvalue() function AND the focusout handler to outside of the PHP loop.

PHP radiobutton on click event change

I have created the following code.
for some reason its skips my if event when the radiobutton changes.
the if statment is whitin a FORM i dont think this matters?
<p><?php echo $rijden[$lan][0];?></p><input type="radio" name="JA" id="waarde1" value="waarde1" onClick="gestuurdjanee();"><b>Ja</b> <input type="radio" name="JA" value="waarde0" id="waarde0" onClick="gestuurdjanee();" ><b>Nee</b></br>
<?php
function gestuurdjanee() {
if(document.getElementById("waarde0").checked == true) {
//nee?>
<p><?php echo $merk[$lan][0];?> <input type="text" name="merk"/></p>
<p><?php echo $totaalassen[$lan][0];?> <input type="text" name="totaalassen"/></p>
<p><?php echo $gestuurdenassen[$lan][0];?> <input type="text" name="gestuurdenassen"/></p>
<p><?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig2"/></p>
<p><?php echo $onstype[$lan][0];?> <input type="text" name="typebesturing"/></p>
<?php
}elseif(document.getElementById("waarde1").checked == true) {
//ja?>
<p><?php echo $typeconcurent[$lan][0];?> <input type="text" name="typetrailer"/></p>
<p><?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig"/></p>
<p><?php echo $merk[$lan][0];?> <input type="text" name="merk"/></p>
<p><?php echo $onstype[$lan][0];?> <input type="text" name="onstype"/></p>
<p><?php echo $gestuurdas[$lan][0];?> <input type="text" name="gestuurdas"/></p>
<?php
}
else {
// niksingevuld
?>
<?php echo"Vink een van de optie's aan"?>
<?php
}
}

Combining JS and PHP like that won't work. As been commented, the PHP will only run once on the server. When it's done, it shows the result in the browser. Then the Javascript will run.
Instead create three divisions with different classes.
Then bind an event on changing the input.
Also see the comments in my code:
$(function() {
$('.div1, .div2').hide(); // hide div1 and div2 on page load
$('[name=JA]').on('change', function() { // bind an onchange function to the inputs
if( $('[name=JA]:checked').val() == 'waarde1' ) { // get the value that is checked
$('.div1').show(); // show div1
$('.div2, .div3').hide(); // hide other divs
}
else {
$('.div2').show(); // show div2
$('.div1, .div3').hide(); // hide other divs
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<?php echo $rijden[$lan][0];?>
</p><input type="radio" name="JA" id="waarde1" value="waarde1"><b>Ja</b>
<input type="radio" name="JA" value="waarde0" id="waarde0"><b>Nee</b></br>
<div class="div1">
DIV1
<p>
<?php echo $merk[$lan][0];?> <input type="text" name="merk" /></p>
<p>
<?php echo $totaalassen[$lan][0];?> <input type="text" name="totaalassen" /></p>
<p>
<?php echo $gestuurdenassen[$lan][0];?> <input type="text" name="gestuurdenassen" /></p>
<p>
<?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig2" /></p>
<p>
<?php echo $onstype[$lan][0];?> <input type="text" name="typebesturing" /></p>
</div>
<div class="div2">
DIV2
<p>
<?php echo $typeconcurent[$lan][0];?> <input type="text" name="typetrailer" /></p>
<p>
<?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig" /></p>
<p>
<?php echo $merk[$lan][0];?> <input type="text" name="merk" /></p>
<p>
<?php echo $onstype[$lan][0];?> <input type="text" name="onstype" /></p>
<p>
<?php echo $gestuurdas[$lan][0];?> <input type="text" name="gestuurdas" /></p>
</div>
<div class="div3">Vink een van de optie's aan</div>

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 %}

Getting user inputs from HTML form

I want to be able to get the inputs that a user enters in my HTML form and be able to print them later on my website. I would love to be able to print all the user info with the selections they have made to there pizzas. I have been trying for the last few hours to do this and no luck :( Looking to get the date, first name, last name, address and phone.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Daves Pizza</title>
<link href="new.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="pizza.js"></script>
</head>
<body>
<div align="center">
<h5>Today is: <span id="dtfield"></span></h5>
</div>
<br>
<div align="center">
<h1>Dave's Pizza Place</h1>
</div>
<div align="center">
<div class="user">
<form id="contact_form" action="mailto: david.genge#edu.sait.ca" name="userInfo" method="POST" enctype="text">
<br>
<div>
<label for="datetime">Date:</label>
<input type="date" name="user_date" />
</div>
<div>
<label for="firstname">Firstname:</label>
<input type="text" pattern="[A-Za-z-']+" name="firstname" value="Firstname" maxlength="20"/>
</div>
<div>
<label for="lastname">Lastname:</label>
<input type="text" pattern="[A-Za-z-']+" name="lastname" placeholder="Lastname" maxlength="20"/>
</div>
<div>
<label for="mail">Address:</label>
<input type="text" name="user_mail" placeholder="Full Address"/>
</div>
<div>
<label for="tel">Phone#:</label>
<input type="tel" pattern="[0-9]+"" name="user_phone" placeholder="(403)123-1234"/>
</div>
</form>
</div>
</div>
<div align="center">
<div class="pizza">
<form name="costEstimation">
<table border="0">
<tr valign="middle">
<td>
<br>
<b>Choose Your Pizza Type<b><br>
<input type="radio" name="pizzasize" value="8" checked>Small $8<br>
<input type="radio" name="pizzasize" value="10">Medium $10<br>
<input type="radio" name="pizzasize" value="15">Large $15<br>
<input type="radio" name="pizzasize" value="18">Extra Large $18<br></td>
<td></td>
</tr>
<tr>
<td>
<b>Specialities<b><br>
<input type="radio" name="special" value="3">Super Cheesy $3<br>
<input type="radio" name="special" value="5">Extra Meaty $5<br>
<input type="radio" name="special" value="2">Really Veggie $2<br></td>
<td>
<b>Extra Toppings </b>
<br>
<input type="checkbox" name="cheese" value="1.5">Extra Cheese $1.50<br>
<input type="checkbox" name="pepperoni" value="1.5">Pepperoni $1.50<br>
<input type="checkbox" name="mushrooms" value="1.5">Mushrooms $1.50<br>
<input type="checkbox" name="bacon" value="1.5">Bacon $1.50<br>
<input type="checkbox" name="olives" value="1.5">Olives $1.50<br>
</td>
</tr>
</table>
</form>
<h2>Pizza Cost: </h2><h2><span id="result"></span></h2>
<input type=button value="Price Your Pizza" onClick="pizza(); return false;">
<button type="submit">Send your message</button>
<br><br><br>
<table>
<tr>
<td>
<figure>
<center>
<img src="cheese.jpg" alt="cheese" height="100" width="100">
</center>
</figure>
</td>
<td>
<figure>
<center>
<img src="veg.jpg" alt="veg" height="100" width="100">
</center>
</figure>
</td>
<td>
<figure>
<center>
<img src="meat.jpg" alt="meat" height="100" width="100">
</center>
</figure>
</td>
</tr>
</table>
</div>
<br>
<br>
<br>
</div>
</body>
</html>

You need to use form for saving the input values entered by user. you can do it by either GET or POST method. here is the sample demo with Validation:
<!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}
if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
// check if URL address syntax is valid (this regular expression also allows dashes in the URL)
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&##\/%?=~_|!:,.;]*[-a-z0-9+&##\/%=~_|]/i",$website)) {
$websiteErr = "Invalid URL";
}
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>PHP Form Validation Example</h2>
<p><span class="error">* required field.</span></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name" value="<?php echo $name;?>">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email" value="<?php echo $email;?>">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website" value="<?php echo $website;?>">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>
<br><br>
Gender:
<input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female
<input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>

you need to use any server side language to get input from user.
Use this statement
<form method="GET or POST" action="file_location/file_name(on which you want to get input)">
Php is very simple language you can learn it easly
i am giving you an example:
index.html
<form method="GET" action="localhost://getdata.php">
<input type="text" name="UserName" />
<input type="button" value="Submit" />
</form>
Focus on name tag i used in input statement "UserName" your data will be send by binding user input in it and then you can display data using php with this name as showing below
getdata.php
<?php
echo "$_GET['UserName']";
?>

if you want to get the data using javascript then,
HTML:
<input type="text" name="name" id="uniqueID" value="value" />
<span id="output"></span>
JS:
var nameValue = document.getElementById("uniqueID").value;
document.getElementById("output").innerHTML=nameValue;
will work for you !

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>