I have done autocomplete for my php code usign ajax.I used this code for autocompleting one fileld.Can I use the same code for autocompleting more than one field...
Code contains ajax code is
<!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>Autocomplete.....</title>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
function lookup(inputString)
{
if(inputString.length == 0)
{
// Hide the suggestion box.
$('#suggestions').hide();
}
else
{
$.post("rpc.php", {queryString: ""+inputString+""}, function(data)
{
if(data.length >0)
{
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue)
{
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<style type="text/css">
body
{
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3
{
margin: 0px;
padding: 0px;
}
.suggestionsBox
{
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList
{
margin: 0px;
padding: 0px;
}
.suggestionList li
{
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover
{
background-color: #659CD8;
}
</style>
</head>
<body>
<div>
<form>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
</div>
</body>
</html>
Code for database connection page is
<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("name",$con);
if(!$con)
{
echo 'ERROR: Could not connect to the database.';
}
else
{
if(isset($_POST['queryString']))
{
$queryString = mysql_real_escape_string($_POST['queryString']);
if(strlen($queryString) >0)
{
$query = mysql_query("SELECT cname FROM country WHERE cname LIKE '$queryString%' LIMIT 10");
if($query)
{
while($result= mysql_fetch_object($query))
{
echo '<li onClick="fill(\''.$result->cname.'\');">'.$result->cname.'</li>';
}
}
else
{
echo 'ERROR: There was a problem with the query.';
}
}
else
{
// Dont do anything.
}
}
else
{
echo 'There should be no direct access to this script!';
}
}
?>
Yes, you can use the code to autocomplete more than one field.
The quick and dirty way:
HTML:
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill(this);" />
<input type="text" size="30" value="" id="inputString2" onkeyup="lookup(this.value);" onblur="fill(this);" />
<input type="text" size="30" value="" id="inputString3" onkeyup="lookup(this.value);" onblur="fill(this);" />
Javascript:
function fill(element,thisValue)
{
element.value = thisValue;
setTimeout("$('#suggestions').hide();", 200);
}
The jQuery and more efficient way (based on your jQuery version 1.2.1:
HTML:
<input type="text" size="30" value="" class="autoupdate" name="field1" />
<input type="text" size="30" value="" class="autoupdate" name="field2" />
<input type="text" size="30" value="" class="autoupdate" name="field3" />
Javascript (using jQuery 1.2.1):
// fill on blur!
$(".autoupdate").blur(function()
{
$(this).val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
});
// lookup value onkeyup!
$(".autoupdate").keypress(function()
{
var fieldvalue = $(this).val();
if ( fieldvalue.length > 0 )
{
// hide selections box
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+fieldvalue+""}, function(data)
{
if(data.length >0)
{
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
});
Further optimizations:
AJAXing a URL as you keypress is unnecessary. If you don't mind an extra second to auto-fill; it would be better to submit PHP forms onblur instead. Additionally, you can also take advantage of JSON and essentially get all the data you need in one single AJAX call which as a end result makes the form's footprint have 1 AJAX call and 1 MySQL database query. Otherwise, your simply pounding the server on each keyup event that is fired.
-- OR --
Alternatively you can setup a delay that waits 2-3 seconds before submitting the PHP form. It would then also need to ensure that the setTimeout is cleared upon additional keypresses so as to prevent unnecessary pileup of delayed AJAX calls.
So it all depends on your requirement, I dont see a need where autocomplete for one field will help with autocompleting another field in the same page.. Also, what are the chances that the user will enter the same string..
having said that you can be smart about it and store the response from your server in an associative array and check this associative array first before making a call to the sever to see if you can provide data from that, but for that I would recommend you store JSON data from the server and build the HTML using javascript (eg. templates). You can still store the html in the associative array but the html might change depending on your text box.
Code will probably look like this:
<script type="text/javascript">
var searchResults=[];
function lookup(inputString)
{
if(inputString.length == 0)
{
// Hide the suggestion box.
$('#suggestions').hide();
}
else if(searchResults[inputString])
{
$('#suggestions').show();
$('#autoSuggestionsList').html(searchResults[inputString]);
}
{
$.post("rpc.php", {queryString: ""+inputString+""}, function(data)
{
if(data.length >0)
{
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue)
{
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
Obviously you need to change your selectors/ or change the offset of the div etc based on which field you wanna give the autosuggest to.
Hope this helps.
Related
Hello stack right now I am facing a problem I am unable to insert data in database through jQuery Ajax I have attached all related files Can anyone go through it I am new in php development.
**task.php**
<html>
<head>
<style type="text/css">
html, body {
margin: 5px;
padding: 5px;
background: #fff;
}
form {
border: 1px solid #999;
padding: 0.25em;
background: #EEE;
}
div {
padding-bottom: 0.25em;
}
/* essential */
label {
float: left;
width: 6em;
text-align: right;
padding-right: 0.5em;
}
input, textarea {
text-align: left;
width: 200px;
height:30px;
}
input.submit {
margin-left: 6.5em;
width: auto;
}
label, input.submit {
font: normal 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script src="insert.js"></script>
<script>
</script>
</head>
<body>
<h1>FORM</h1>
<form>
<div>
<label>Name:</label>
<input type="text" name="name" id="Name" />
</div>
<div>
<label>Age:</label>
<input type="text" name="age" id="age"/>
</div>
<div>
<label>Email Id:</label>
<input type="text" name="emailId" id="emailId"/>
</div>
<div>
<label>Password:</label>
<input type="text" name="password" id="pass"/>
</div>
<div>
<input type="submit" id="submit" name="submit" value="Submit" onclick="insertData()" />
</div>
</form>
</body>
</html>
This is my insert.php file where I have write all query related to insert my data.
**insert.php**
<?php
include("connection.php");
if(isset($_POST['submit']))
{
$Fname=$_POST["name"];
$Age=$_POST["age"];
$EmailId=$_POST["emailId"];
$Password=$_POST["password"];
$Insert = "INSERT INTO simpleform (Name, Age, Email_Id, Password)
VALUES ('.$Fname.', '.$Age.', '.$EmailId.', '.$Password.')";
$Query=mysqli_query($con, $Insert);
print_r($Insert);
if(!$Query)
{
echo mysqli_error();
}
else
{
echo "Successfully Inserted <br />";
}
}
?>
This is my insert.js file where I did all ajax related work.
**insert.js**
function insertData() {
debugger;
var name=$("#Name").val();
var age=$("#age").val();
var emailId=$("#emailId").val();
var pass=$("#pass").val();
debugger;
// AJAX code to send data to php file.
$.ajax({
type: "POST",
url: "kamalesh/insert.php",
data: {name:name,age:age,emailId:emailId,pass:pass},
dataType: "JSON",
success: function(data) {
alert("Data Inserted");
}
});
}
It looks like In your insert.php the if(isset($_POST['submit'])) is preventing the script from running when your insert.js function passes parameters to insert.php. When AJAX passes parameters to insert.php, the isset($_POST['submit']) will return false.
You will need to remove the if(isset($_POST['submit'])) from nsert.php. I will also suggest you to prevent the form from submitting and refreshing your page. Look into e.preventDefault.
Also for your $insert query you should remove the "." before and after each variable in the "VALUES". They are not needed.
Hi I am trying to make a autocomplete function where I use a search field and write the first letters of the name of a company. the code vill search an online database for the company and there will be a list of suggestions. for example
company1 street1 zipcode etc.
company2 astreet2 zipcode etc.
company3 street1 zipcode etc.
I will click on one of the listed companies and it vill populate field1 with company1 field2 street field3 zipcode etc. but I cant make it. I dont reallt know how to do this and Im trying to learn and understand but this is too complex for me so I hope any of you guys can hekp me - thanks in advance.
This is how my code looks like so far.
main page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="layout.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<style>
.kundsok {
border: 1px solid #a8d4b1;
background-color: #c6f7d0;
margin: 2px 0px;
padding: 40px;
border-radius: 4px;
}
#ftg-list {
float: center;
list-style: none;
margin- top: -3px;
padding: 0;
width: 190px;
}
#ftg-list li {
padding: 10px;
background: #f0f0f0;
border-bottom: #bbb9b9 1px solid;
}
#ftg-list li:hover {
background: #ece3d2;
cursor: pointer;
}
#search-box {
padding: 10px;
border: #a8d4b1 1px solid;
border-radius: 4px;
}
</style>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#search-box").keyup(function() {
$.ajax({
type: "POST",
url: "readkund_eniro.php",
data: 'keyword=' + $(this).val(),
beforeSend: function() {
$("#search-box").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165 px ");
},
success: function(data) {
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background", "#FFF");
}
});
});
});
function selkund(val, val2) {
$("#search-box").val(val);
$("#foretag_name").val(val);
$("#stad").val(val2);
$("#suggesstion-box").hide();
}
</script>
<body>
<div id="sidlayout">
<div id="content">
<?php include "menukunder.php"; ?>
<div class="kundsok">
<center>
<input type="text" id="search-box" name ="search-box" placeholder="kund" >
<div id="suggesstion-box"></div>
</form>
<h1></h1>
<H3></H3>
<center>
<form action="sida3ka.php" method="post">
<fieldset>
<label title="Skriv in företagets namn" for="foretag_name">Företag:</label>
<input type="text" name="foretag_name" id="foretag_name">
<label title="Skriv in stad" for="stad">Stad:</label>
<input type="text" name="stad" id="stad">
</fieldset>
</form>
</div>
</div>
</body>
</html>
on the other page called readkund_eniro.php the code looks like this
$url = 'https://api.eniro.com/cs/search/basic?profile=Martens&key=3653823918839001013&country=se&version=1.1.3&search_word
=' . $_POST["keyword"] . '&geo_area=stockholm';
$response = file_get_contents($url);
$json = json_decode($response, true);
if(!empty($json)) {
?>
<ul id="ftg-list">
<?php
foreach($json['adverts'] as $ftg) {
?>
<li onClick="selkund('<?php
echo $ftg["companyInfo"]['companyName'];
echo $ftg["address"]['streetName'];
?>');"><?php
echo $ftg["companyInfo"]['companyName'];
?>
</li>
<?php
}
?>
</ul>
<?php
}
I the database respons will be
$ftg["companyInfo"]['companyName']
$ftg["address"]['streetName']
$ftg["address"]['postCode']
and so on. thanks again
Best regards Johan
i think there is problem in API url at readkund_eniro.php file. can you please try with as below.
$url = "https://api.eniro.com/cs/search/basic?profile=Martens&key=3653823918839001013&country=se&version=1.1.3&search_word=".$_POST['keyword']."&geo_area=stockholm";
another thing i found with your response text inside
<li onClick="selkund('<?php echo $ftg["companyInfo"]['companyName'];?>', '<?php echo $ftg["address"]['streetName'];?>');"><?php
echo $ftg["companyInfo"]['companyName']. ', '. $ftg["address"]['streetName'].', '. $ftg["address"]['postCode'] ;
?>
</li>
So I am trying to make a valid login for my web dev class' final project. Whenever I try to log in with the correct credentials, I always get redirected to the "something.php" page, and I never receive any of the output that I put in my code. This even happens when I input valid login credentials.I know this isn't a secure way to do a login, but this is for final project purposes only. I've attached all of my files below (minus pictures), even though you probably don't need all of them.
The something.php file (the php for the login)
<?php
$action = empty($_POST['action']) ? false : $_POST['action'];
/*var radio = document.getElementById('radio');*/
switch ($action) {
case 'login':
$username = empty($_POST['username']) ? '' : $_POST['username'];
$password = empty($_POST['password']) ? '' : $_POST['password'];
if ($username=='test' && $password=='pass') {
setcookie('userid', $username);
$response = 'Login: Sucess';
}
else {
$response = 'Login: Fail';
}
print $response;
break;
case 'get':
$userid = empty($_COOKIE['userid']) ? '' : $_COOKIE['userid'];
if ($userid=='test') {
$response = 'Todays special are organic Brazilian strawberries $1.75 a pound';
}
if ($username!='test' || $password!='pass'){
header('Location: XXX/something.php');
echo "username and password combo are not valid";
//radio.value = "logged out";
}
print $response;
break;
case 'logout':
setcookie('userid', '', 1);
print 'Logged out';
break;
}
?>
login.html page
<div class="group">
<div id="radio">
<form id="radio" action="">
<input type="radio" name="select" value="login"> Logged In<br>
<input type="radio" name="select" value="logout" checked> Logged Out<br>
</form>
</div>
<form id="content2" class="itemBlock">
<p> Don't have an account? Sign up here!</p>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname"><br>
E-mail: <br>
<input type="text" name="email"><br>
Password: <br>
<input type="text" name="password"><br>
<br>
<input type="button" value="Register" onclick="addToCartFxn()">
</form>
<div id="center">
<form id="content" class="itemBlock" action="something.php" method="post">
<br> <br>
E-mail: <br>
<input type="text" name="email"><br>
Password: <br>
<input type="password" name="password"><br>
<input type="submit" class="get" value="Login" id="login">
<input type="submit" value="Logout" id="logout">
</form>
</div>
</div>
final.php page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Content via Ajax</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="/resources/demos/style.css">-->
<!--<script src="jquery-1.10.2.min.js"></script>-->
<script>
$(function() {
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.fail(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. ");
});
}
});
});
$(function(){
$('#login').click(function(){
$.post('something.php',
{
action: 'login',
username: $('#username').val(),
password: $('#password').val()
},
function(data){
$('#center').html(data);
});
});
$('#logout').click(function(){
$.post('something.php',
{
action: 'logout'
},
function(data){
$('#center').html(data);
});
});
$('.get').click(function(){
$.post('something.php',
{
action: 'get'
},
function(data){
$('#center').html(data);
});
});
});
function addToCartFxn() {
alert("This feature is coming soon!");
}
</script>
<style>
#floatright {
float:right;
}
#header{
background-image: url("tree rocks header.jpg");
width: 100%;
height: 200px;
padding-top: 1px;
text-align: center;
background-size: cover;
background-position-y: 3255px;
background-position-x: -2112px;
}
#headertext {
z-index: 100;
color: white;
font-size: 72px;
font-family: exo, arial, serif;
}
#font-face {
/* Declare the name of the font (we make this value up) */
font-family: exo;
/* And where it's located */
src: url("Exo-Medium.otf");
}
.addtocart{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 7px 12px;
border-radius: 7px;
text-align: center;
text-decoration: none;
font-size: 5px;
margin-bottom: 3px;
}
#radio {
float: right;
}
#content {
font-family: exo, arial, serif;
text-align: center;
border-radius: 25px;
background-color:forestgreen;
align-content: center;
}
#content2 {
font-family: exo, arial, serif;
float:left;
}
#logout{
margin: 5px;
}
#login{
margin: 5px;
}
.itemBlock{
display:inline-block;
margin: 10px;
border: 2px black;
border-style: solid;
text-align: left;
padding-left: 5px;
padding-right: 5px;
}
#font-face {
/* Declare the name of the font (we make this value up) */
font-family: exo;
/* And where it's located */
src: url("Exo-Medium.otf");
}
#center{
margin-left: 42%;
}
body {
min-height: 100%;
height: auto! important;
}
.group:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div id="header">
<p id="headertext"> Claw's Cache</p>
</div>
<div id="tabs">
<ul>
<li> Our Products </li>
<li> Available Produce </li>
<li id="floatright"> Login</li><!--tabs-3's content is being put there by ajax-->
</ul>
<div id="tabs-1">
<p>Listed here are all the current vendors that are associated with us products.</p>
<?php
//Use glob function to get the files
//Note that we have used " * " inside this function. If you want to get only JPEG or PNG use
//below line and commnent $images variable currently in use
$images = glob("*.png");
$i=0;
//Display image using foreach loop
foreach($images as $image){
echo '<div class="itemBlock"> <img src="'.$image.'" height="250" width="200" /> <br>';
echo '<button type="button" class="addtocart" onclick="addToCartFxn()"> add to cart</button> </div>';
}
?>
</div>
<div id="tabs-2">
<p>Our available produce page is being updated currently!
<br> <br> As a placeholder, we have attached a video that many of our customers recommend to every person interested in indoor gardening.</p><br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/RWCIaydwM_w" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
At line
$action = empty($_POST['action']) ? false : $_POST['action'];
You read a POSTed form field called 'action'. I can't find that field in any of your web forms... Maybe give a name to your SUBMIT buttons are retrive that instead. Action is an atribute of the web form, not a field name.
it looks like it's ignoring your jquery login code because your form is submitting when you click Login, and since you're checking if $_POST['action'] is empty
$action = empty($_POST['action']) ? false : $_POST['action'];
it fails because you don't have any form element with that name. the form's action attribute only specifies to which page to send the data.
I think you might try adding onsubmit="return false" to your form in order to get it to only use your $.post method.
<form onsubmit="return false" id="content" class="itemBlock" action="something.php" method="post">
What happens if you amend your opening variable assignment to
empty($_POST['action']) ? $action = false : $action = $_POST['action'];
I'm not 100% sure why this happens, but I know from past experience that the shorthand IF statements can give some unexpected results.
On top of this, it doesn't look like you are setting the $_POST['action'] field anywhere?
If you are referring to the method of transmit specified in the opening <form> tag, then this is wrong.
If your shorthand IF statement is used to determine how data is being passed into the something.php file, then you could do
empty($_POST) ? (empty($_GET) ? echo "No User Data Passed" : $data = $_GET;) : $data = $_POST;
(I know it seems long winded, but the extra check for $_GET data can be omitted, it is simply there as a proof of concept type check).
From that, the $data variable will be set with either the $_GET or the $_POST user defined data from the forms on the other pages.
I hope this helps.
I have a multi user chat application with four files as under:
log.html,
index.php,
post.php and
style.css
I have installed these on server (host :megaleech.in) & there are two following concerns that I am facing:
a) chat inputs do not reflect inside chat box when user press the send button.
b) We need to press exit button two times instead of one to take the user to login form.
You can see it on domain: http://demo.megaleech.in/chting/
It should be noted that this chat application is working perfectly fine on wamp server on my personal laptop and above mentioned concerns are only when I upload files to said internet server.
Please help in resolving concern.
Thanks in advance.
My codes are as under:
log.html : This is empty file
index.php
<?php
session_start();
function loginForm(){
echo'
<div id="loginForm">
<form action="index.php" method="post">
<p>Please enter your name to continue:</p>
<label for="name">Name:</label>
<input type="text" name="name" id="name" />
<input type="submit" name="enter" id="enter" value="Enter" />
</form>
</div>
' ;
}
if(isset($_POST['enter'])){
if($_POST['name'] != ""){
$_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
}
else{
echo '<span class="error">Please type in a name</span>';
}
}
?>
<?php
if(!isset($_SESSION['name'])){
loginForm();
}
else{
?>
<doctype html>
<head>
<title>Chat - Customer Module</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
<p class="logout"><a id="exit" href="#">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"><?php
if(file_exists("log.html") && filesize("log.html") > 0){
$handle = fopen("log.html", "r");
$contents = fread($handle, filesize("log.html"));
fclose($handle);
echo $contents;
}
?></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
});
</script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
//If user wants to end session
$("#exit").click(function(){
var exit = confirm("Are you sure you want to end the session?");
if(exit==true){window.location = 'index.php?logout=true';}
});
});
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("post.php", {text: clientmsg});
$("#usermsg").attr("value", "");
return false;
});
function loadLog(){
var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
$.ajax({
url: "log.html",
cache: false,
success: function(html){
$("#chatbox").html(html); //Insert chat log into the #chatbox div
//Auto-scroll
var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
if(newscrollHeight > oldscrollHeight){
$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
}
},
});
}
setInterval("loadLog() ",1000);
</script>
<html>
<?php
}
?>
<?php
if(isset($_GET['logout'])){
//Simple exit message
$fp = fopen("log.html", 'a');
fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>");
fclose($fp);
session_destroy();
header("Location: index.php");
}
?>
style.css
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input { font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover { text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:504px;
border:1px solid #ACD8F0; }
#loginform { padding-top:18px; }
#loginform p { margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit { width: 60px; }
.error { color: #ff0000; }
#menu { padding:12.5px 25px 12.5px 25px; }
.welcome { float:left; }
.logout { float:right; }
.msgln { margin:0 0 2px 0; }
post.php
<?php
session_start();
if(isset($_SESSION['name'])){
$text = $_POST['text'];
$fp = fopen("log.html", 'a');
fwrite($fp, "<div class='msgln' id='chat".date("U")."'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");
fclose($fp);
}
?>
I have this code here and I cannot figure out what Im doing wrong.
http://jsfiddle.net/m9hT6/
I cannot make "remove" link working and more importantly when I send it with "post" to another
page to process with php, I cannot capture data into variable from consecutive forms Im creating.
<html>
<head>
<style media="screen" type="text/css">
* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }
input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
</style>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript">
</script>
</head>
<body>
<script>
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').live('click', function() {
$('<label for="ticketCantidad"><input type="text" id="ticketCantidad" size="20" name="ticketCantidad' + i + '" value="" placeholder="Valor de Tickets" /></label> Remove').appendTo(scntDiv);
i++;
$('<label for="ticketValue"><input type="text" id="ticketValue" size="20" name="ticketValue' + i + '" value="" placeholder="Cantidad de Tickets" /></label> Remove<p></p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function() {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>
<form action="testProces.php" method="POST" name="testForm">
<h1>Ticket Restaurante</h1>
<h2>Otro formulario</h2>
<div id="p_scents">
<p>
</p>
</div>
<h1>Cheque Gourmet</h1>
<input name="submit" type="submit">
</form>
</body>
</html>
As far as the remove link,
$('#remScnt').live('click', function() {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
a couple of issues.
One, jquery has no function .parents() - elements only have one parent each, so its parent.
Next, you can only have one element of a given ID on a page. You've given several items an ID of 'remScnt'. Change it to a class.
Next, you don't need the 'p' in the parent() call.
Try
$(this).parent().remove();