<!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
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>
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>
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??
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";
}
?>
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.