How to hide multiple buttons using loop in javascript on page load - javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function hide_input_items()
{
var inputs=document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].type=='text')
{
inputs[i].disabled=1;
}
}
var updates = document.getElementById('update');
var cancels = document.getElementById('cancel');
for(var j=1;j<up;j++)
{
updates[j].style.visibility = "hidden";
cancels[j].style.visibility = "hidden";
}
}
</script>
</head>
<body>
<?php
$counter=0;
for($i=1;$i<10;$i++)
{
$counter++;
$name= "name".$counter;
$update="update".$counter;
$cancel="cancel".$counter;
$edit= "edit".$counter;
?>
<input type="text" name="name" id="name" id="<?php echo $name;?>" value="hi" />
<input type="button" name="edit" id="name" id="<?php echo $edit;?>" value="Edit" onclick="focuse('<?php //echo $id.",".$update.",".$cancel.",".$edit;?>')"/>
<input type="button" name="update" id="name" id="<?php echo $update;?>" value="Update" onclick="display('<?php //echo $cancel;?>');"/>
<input type="button" name="cancel" id="name" id="<?php echo $cancel;?>" value="Cancel" onclick="show()"/>
<br />
<?php
}?>
<input type="button" name="button" onclick="hide_all();" value="Hide all" />
</body>
</html>
I want to hide update and cancel button on page load but it does not working when i add second loop in page load function then then upper loop is also disable.Here above is my complete code please do give some suggestion if do you have. Thanks.

Related

Strange behaviour when submitting a form

I am testing a code sample that pass a value from php to JavaScript in order to test the form value.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page 1</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form method="post" action="essai.php">
<input type="text" name="mail" id="mail" placeholder="mail"/><br />
<input type="submit" value="Validate" />
</form>
<?php
if (isset($_POST['mail'])){
$data=789;
}
?>
<script>
var data = <?php echo json_encode($data); ?>;
$(function(){
$("form").on("submit", function() {
if($("#mail").val().length < 4) {
alert(data);
return false;
}
});
});
</script>
</body>
</html>
So it suppose to pop up a message (789) when the input is less than 4 caracters.
When I enter one letter in the form, then directly press enter the pop up appears.
But, when I fill the form (still with one letter), click somewhere else on the page, and then click validate, the pop up does not appears.
I can't see why there is this behaviour, maybe the fact that I click somewhere else on the page, undo the JavaScript action, but why ?
Someone has an explanation ?
Thank you
Change your HTML to this
<form method="post" action="essai.php">
<input type="text" name="mail" id="mail" placeholder="mail"/><br />
<input type="submit" name="submit" value="Validate" />
</form>
And PHP to this
<?php
if (isset($_POST['submit'])){
$data=789;
}
?>
JS
<script>
var data = <?php echo json_encode($data); ?>;
$(function(){
$("form").on("submit", function() {
if($("#mail").val().length < 4) {
alert(data);
return false;
}
else { $(this.form).submit(); }
});
});
</script>

How to set the "disabled" button back to "enabled" thru PHP?

