I try to use pop up to calling my form, it works but every time I pick a value on combo box (onchange action), the form won't keep open so I have to click that pop up again (the value is retain though)
any idea?
here's the code:
<head>
<title>JQuery Popup | JQuery Slide Popup | Demo</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<div id="wrapper">
<div id="overlay" class="overlay"></div>
<a onclick="openOffersDialog();">Click Here To See The PopUp</a>
<div id="boxpopup" class="box">
<a onclick="closeOffersDialog('boxpopup');" class="boxclose"></a>
<div id="content">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Info Tarif</title>
</head>
<?php include('connection.php'); ?>
<body>
<?php
$query = "SELECT distinct (kota_kabupaten) FROM `ongkirjne` order by kota_kabupaten ASC ";
$result = mysql_query($query);
?>
<form name="satu" method=GET action="index.php" openOffersDialog();>
Pilih Daerah Tujuan :
<select name="kota" onChange='this.form.submit();'>
<option value="">-Pilih Kota/Kabupaten-</option>;
<?php while ($row = mysql_fetch_assoc($result)) { ?>
<option <?php if($_REQUEST['kota'] == $row['kota_kabupaten']) echo "selected" ?> ><?php echo $row['kota_kabupaten']; ?></option>
<?php } ?>
</select>
<br>
Pilih Kecamatan :
<select name='kec' class='nama' Method='GET'>
<?php
echo"<option value>-Pilih Kecamatan-</option>";
$city= $_GET['kota'];
if (isset($_GET['kota']))
{
$query = "SELECT * FROM `ongkirjne` where kota_kabupaten like '%$city%'";
$result = mysql_query($query);
while ($row = mysql_fetch_assoc($result)) {?>
<option <?php if($_REQUEST['kec'] == $row['kecamatan']) echo "selected" ?> >
<?php echo $row['kecamatan']; ?></option>
<?php } ?>
<?php } ?>
</select> Berat : <input type="text" name="berat" value="<?php echo htmlspecialchars($_GET['berat']); ?>"/>
<?php
echo " <input type='submit' name='hitung' value='hitung' onclick='hitung()'/>";
my desire result are:
1. when I click the pop up link, the form shows (ok)
2. when I pick the value on first combo box, the form retain (fail) -> using on change action.
3. when I pick the value on first combo box, the value retain (ok)
4. when I click submit button(hitung), the value retain and the function works (ok)
I want all of them on the same page.
thank you
If I understand what your problem is I believe it can be fixed by just not having any code that hides the form.
Are you using the .toggle function? If so, change that to .show
If you'd like the form to be hidden again after it's submitted then that will be done automatically when the page refreshes (given you're not using AJAX). You can set the action to "#" for the page to redirect to itself instead of another file.
Related
I have two tables in my database:
Table 1: Country => countryid(primary),countryname and
Table 2: State => stateid(primary),countryid(foreign),state
Now I want to make a drop down list. For example:
Country India (dropdown 1) should show States Goa, UP and MP (dropdown 2)
Country Pakistan (dropdown 1) should show States Lahore and Karachi (dropdown 2)
I have populated both tables with these values.
Here I am including my code files. I am able to get the first menu working but no values in the second menu. I want the second menu to change instantly when the value selected in the first menu is changed (not just when the page is loaded).
index.php
<?php
include('config.php');
$query_parent = mysql_query("SELECT * FROM country") or die("Query failed: ".mysql_error());
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#countryname").change(function() {
$(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
$.get('loadsubcat.php?countryid=' + $(this).val(), function(data) {
$("#stateid").html(data);
$('#loader').slideUp(200, function() {
$(this).remove();
});
});
});
});
</script>
</head>
<body>
<form method="get">
<label for="category">Parent Category</label>
<select name="countryname" id="countryname">
<?php while($row = mysql_fetch_array($query_parent)): ?>
<option value="<?php echo $row['countryid']; ?>"><?php echo $row['countryname']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
<label>Sub Category</label>
<select name="state" id="stateid"></select>
</form>
</body>
</html>
config.php
<?php
mysql_connect('localhost', 'root', '');
mysql_select_db('login');
?>
loadsubcat.php
<?php
include('config.php');
$countryid = $_GET['countryid'];
$query = mysql_query("SELECT * FROM state WHERE countryid = {$countryid}");
while($row = mysql_fetch_array($query)) {
echo "<option value='$row['stateid']'>$row['state']</option>";
}
?>
I am not able to figure out my problem. Also I have not done PHP before. This is the first time I am learning and that too with this project, so forgive me if I made disastrous mistakes.
Here you are sending the country id with key name countryname:
$.get('loadsubcat.php?countryname=' + $(this).val(), function(data) {
But on your PHP file, you are trying to get the value by using countryid:
$countryid = $_GET['countryid'];
Change and make it same for both. It will work!
UPDATE:
$("#state").html(data);
Here you are referring state but on your HTML, you are using stateid.
<select name="state" id="stateid"></select>
What Muhammad Sumon Molla Selim said is correct and there is one more mistake in loadsubcat.php
you need to change, echoing options statement
From:
echo "<option value='$row['stateid']'>$row['state']</option>";
To:
echo "<option value=".$row['stateid'].">".$row['statename']."</option>";
Then second dropdown will get states based on change in coutries dropdown.
when I excecuted your code in my local machine I was not getting data. The mistake you did was you are not concatinating the strings and variables properly.
I try to integrate a PHP Site with a "depending dropdown List" (using Javascript) into my Wordpress site. When I run the PHP Site "outside" Wordpress (which means the whole URL like: "www.xxx.com/wp-content/themes/lawyerplus/upload.php") then everything works as expected - which means the "dependend dropdown lists" will be filled, but when I run the same page within wordpress: www.xxx.com/upload/ then the javascript will not run, and so the lists will not be filled.
So the Question will be: How can I tell Wordpress, that it should run the Javascript files inside the PHP Files which will be integrated using the Wordpress Plugin "MaGiKS Proper PHP Include"?
Here is the part in upload.php where the Rubrik(Category) will be called. This is working, so the Category (Rubrik) will be showed.
<tr>
<td>Rubrik*</td>
<td><? include "test.php"; ?></td>
</tr
Here is the content of test.php
<?php include('config.php');
mysql_query("SET CHARACTER SET 'utf8'");
$query_parent = mysql_query("SELECT DISTINCT cat_id, category FROM category order by category asc") or die("Query failed: ".mysql_error());
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="http://austrianweddingaward.at/wp-content/themes/lawyerplus/js/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#parent_cat").change(function() {
jQuery(this).after('<div id="loader"><img src="http://www.austrianweddingaward.at/wp-content/themes/lawyerplus/img/loading.gif" alt="loading subcategory" /></div>');
jQuery.get('http://www.austrianweddingaward.at/wp-content/themes/lawyerplus/loadsubcat.php?parent_cat=' + jQuery(this).val(), function(data) {
jQuery("#sub_cat").html(data);
jQuery('#loader').slideUp(200, function() {
jQuery(this).remove();
});
});
});
});
</script>
</head>
<body>
<form method="get">
<label for="category">Hauptkategorie</label>
<select name="parent_cat" id="parent_cat">
<?php while($row = mysql_fetch_array($query_parent)): ?>
<option value="<?php echo $row['cat_id']; ?>"><?php echo $row['category']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
<label>Unterkategorie</label>
<select name="sub_cat" id="sub_cat"></select>
</form>
</body>
</html>
Here is the content of loadsubcat.php
<?php
include('config.php');
$parent_cat = $_GET['parent_cat'];
echo $parent_cat;
mysql_query("SET CHARACTER SET 'utf8'");
$query = mysql_query("SELECT * FROM subcategory WHERE cat_id = '$parent_cat'");
echo $query;
while($row = mysql_fetch_array($query)) {
echo "<option value='$row[id]'>$row[subcategory]</option>";
}
?>
Kind Regards for any suggestions.
Stefan
Hi so looking at the actual generated source code of the HTML page the error becomes clear: You have html tags in your javascript code. Actually you will find the same thing happening on several of your blog pages. Once you fix that, everything should work out.
I would guess that you are using the wordpress text editor to inject the javascript, but that seems to have caused some problems.
You could quickly figure this out when opening the javascript console / developer tools of your favourite development browser.
<head><br />
<meta charset="utf-8"><br />
<title>Dependent DropDown List</title><br />
<script type="text/javascript" src="http://austrianweddingaward.at/wp-content/themes/lawyerplus/js/jquery.js"></script><br />
<script type="text/javascript">
jQuery(document).ready(function() {</p>
<p> jQuery("#parent_cat").change(function() {
jQuery(this).after('
<div id="loader"><img src="http://www.austrianweddingaward.at/wp-content/themes/lawyerplus/img/loading.gif" alt="loading subcategory" /></div>
<p>');
jQuery.get('http://www.austrianweddingaward.at/wp-content/themes/lawyerplus/loadsubcat.php?parent_cat=' + jQuery(this).val(), function(data) {
jQuery("#sub_cat").html(data);
jQuery('#loader').slideUp(200, function() {
jQuery(this).remove();
});
});
});</p>
<p>});
</script><br />
</head></p>
I have this code which works fine when ran standalone (I am able to search in the drop down list )
<?php
include_once ("db_connection.php");
$conn = testdb_connect ();
$sth = $conn->prepare('SELECT testCase FROM tooldata ');
$sth->execute();
while($row = $sth->fetch(PDO::FETCH_ASSOC))
{
foreach($row as $key)
{
$var=explode('_', $key);
$feature[] = $var[0];
}
}
$feature = array_intersect_key($feature, array_unique(array_map('strtolower', $feature)));
foreach($feature as $newarr)
{
$newFeature[]=$newarr;
}
?>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="../select2-3.4.8/select2.css" rel="stylesheet"/>
<script src="../select2-3.4.8/select2.js"></script>
<script>
$(document).ready(function() { $("#feature").select2(); });
</script>
</head>
<body>
<h2>Select feature</h2>
<form method="get" action="feature.php">
<select name="feature" id="feature">
<?php
?>
<option value > Select Feature</option>
<?php
foreach($newFeature as $feat)
{
?>
<option value="<?php echo $feat;?>"><?php echo $feat;?></option>
<?php
}
?>
</select>
<input type="submit" name="submit" value="Feature">
</body>
</html>
When I include this script in other php script say main.php and when I run main.php my search in the drop down list does not work and I get this in my net tab - Uncaught TypeError: undefined is not a function for line 7 and 37 which are include("feature_list.php"); and } respectively.
what can be the possible reason for this ?
please guide
I am trying to use one php file php.project and depending on the name of 1 variable I get all the data from the database that is needed and display it on the site. Right now I have one problem.
I have one php file that is this:
<?php
$pName = $_POST['name'];
$db_connection = mysqli_connect('localhost','root','',"project_online_planner");
if (!$db_connection){
die('Failed to connect to MySql:'.mysql_error());
}
//insert into database
if(isset($_POST['insertComments'])){
include('connect-mysql.php');
$username = $_POST['username'];
$comment = $_POST['comment'];
$sqlinsert = "INSERT INTO user_comments (username, comment, project) VALUES ('$username', '$comment', '$pName')";
if (!mysqli_query($db_connection, $sqlinsert)){
die('error inserting new record');
}
else{
$newRecord = "1 record added";
}//end nested statement
}
//text from database
$query="SELECT * FROM user_comments where project = '$pName' ";
$results = mysqli_query($db_connection,$query);
$intro=mysqli_fetch_assoc($results);
$query2="SELECT * FROM project where name = '$pName' ";
$results2 = mysqli_query($db_connection,$query2);
$intro2=mysqli_fetch_assoc($results2);
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Project planner online</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="libs/ppo.js"></script>
<link rel="stylesheet" href="libs/ppo.css"/>
</head>
<body>
<div id="intro">
</div>
<div id="bgNav">
<nav id="nav">
Home
<a class="rightNav" href="register.php">Register</a>
<a class="rightNav" href="login.php">Log in</a>
</nav>
</div>
<div id="projectTile">
<span id="statusCheck"><?php print_r($intro2["status"]); ?></span>
<h2 id="prTitle"><?php print_r($intro2["name"]); ?></h2>
<div id="prPic"><img width="300" height="200" src="<?php print_r($intro2["image"]); ?>"></div>
<div id="prDescription"><?php print_r($intro2["description"]); ?></div>
</div>
<div id="comments">
<?php
while($row = mysqli_fetch_array($results))
{
echo nl2br("<div class='profile_comments'>" . $row['username'] . "</div>");
echo nl2br("<div class='comment_comments'>" . $row['comment'] . "</div>");
}
?>
</div>
<div id="uploadComments">
<form method="post" action="project.php">
<label for="name"><input type="hidden" name="insertComments" value="true"></label>
<fieldset>
<legend>comment</legend>
<label>Name:<input type="text" id="name" name="username" value=""></label><br/>
<label>Comments: <textarea name="comment" id="comment"></textarea></label>
<input type="submit" value="Submit" id="submitComment">
</fieldset>
</form>
</div>
</body>
</html>
depending on the variable $pName the content of the site changes, because it gets its content from a database and $pName stands for "project name".
$pName is determenent by the name of the picture you click on the index page which is this:
<?php
$db_connection = mysqli_connect('localhost','root','',"project_online_planner");
if (!$db_connection){
die('Failed to connect to MySql:'.mysql_error());
}
$query="SELECT * FROM project limit 5 ";
$results = mysqli_query($db_connection,$query);
$intro=mysqli_fetch_assoc($results);
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Project planner online</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="libs/ppo.js"></script>
<link rel="stylesheet" href="libs/ppo.css"/>
</head>
<body>
<div id="bgNav">
<div id="login">
Register
Log in
</div>
<nav id="nav">
Home
</nav>
</div>
<h2 class="titlePage">Home</h2>
<div id="bgTile">
<?php
while($row = mysqli_fetch_array($results))
{
$project = $row["name"];
echo nl2br("<img id=\"$project\" width='100px' alt='Procject name' height='100px' class='tile' src=". $row['image'] ."/>");
}
?>
<div class="tile" id="tileM"><h2>Meer</h2></div>
</div>
<form action="project.php" method="post" id="formF">
<label><input id="inputF" type="hidden" name="name"></label><br>
<input type="submit">
</form>
</body>
</html>
by clicking the image I put the name of it in a form and submit it to project.php. in project. php it is stored in the variable $pName . The problem is that once I refresh the page the $pName becomes Null and you see none of the database's data on the page. my question is: how can change this code in a way that $pName doesn't become Null when I refresh the page? and are there any suggestions on how to improve this code?
this is my javascript:
var check = null;
var form = $('#myForm');
$(document).ready(function(){
$('img').click(function(){
$('#inputF').val(this.id);
$("input[type=submit]").trigger("click");
});
});
Add Sessions to you code (as requested by #aleation).
Also, using parameters directly to query your database is very dangerous (as #jeroen mentioned).
Read up on the topic of SQL Injections and try to evaluate $pName before using it in a query.
<?php
session_start();
if(!is_null($_POST['name']))
{
$pName = $_POST['name'];
$_SESSION['pName'] = $pName;
}
elseif (array_key_exists('pName',$_SESSION)) {
$pName = $_SESSION['pName'];
}
else {
$pName = ''; // Maybe set a default here?
}
$pName = $_POST['name'];
$db_connection = mysqli_connect('localhost','root','',"project_online_planner");
if (!$db_connection){
die('Failed to connect to MySql:'.mysql_error());
}
...
Tiny glimpse into the Problem SQL Injections bring: In your example, imagine someone send's a POST request where name is ';Delete FROM project where id <>.
This would result in you loosing all your entries in the project table.
And that Query injection wouldn't even be that hard to guess.
With analyzing your website, someone could get hold of userdata, manipulate userdata, insert userdata ... you see? It is a mess.
Why are you using a $_POST variable for selecting the right content? If you make your images hyperlinks with the project name in the address, you can refresh the page without losing the variable content.
change:
echo nl2br("<img id=\"$project\" width='100px' alt='Procject name' height='100px' class='tile' src=". $row['image'] ."/>");
into
echo nl2br("<img id=\"$project\" width='100px' alt='Project name' height='100px' class='tile' src=".$row['image']."/>");
and then get $pname = $_GET['name'] instead of $pname = $_POST['name']
I am developing a list of submissions in the admin area of my website, which I can approve/disprove with a form, with an ID of the submission in a hidden input, and the select box with Approve/Reject in. When the select box is changed, the ajax submits the form, along with the hidden ID input, then the PHP script edits the submission in the database.
It was all working fine with one submission (1 form) on the page, but now there is more than one form, it is POSTing the wrong values to the PHP script.
<tbody>
<?php
// connect to mysql
mysql_connect('#######', '#######', '#######');
mysql_select_db('jcvideos');
// query
$query = mysql_query("SELECT * FROM videos");
// loop thru
while($row = mysql_fetch_assoc($query)) {
?>
<tr<?php if($row['accepted']==0) {echo " class='warning'";}?>>
<td><?php echo $row['id'];?></td>
<td>
<a href="//youtu.be/<?php echo $row['ytid'];?>" target="_blank">
<?php
$url = "http://gdata.youtube.com/feeds/api/videos/". $row['ytid'];
$doc = new DOMDocument;
$doc->load($url);
echo $doc->getElementsByTagName("title")->item(0)->nodeValue;
?>
</a>
</td>
<td><?php echo $row['date'];?></td>
<td>
<a href="mailto:<?php echo $row['submitter'];?>">
<?php echo $row['submitter'];?>
</a>
</td>
<td>
<form id="form<?php echo $row['id'];?>" class="reviewform" method="post" action="review.php">
<input type="hidden" value="<?php echo $row['id'];?>" name="vidid">
<select name="status">
<option value="0"<?php if($row['accepted']==0) {echo ' selected';}?>>Pending review</option>
<option value="1"<?php if($row['accepted']==1) {echo ' selected';}?>>Rejected</option>
<option value="2"<?php if($row['accepted']==2) {echo ' selected';}?>>Accepted</option>
</select>
</form>
</td>
<td><?php echo $row['showdate'];?></td>
</tr>
<?php
} // end of loop
?>
</tbody>
</table>
<?php include('../includes/footer.php');?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
$("select").change(function(){
$('.reviewform').ajaxSubmit();
});
</script>
I tried using IDs, then it didn't POST at all. What am I missing here?
You can try this assign common class like i have assigned in fiddle (status) to selectbox then get the form by the change of its children (<select>) like in fiddle i tried to get the id of from by change event of its child element (<select>) ,once you got the id get the data of form and submit it
$('.status').on('change', function(){
var id=$(this).parent("form").attr('id');
alert(id)
$('#'+id).ajaxSubmit();
/* $("#"+id).serialize() form data */
});
See Fiddle
It depends on your event listener/selector:
$("select").change(function(){
$('.reviewform').ajaxSubmit();
});
This will always submit .reviewform even if a select of anoter form has been changed.
(Basicly it registers the function for the change event of all select tags in you page)
Please try:
$(".reviewform select").change(function(){
$('.reviewform').ajaxSubmit();
});
$(".anotherform select").change(function(){
$('.anotherform').ajaxSubmit();
});