Having an issue with JavaScript Toggle function - javascript

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');

Related

Warning: Cannot modify header information - headers already sent by (output started at /home/cabox/workspace/Project/ShoppingCart

Having difficulty identifying what is throwing the error. Have removed all white space. Using CodeAnywhere as my IDE as it is a requirement for me. Any help would be appreciated.
Full error:
Warning: Cannot modify header information - headers already sent by (output started at /home/cabox/workspace/Project/ShoppingCart.php:134) in /home/cabox/workspace/Project/ShoppingCart.php on line 169
Code:
<?php
session_start();
$connect = mysqli_connect("localhost", "root", "", "lab"); //connect to the db
if(isset($_POST["add_to_cart"])) //if the add to cart value is set
{
if(isset($_SESSION["shopping_cart"])) //if the shopping cart session is set
{
$item_array_id = array_column($_SESSION["shopping_cart"], "item_id");
//if there are values in your shopping cart loop through and display them
if(!in_array($_GET["id"], $item_array_id))
{
$count = count($_SESSION["shopping_cart"]);
$item_array = array(
'item_id' => $_GET["id"],
'item_name' => $_POST["hidden_name"],
'item_price' => $_POST["hidden_price"],
'item_quantity' => $_POST["quantity"]
);
$_SESSION["shopping_cart"][$count] = $item_array;
}
else
{
echo '<script>alert("Item Already Added")</script>';
//restriction on design - can only add one instance of each product, delete if you want to add more
}
}
else
{
$item_array = array(
'item_id' => $_GET["id"],
'item_name' => $_POST["hidden_name"],
'item_price' => $_POST["hidden_price"],
'item_quantity' => $_POST["quantity"]
);
$_SESSION["shopping_cart"][0] = $item_array;
}
}
if(isset($_GET["action"]))
{
if($_GET["action"] == "delete")
//when you select 'Remove', delete the values based on id. Alert box will show on completition
{
foreach($_SESSION["shopping_cart"] as $keys => $values)
{
if($values["item_id"] == $_GET["id"])
{
unset($_SESSION["shopping_cart"][$keys]);
echo '<script>alert("Item has been removed from Shopping Cart")</script>';
echo '<script>window.location="ShoppingCart.php"</script>';
}
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.-->
<link rel="stylesheet" type="text/css" href="thePerfectPair.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</head>
<body>
<nav class="navigationBar">
<!--Establishing the top left hand side of the Navigation Bar-->
<div class="leftTopNavBar">
€ EUR |
<!--The following produces a pop up sign up form that is validated through javascript functions in the following code.
I implemented this pop up form to create a different design element as opposed to just referring users to another page.
All design element are assigned in the css file and it involved calling many different classes in order not to conflict
with other forms and input boxes contained in the website-->
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;" class="SignUpBtn0">SIGN UP |</button>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<form class="modal-content" action="/action_page.php">
<div class="container1">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account with Perfect Pair!</p>
<hr>
<b>Email</b>
<input type="text" placeholder="Enter Email" name="email" required>
<b>Password</b>
<input type="password" placeholder="Enter Password" name="psw" required>
<b>Repeat Password</b>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me</label>
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
SAVED ITEMS
</div>
<!--Establishing the right side of the navBar-->
<div class="rightTopNavBar">
<input type="search" placeholder="Search..." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
LOGIN | CART
<i class="fa fa-shopping-cart" style="font-size:20px"></i>
</div>
<!--Establishing the middle of the navBar-->
<div class="middleTopNavBar">
<img src="Images/perfectPairLogo.png" class="logoHeader" alt="logo" width="100" height="100">
</div>
<!--Establishing bottom navBar-->
<div class="bottomNavBar">
<i class="fa fa-home" style="font-size:36px"> </i>
 HEELS 
 SANDALS 
 BOOTS 
 TRAINERS 
 FLATS 
 SHOPPING CART </div></nav>
<div class="container">
<br><?php $query="SELECT*FROM tbl_product1 ORDER BY id ASC"; $result=mysqli_query($connect, $query); if(mysqli_num_rows($result)>0){while($row=mysqli_fetch_array($result)){?><div class="col-md-4">
<form method="post" class="phpForm" action="ShoppingCart.php?action=add&id=<?php echo $row["id"];?>" >
<div class="formStyleDiv" style=" background-color:#f1f1f1; border-radius:1px; padding:16px; width:25%;" align="center">
<img src="Images/<?php echo $row["image"];?>" class="img-responsive" style="height: 200px;" />
<h4 class="text-info"><?php echo $row["name"];?></h4><br />
<h4 class="text-danger">€<?php echo $row["price"];?></h4>
<input type="text" name="quantity" value="1" class="form-control" />
<input type="hidden" name="hidden_name" value="<?php echo $row["name"];?>" />
<input type="hidden" name="hidden_price" value="<?php echo $row["price"];?>" />
<input type="submit" name="add_to_cart" style="margin-top:5px;" class="submitBtn" class="btn btn-success" value="Add to Cart" /></div>
</form>
</div><?php
}
}
?><div style="clear:both"></div>
<br />
<h3>Order Details</h3>
<div class="table-responsive" >
<table>
<tr>
<th width="40%" align="left">Item Name</th>
<th width="10%" align="left">Quantity</th>
<th width="20%" align="left">Price</th>
<th width="15%" align="left">Total</th>
<th width="5%" align="left">Action</th>
</tr><?php if(!empty($_SESSION["shopping_cart"])) { $total = 0; foreach($_SESSION["shopping_cart"] as $keys => $values){?><tr>
<td><?php echo $values["item_name"];?></td>
<td><?php echo $values["item_quantity"];?></td>
<td>€<?php echo $values["item_price"];?></td>
<td>€<?php echo number_format($values["item_quantity"] * $values["item_price"], 2);?></td>
<td><span class="text-danger">Remove</span></td>
</tr><?php $total = $total + ($values["item_quantity"] * $values["item_price"]);}?><tr>
<td colspan="3" align="right">Total</td>
<td align="right">€<?php echo number_format($total, 2); ?></td>
<td></td>
</tr><?php $cookie_name="Total"; setcookie($cookie_name, $total, time()+(86400*30),"/");}?></table></div>
<input type="button" class="submitFormBtn" name="submit" value= "Submit" onclick="window.open ('success.php','_self',false)" /><br />
</div>
</div>
<br />
</body>
</html>

Use PHP to display user inputs

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.

how can i append auto search class in script

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>

how to display some part of html data in the jQuery dialog

Please help me, I have tried a lot of search but useless.
<div class="articleWraper">
<div id="demo2">
<?php
$sSql='SELECT * FROM tbl_images';
$result=mysql_query($sSql);
?>
<ul id="slider3">
<?php while($row=mysql_fetch_assoc($result)){?>
<li class="panel1">
<div class="caption-bottom"><?php echo $row['line1_desc'];?><br/><?php echo $row['line2_desc'];?></div>
<img src="../propertyImages/<?php echo $row['image'] ?>" /><br />
</li>
<?php }?>
</ul>
</div>
<div class="mpCaptionRow">
<input id="createLink" class="createLink" type="submit" name="submit" value="Yes, I'm Interested" />
</div>
</div>
The above code is for a button and a manual slider. The slider contains pictures and a panel for picture description which are getting from database. I want when the user clicks on button and jQuery dialog appears then some part of description containing slider panel will be show in the jQuery dialog. My jQuery dialog code is as follows:
<head>
<link href="Content/main.css" rel="stylesheet" type="text/css" />
<link href="Content/blitzer/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<link rel="stylesheet" href="Content/page.css" />
<link rel="stylesheet" href="Content/anythingslider.css" />
<script src="Scripts/jquery-2.0.3.min.js"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="Scripts/jquery.anythingslider.js"></script>
<script src="Scripts/jquery.anythingslider.fx.js"></script>
<script src="Scripts/demo.js"></script>
<script type="text/javascript" src="Scripts/jqxmaskedinput.js"></script>
<script type="text/javascript" src="Scripts/jquery.timepicker.js"></script>
<script>
$(document).ready(function(){
$("#createLink").click(function (event) {
event.preventDefault();
$("#mpDialog").dialog(
{
title: "I want to be a future homeowner",
width: 520,
modal: true,
position: {
at: "top",
my: "bottom",
of: "#createLink"
}
}
);
});
$("#mpDialog").hide();
});
</script>
</head>
<body>
<div class="dialogSec" id="mpDialog">
<form id="createProductForm" name="myForm" action="futureHomeowner.php" method="post" enctype="multipart/form-data">
<div id="productDetails">
<div id="basicInfo">
<p style="text-align: center">Hey Mike and Juan<br />
I am interested in learning more about the property at:
<br />
**I want the panel description here**
<br />
and specifically how your program works to allow me to become a homeowner.</p>
<div class="fieldControl">
<label style="margin-right: 25px">First Name </label>
<input id="fname" type="text" class="textBox" name="fname" style="width: 350px" />
<div id="fname_error"></div>
</div>
<div class="fieldControl">
<label style="margin-right: 25px">Last Name </label>
<input id="lname" type="text" class="textBox" name="lname" style="width: 350px" />
<div id="lname_error"></div>
</div>
<div class="fieldControl">
<label>Email Address </label>
<input id="email" type="text" name="email" class="textBox" style="width: 350px" />
<div id="email_error"></div>
</div>
<div class="fieldControl">
<label>Phone No. </label>
<input id="phoneNo" type="text" name="phoneNo" class="textBox" style="width: 350px" />
</div>
<div class="fieldControl">
<p>Please answer the questions below and we will be in touch.</p>
<p style="text-align: left;"><b>What is the best time to call you to discuss?</b></p>
From <input id="timeformat1" name="timeFrom" type="text" class="textBox" style="width: 205px" placeholder="Time from" /> To <input id="timeformat2" placeholder="Time to" name="timeTo" type="text" class="textBox" style="width: 205px" />
<p style="text-align: left;"><b>Also, do you have any other comments?</b></p>
<textarea name="comments" style="width: 489px" class="textBox" placeholder="Write your comments..."></textarea>
</div>
</div>
<div class="clearSection"></div>
</div>
<div class="buttonsRow">
<input type="submit" value="Submit" class="button1" />
</div>
</form>
</div>

How to open this dialog box, after closing?

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>

Categories

Resources