I have two buttons like "Save" and "Create". Now my question is when the page is loaded, the "Create" button should "enabled" and the "Save" button is "disabled".
Now, if I click the "Create" button then the "Save" button should be "enabled" and "Create" button should now be "disabled".
//php code start
<?php
$isSaveDisabled = false;
if(isset($_POST['save']))
{
echo 'Hello robin';
$isSaveDisabled = true;
}
if(isset($_POST['create']))
{
echo 'Byeeee robin';
}
?>
// php code ends
//bootstrap code start
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="BootStrap/css/bootstrap.min.css">
<title></title>
</head>
<body >
<div class="container jumbotron">
<form action="" method="post">
<div class="btn-group-xs">
<button type="submit" id="btn1" name="save" <?php if ($isSaveDisabled) { echo 'disabled="disabled"';}?>>Save</button>
<button type="submit" id="btn2" name="create">Create</button>
</div>
</form>
</div>
</body>
</html>
//bootstrap code ends
Try it..
//php code start
<?php
$isSaveDisabled = true;
$isCreateDisabled=false;
if(isset($_POST['save']))
{
echo 'Hello robin';
$isCreateDisabled=false;
}
if(isset($_POST['create']))
{
echo 'Byeeee robin';
$isSaveDisabled = false;
}
?>
// php code ends
//bootstrap code start
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="BootStrap/css/bootstrap.min.css">
<title></title>
</head>
<body >
<div class="container jumbotron">
<form action="" method="post">
<div class="btn-group-xs">
<button type="submit" id="btn1" name="save" <?php echo $isSaveDisabled?'disabled':''; ?>>Save</button>
<button type="submit" id="btn2" name="create" <?php echo $isCreateDisabled?'disabled':'';?>>Create</button>
</div>
</form>
</div>
</body>
</html>
//bootstrap code ends
It can be done using jQuery.
Try this:
$(document).on('click','#btn2',function(){
$(this).prop('disabled',true);
$('#btn1').prop('disabled',false);
});
Include this in your HTML
<script>
$(document).on('click','#btn2',function(){
$("#btn2").prop('disabled',true);
$("#btn1").prop('disabled',false);
});
</script>
Also, include jQuery in you html.
use a if to test if the page was submitted with create to disable create
<div class="btn-group-xs">
<?php $create,$save = ''; if(isset($_POST['create'])) {$create = 'disabled';} else {$save = 'disabled';}?>
<button type="submit" id="btn1" name="save" <?php $save?>>Save</button>
<button type="submit" id="btn2" value="create" name="create" <?php $save?> >Create</button>
</div>

update mysql with javascript function

I'm trying to update my mysql table with the name of the winner in a simple raffle. the raffle works great, but I have been unable to get the name of the winner to update once is picked.
index.php
<?php include_once('connect.php'); //connect db ?>
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Raffle drawing</title>
<meta name="Author" content="Kyle Banerjee" />
<meta name="keywords" content="raffle drawing prizes" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link title="new" rel="stylesheet" href="includes/default.css" TYPE="text/css" />
<script language='javascript' src="includes/raffle.js"></script>
</head>
<body>
<center>
<div><h1>And the winner is</h1></div>
</center>
<p />
<center>
<table><tr><td>
<div id='results'>
</div>
</td></tr></table>
<div id="show">
<a class="blue" onClick="hideNames(); return false;">Hide names in box</a>
</div>
<p /> <p />
</center>
</h1>
<center><form name="f" onSubmit="processForm(document.f); return false;">
<input type="submit" value="Find the Winner!"><p />
<div id="names">
<textarea name="userinput" style="display:none" rows="50" cols="50">
<?php
$query = "select * from member where status=0";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result)){
echo $row['name'] . "\n" ;
}
?>
</textarea>
</div>
</form></center>
</body>
</html>
JS
var milisec=0;
var seconds=0;
var minutes=0;
var winner = '';
var contestants=[];
function processForm(obj_f) {
seconds = 70;
contestants = obj_f.userinput.value.split("\n");
findWinner();
}
function winnerIs() {
document.getElementById('results').innerHTML='<p /><winner>' + contestants[Math.floor(Math.random()*contestants.length)] + '</winner>';
//savedata();
}
function findWinner(){
var x=0;
if (milisec<=0){
milisec=9
seconds-=1
}
if (seconds<=-1){
milisec=0
}
if(seconds <= 0){
clearTimeout();
// keep trying if a black line is retrieved. Give up after 100 tries;
winner = contestants[Math.floor(Math.random()*contestants.length)];
while (winner.length < 2) {
winner = contestants[Math.floor(Math.random()*contestants.length)];
x++;
if (x > 100) {break;}
}
document.getElementById('results').innerHTML='<div id="final"><winner>' + winner + '!</winner></div>';
} else {
winnerIs();
setTimeout("findWinner()",10)
milisec-=1
}
}
function hideNames() {
document.getElementById('names').style.visibility='hidden';
document.getElementById('show').innerHTML='<a class="blue" onClick="showNames(); return false;">Show names in box</a>';
}
function showNames() {
document.getElementById('names').style.visibility='visible';
document.getElementById('show').innerHTML='<a class="blue" onClick="hideNames(); return false;">Hide names in box</a>';
}
function savedata() {
}
any ideas on how I can get it to update to db set status=1 where name = winner??

javascript function to allow to add only 12 characters

