Here is my code, i set the Try it button to open again the dialog box, but it don't work!
In loading the page i want it closed, after i press Try it, then i want to open this dialog Box, PLZ HELP ME <3
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<button onclick="dialog">Try it</button>
<div id="dialog" title="Regjistro Window te ri">
<?php
// if there are any errors, display them
if ($error != '')
{
echo '<div style="padding:4px; border:1px solid red; color:red;">'.$error.'</div>';
}
?>
<center><span style="color: gray">Mbaj mend te dhenat!</span></center><br>
<form action="" method="post">
<center>
<table>
<tr>
<td>Emri:</td> <td><input type="text" size="15" name="uname" value="<?php echo $uname; ?>"/></td>
</tr>
<tr>
<td>Password:</td> <td><input type="text" size="15" name="password" value="<?php echo $password; ?>"/></td>
</tr>
<tr>
<td></td><td><input type="submit" name="submit" value=" Kalo "></td>
</tr>
</table>
<center>
</form>
</div>
Try this:Change the code of your button to:
<button id="theButton">Try it</button>
and your script to:
<script>
$(function() {
var theDialog=$( "#dialog" ).dialog({autoOpen:false});
$("#theButton").click(function(evt){
theDialog.dialog('open');
});
});
</script>
Related
What I'm trying to do is to use PHP to display the user inputs on a separate page, but when I process the form none of the input values display. I'm having to use javascript for input validation and that works fine but the PHP page is not working.
Here is my code:
HTML and Javascript
survey.php:
<!DOCTYPE html>
<html>
<head>
<title>Survey Page</title>
<link rel="stylesheet" type="text/css" href="mystylepage.css" />
<script type="text/javascript">
function validate()
{
if (document.information.name.value == "" )
{
alert("Please provide your name!" );
document.information.value.focus();
return false;
}
if (document.information.email.value == "")
{
alert("Please provide an email!");
document.information.value.focus();
return false;
}
if (document.information.major.value == false)
{
alert("Please enter your major");
document.information.value.focus();
return false;
}
return true;
}
</script>
</head>
<div id="bodycolor">
<body>
<div id="container">
<div id="menu">Menu:
<a class="menu" href="index.htm">Home</a> | <a class="menu"
`href="faculty.htm">Faculty</a> |
<a class="menu" href="courses.htm">
Courses</a> | <a class="gradecalculator" href="gradecalculator.htm">Grade
Calculator</a> | <a class="survey" href="survey.htm">Survey</a>
</div>
</div>
<div id="header">
<h1><center>CSE Center for Health Information Technology</center></h1>
<br>
<div id="links">
<center><a href="https://www.kennesaw.edu/"><img src="KSU Logo.jpg"
alt="Logo" style="width:100px;height:100px;" /></a></center>
<br>
<center><a href="http://ccse.kennesaw.edu/">College of Computing and
Software Engineering</a></center>
</div>
</div>
<h1>Please enter you information below</h1>
<form name="information" method="POST" action="action.php"
onsubmit="return
validate();">
<table width="500" border="0">
<tr>
<td width="150" bgcolor="#99CCFF"><strong>Name</strong></td>
<td><input type="text" name="name" size="20" maxlength="20" /></td>
</tr>
<tr>
<td bgcolor="#99CCFF"><strong>Email</strong></td>
<td><input type="text" name="email" size="20" maxlength="20" /></td>
</table>
<p> Major:
<input name="major" type="radio" value="Information Technology" />
Information Technology
<input name="major" type="radio" value="Software Engineering" />
Software Engineering
<input name="major" type="radio" value="Computer Science" />
Computer Science</p>
<p>
<input type="submit" value="Process" />
</p>
<p id="msg"></p>
</form>
</body>
</html>
Here is the PHP page:
action.php
<!DOCTYPE html>
<html>
<head>
<title>Survey Information Processing</title>
</head>
<body>
<h1>Form data</h1>
<p>Name: <?php echo $_POST["name"]?></p>
<p>Email: <?php echo $_POST["email"]?</p>
<p>Major: <?php echo $_POST["major"]?</p>
</body>
</html>
I'm totally new to PHP, so any help is greatly appreciated!
Your form method should be POST.
<form name="information" method="POST" action="action.php" onsubmit="return validate();">
And add a name to the submit button:
<input type="submit" value="Process" name="submit" />
Also, you could add this if condition:
<?php
echo "<pre>";
print_r($_POST); // Check if you're getting any POST data
echo "</pre>";
?>
<?php if (isset($_POST['name'])) { ?>
<h1>Form data</h1>
<p>Name: <?php echo $_POST["name"]; ?>
</p>
<p>Email: <?php echo $_POST["email"]; ?>
</p>
<p>Major: <?php echo $_POST["major"]; ?>
</p>
<?php } ?>
Hope this helps.
So the issue is your method is get but you're trying to access through post
Change
method="GET"
to
method="POST"
On your form.
when i am clicking on first textbox auto autocomplete function is working.but after inserting another textbox in script autocomplete function is not working.So please suggest me how to append autocomplete class in script.
html:
<form id="smart-form-register" class="smart-form client-form" method="post" enctype="multipart/form-data">
<fieldset>
<section>
<label class="input"> <i class="icon-append fa fa-user"></i>
<input type="text" name="product_name" placeholder="product Name">
<b class="tooltip tooltip-bottom-right">Needed to enter product Name</b> </label>
</section>
<section>
<table style="width:100%;">
<tr>
<th style="padding-bottom:10px;">Material Name</th>
<th style="padding-bottom:10px;">Material Quantity</th>
</tr>
<tr>
<td><input name="last[]" class="auto" id="last[0]" size="40"></td>
<td><input name="first[]" id="first[0]" size="40"></td>
</tr>
</table>
</section>
<section>
<span class="glyphicon glyphicon-plus" style="margin-left:580px;" value="Add" onclick="insert()"></span>
</section>
</fieldset>
<input type="submit" name="submit" value="Register" class="btn btn-primary">
</form>
script:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
//autocomplete
$(".auto").autocomplete({
source: "search1.php",
minLength: 1
});
});
</script>
<script>
var i=0
var j=0
function insert()
{
last=document.getElementById("last["+i+"]")
i++
first=document.getElementById("first["+j+"]")
j++
last.insertAdjacentHTML("AfterEnd", '<br><input class="auto" name="last[]" id="last['+i+']" size="40">')
first.insertAdjacentHTML("AfterEnd", '<br><input name="first[]" id="first['+j+']" size="40"<br>')
}
</script>
just you call autocomplete script function after insert new row.
Add this function "autocomplete()" to end of "insertAdjacentHTML()"
<script>
var i=0
var j=0
function insert()
{
last=document.getElementById("last["+i+"]")
i++
first=document.getElementById("first["+j+"]")
j++
last.insertAdjacentHTML("AfterEnd", '<br><input class="auto" name="last[]" id="last['+i+']" size="40">').autocomplete();
first.insertAdjacentHTML("AfterEnd", '<br><input name="first[]" id="first['+j+']" size="40"<br>').autocomplete();
}
</script>
I have an issue with my toggleElement function, it will not change the style to block and then none. I don't know if I coded the function wrong or if I'm not calling it correctly.
Any feedback would be great!!
Thanks
<link href="chat.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.js" ></script>
<script type="text/javascript" src="chat.js" ></script>
<title>Chat Room | BetterGamerzUnited</title>
<script>
function toggleElement(x){
var x = document.getElementById(x);
if(x.style.display == 'block'){
x.style.display = 'none';
}else{
x.style.display = 'block';
}
}
</script>
</head>
<?php include $path . '/includes/header.php'; ?>
<div id="colorpickerB" style='display:none;'>
<div id="colorpicker">
<img src="/members/chat/palette.png" id="palette" alt="Color Palette" border="1"/>
<br />
<input id="color" type="hidden" readonly="true" value="#000000" />
</div>
</div>
<table id="content">
<tr id="chat-top">
<td>
<div id="scroll">
</div>
</td>
</tr>
<tr id="chat-btm">
<td colspan="2">
<div id="items">
<input type="text" class="" id="messageBox" placeholder="Enter your message here" maxlength="2000" size="30" />
</div>
<div id="color">
<button type="button" id="sampleText" class="chat-btn" onclick="toggleElement(colorpickerB);">
Color
</button>
</div>
<input type="hidden" class="" id="userName" value="<?php echo $log_username; ?>" maxlength="20"/>
<input type="button" class="chat-btn" value="Send" id="send" />
<?php
if ($user_ok === true) {
if (($log_userlevel == '7') || ($log_userlevel == '8')) {
echo '<input type="button" class="chat-btn" value="Delete All" id="delete" />';
}
}
?>
</td>
</tr>
</table>
</div>
<footer></footer>
</body>
</html>
You don't seem to have ever defined colorpickerB before calling toggleElement(colorpickerB);. Perhaps you meant to pass in the string 'colorpickerB' instead of an identifier:
toggleElement('colorpickerB');
i am using tow pagge one is parent page and other is child window page for pass the radio button value from child window page to parent page but i have getting error undefined in parent page text fields...
parent page
<form method="post" action="" name="f1">
<table border=0 width=550>
<tr>
<td>
Your Name
<input id="OPRID" name="OPRID" type="text" value="<?php echo (isset($_POST
['OPRID']) ? $_POST['OPRID'] : ""); ?>" />
<a href="javascript:void(0);" name="My Window Name" title=" My title here "
onClick="window.open
('popwindow.php','Ratting','width=650,height=550,0,status=0,scrollbars=1');" />
Click here to open the child window
</a>
</td>
</tr>
</table>
</form>
**child window page**
<html>
<head>
<script langauge="javascript">
function post_value(){
opener.document.f1.OPRID.value = document.frm.OPRID.value;
self.close();
}
</script>
<form name="frm" method="post" action=''>
<tr>
<td><div align="center">
<input type="radio" name="OPRID" id="radio" value="<?php echo $objResult ["OPRID"];?
>" /></div></td>
<td><div align="center"><?=$objResult["OPRID"];?></td>
<td><div align="center"><?=$objResult["OPRDEFNDESC"];?></td>
</tr>
<?
}
?>
</table>
<br />
<tr>
<td><div align="center"> <input type="button" value='Submit' onclick="post_value();"> </div>
</td>
</tr>
</form>
but in text fields i have getting undefined error.
What you are trying to achieve can be done with using HTML5 sessionStorage feature.
Check this link: http://playground.html5rocks.com/#sessionstorage
use this
window.opener.document.f1.OPRID.value = document.frm.OPRID.value;
instead of this
opener.document.f1.OPRID.value = document.frm.OPRID.value;
hope this helps...
I asked this question earlier, but asked without the proper info, here it goes again. What i need to happen is for the cancel button "list_btn_cancel" to close the popup activity and to replace what was imputed with the inputs placeholder.
This table is the input.
<table width="100%" style="line-height:0px" >
<tr>
<td><p>1.</p></td>
<td><input name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button >" /></td>
<td><input type="button" id="thoughts_1" class="list_btn ext_thoughts" value="List >" /></td>
</tr>
</table>
**this table is the popup**
<div id="popup_activity" class="box_list">
<div id="list_question_btn"></div></div>
</div>
<div id="activity_area_content" style="padding-bottom:5px;" >
<form name="form1">
<table class="style2" width="100%">
<tr><br />
<td width="8%" align="right"><input name="thoughts_list" id="thoughts_list_0" class="thoughts_list" type="radio" value="It is just terrible that my child will not be a normal kid" /></td>
</table>
</form>
</div>
</div>
<div><table><td><a style="margin-left:290px" onclick="closeDialog('popup_activity');"><input type="button" id="thoughts_cancel" class="list_btn list_btn_cancel" value="Cancel >" placeholder="Type or click list button >" /></a></td> <td><a onclick="closeDialog('popup_activity');"><input style="margin-left:10px" type="button" id="close_thoughts" class="list_btn list_btn_close" value="Close >" /></a></td></table></div></div>
**Here is the script**
$('.list_btn').button();
$('#popup_activity').css("display","none");
$('#list_help').css("display","none");
$('.ext_thoughts').click(function(){
openDialog('popup_activity');
btn_id= $(this).attr('id');
});
$('.thoughts_list').click(function(){
( $(this).attr('id'));
$("#activities_" +btn_id).val($(this).val());
});
Okay don't quite understand what you want but here is what i think you want:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$('.ext_thoughts').click(function(){
$("#popup_activity").toggle();
});
$('.list_btn_cancel').click(function(){
$("#popup_activity").hide();
$("#activities_thoughts_1").val('');
});
});
</script>
</head>
<body>
<input name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button " />
<br>
<input type="button" id="thoughts_1" class="list_btn ext_thoughts" value="Show/Hide List" />
<input type="button" id="thoughts_cancel" class="list_btn list_btn_cancel" value="Cancel" />
<br>
<div id="popup_activity" class="box_list" style="display:none;">
This is the pop up division
</div>
</body>
</html>
FIDDLE HERE
It's hard to figure out exactly what you're trying to do from your question but if all you want is for the text input to revert to its placeholder text simply set its value to blank.
$("#activities_thoughts_1").val('');
Here's an example http://jsfiddle.net/arG5f/