I have a php code with javascript function. the script is having "Add more" button, if we click on this button it will add one more row having 2 text box named "Pront ID:" and "Pronto Title:". the script is working fine. but i need the script that it should allow me to enter exact 12 characters to "Pronto ID" field. if it's more than/less than 12 characters, it should echo message to add exact 12 characters.
in HTML code we can use "pattern="\w{12}" title="Enter 12 characters" " line to echo "Enter 12 characters" but i need this in inside javascript function"add".
Please help me on this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.del').live('click',function(){
$(this).parent().parent().remove();
});
$('.add').live('click',function(){
var i = 1;
var appendTxt = "<tr><td>Pront ID:</td><td><input type='text' name='input_box_one[]' pattern='\w{12}' title='Enter 12 characters'></td><td>Pronto Title:</td> <td><input type='text' name='input_box_two[]' /></td> <td><input type='button' class='del' value='Delete' /></td></tr>";
$("tr:last").before(appendTxt);
var inputs = document.getElementsByTagName('input').length;
//alert(inputs);
if(inputs == 18){
document.getElementById("countButton").disabled = true;
}
$i++
});
});
</script>
</head>
<body>
<form name="form1" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table id="options-table">
<tr>
<td>Pront ID:</td><td><input type="text" name="input_box_one[]" pattern="\w{12}" title="Enter 12 characters" /></td>
<td>Pronto Title:</td><td><input type="text" name="input_box_two[]" /></td>
<td><input type="button" class='del' value='Delete' /></td>
<input type="hidden" name="count" value="<?php $i; ?>">
</tr>
<?php
echo "<tr><td><input id=\"countButton\" type=\"button\" class=\"add\" value=\"Add More\"/></td><td><input type=\"submit\" name=\"submit\" value=\"submit\"></td></tr>";
?>
</table>
</form>
</body>
</html>
<?php
foreach ($_POST['input_box_one'] as $v) {
echo $v;
echo "\n";
}
foreach ($_POST['input_box_two'] as $p) {
echo $p . "\n";
}
?>

How to get the rows value in php as all rows name is same?

Please find the below code to add new rows as well as delete row button. using that script we can enable only 5 rows after that "Add More" button automatically disable. Now the problem is, if I click on submit button php page should print all rows values. but I am not able to print all rows values as all rows name are same (input_box_one[] and input_box_two[] ). hence I am not able to get all rows.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.del').live('click',function(){
$(this).parent().parent().remove();
});
$('.add').live('click',function(){
var i = 1;
var appendTxt = "<tr><td>Pront ID:</td><td><input type='text' name='input_box_one[]' /></td><td>Pronto Title:</td> <td><input type='text' name='input_box_two[]' /></td> <td><input type='button' class='del' value='Delete' /></td></tr>";
$("tr:last").before(appendTxt);
var inputs = document.getElementsByTagName('input').length;
if(inputs == 17){
document.getElementById("countButton").disabled = true;
}
$i++
});
});
</script>
</head>
<body>
<form name="form1" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table id="options-table">
<tr>
<td>Pront ID:</td><td><input type="text" name="input_box_one[]" /></td>
<td>Pronto Title:</td><td><input type="text" name="input_box_two[]" /></td>
<td><input type="button" class='del' value='Delete' /></td>
<input type="hidden" name="count" value="<?php $i; ?>">
</tr>
<?php
echo "<tr><td><input id=\"countButton\" type=\"button\" class=\"add\" value=\"Add More\"/></td><td><input type=\"submit\" name=\"submit\" value=\"submit\"></td></tr>";
?>
</table>
</form>
</body>
</html>
Could anyone please help on this.
thanks in advance.
Editing the question:
Hi,
In the script i need to enter Pronto ID exactly 12 character. if it's less/more than 12 it should echo the message to enter 12 character. what code should i add to this line? please help me.
var appendTxt = "<tr><td>Pront ID:</td><td><input type='text' name='input_box_one[]' /></td><td>Pronto Title:</td> <td><input type='text' name='input_box_two[]' /></td> <td><input type='button' class='del' value='Delete' /></td></tr>";
foreach ($_POST['input_box_one'] as $v) {
echo $v . '<--- i am your value<br>';
}
Result
------
inputboxvalue1
inputboxvalue2
inputboxvalue3
etc....
print the $_POST varaible on php page like
<?php print_r($_POST); ?>
Than you will get the idea of posted inputs.afterword you have use the foreach method.

Categories