There is similar code in the application that works in this same fashion, but my addition is not working. I can get the search page to pop-up in a new window, but when I select the group to pass to the form page and display the pop-up window will not close or populate the form field on the add form page. Any help would be appreciated.
ADD Form PHP Page
Want to hide a readonly form field for a group name and display a button to search group listing from another page.
Form Field Page HTML Code
<div class="form-group">
<label class="col-sm-3 control-label" for="groupId">Group *</label>
<div class="col-sm-6" id="div_gr_name" style="<?php if ($gr_id < 1) {?> display:none <?php } else { ?> display:inline <?php } ?>">>
<input type='text' name='gr_name' class='span2 form-control' placeholder="Search Group Name" value="<?php if ($gr_id != -1) {echo $gr_name;} else {echo '';} ?>" id='gr_name' readonly='true' required/>
</div>
<div class="col-sm-2" style = "<?php if ($gr_id > 1) {?> display:none <?php } else { ?> display:inline <?php } ?>">
<button type="button" class="btn btn-primary" onclick='OpenPopup()'>Search</button>
</div>
<div>
<span id='paientNameMissing'></span>
</div>
</div>
Javascript OpenPopup from footer page
function OpenPopup() {
try {
window.open("searchgroup.php", "_blank", "width=850,height=500,scrollbars=yes,resizable=yes");
}
catch (ex) {
alert(ex);
}
finally {
event.cancelBubble = true;
event.returnValue = false;
return false;
}
}
Searchgroup Selection PHP Page
Group Selection Page PHP & HTML Code
//retrieve our table contents
while($row=mysql_fetch_array($rs)){
extract($row);
//creating new table row per record
echo "<tr>
<td>{$gr_name}</td>
<td>{$gr_leadername}</td>
<td>{$gr_leadcontact}</td>
<td>{$gr_leademail}</td>
<td>";?>Select<?php echo "</td>
</tr>";
}
//end table
echo "</tbody>
</table>
</div>";
}
Select Group javascript function
function select_group( id, name ){
var selvalue = id;
var selvalue1 = name;
window.opener.document.getElementById('gr_id').value = selvalue;
window.opener.document.getElementById('gr_name').value = selvalue1;
if (id!=0) {
window.opener.document.getElementById('div_gr_name').style.display = "inline";
}
else {
window.opener.document.getElementById('div_gr_name').style.display = "none";
}
window.close();
}
if you use window.open you call new browser window which doesnt know nothink about other windows. You can use store your information (cookies or session, i prefer cookies because they are stored on client side) to share across multiple browser windows. If you use phpmyadmin, look how it works
Related
I have this div in index.php
<div class="class" id="ScoreResult" style="display:none;">
and i have this function in seosystem/controller/youtubedata.php i tried using Js it didn't work so i want when the user submit the button it shows the div to display the data
if($_SERVER['REQUEST_METHOD'] == "GET" && isset($_GET['url']) && isset($_GET['submit'])){
/* echo "</br >" ;
echo $input_Url_data . "Button clicked" ; */
$id_position = strstr($input_Url_data,"=");
$id_position = trim($id_position, "=" );
// the alert works normally
echo '<script> alert("heelo"); </script>';
// this part that trying to show the div doesn't work
echo '<script type="text/JavaScript">
function showtable1()
{
document.getElementById( "ScoreResult").style.display = "block";
}
showtable1();
</script>'
;
echo "<style type=\"text/css\"> #ScoreResult {display:block;}</style>";
}
This the form of the input and the button i'm not sure should i make the action index.php or seosystem/controller/youtubedata.php
<form class="d-flex justify-content-center " method="GET" action="index.php">
<div class="input-group ">
<input type="text" class="form-control" name="url" placeholder="Enter Youtube Video URL" aria-label="Example text with button addon" aria-describedby="button-addon1">
<input class="btn" value="Analyze" name="submit" type="submit" id="button-addon1"></input>
</div>
</form>
Add this code to your index.php file. This is how you selectively display and hide the ScoreResult div. Hope it works for you.
<?php
// This part should be added to the php section at the top of the page
// Start by setting the $url_set status to 0
$url_set = 0;
if (isset($_GET['url'])) {
// Now we set the $url_set status to 1
$url_set = 1;
}
?>
<div class="class" id="ScoreResult"></div>
<!--This section links the $url_set status to the code-->
<input type="hidden" value="<?php echo $url_set ?>" id="url-status">
<!--Replace your JS section with this-->
<script>
function showtable1() {
const
url_status = document.querySelector('#url-status').value,
dsp_status = url_status == 1 ? 'block' : 'none'
document.getElementById("ScoreResult").style.display = dsp_status;
}
showtable1();
</script>
My question is. I want to press that remove button at the end and remove my item form the session.
how can i do this?
js:
$('.remove button') .click (function() {
removeItem(This);
});
PHP and HTML:
<?php
foreach($_SESSION["cart"] as $item) {
$data = getProducts($pdo, $item);
if ($data["ColorName"] == NULL) {
$color = "";
} else {
$color = "Color: ".$data["ColorName"]."<br>";
}
if ($data["Size"] == "") {
$size = "";
} else {
$size = "Size: ".$data["Size"]."<br>";
}
print("<div class=\"basket-product\">
<div class=\"item\">
<div class=\"product-image\">
<img src=\"http://placehold.it/120x166\" alt=\"Placholder Image 2\" class=\"product-frame\">
</div>
<div class=\"product-details\">
<h1><strong><span class=\"item-quantity\">1</span> x ".$data["StockItemName"]."</strong></h1>
<p><strong>".$color." ".$size."</strong></p>
<p>Product Code - ".$data["StockItemID"]."</p>
</div>
</div>
<div class=\"price\">".$data["RecommendedRetailPrice"]."</div>
<div class=\"quantity\">
<input type=\"number\" value=\"1\" min=\"1\" class=\"quantity-field\">
</div>
<div class=\"subtotal\">". $data["RecommendedRetailPrice"] * 1 ."</div>
<div class=\"remove\">
<button>Remove</button>
</div>
</div>");
}
I tried using Unset in allot of places, but that doesn't seem to get working :')
:)
The solution is rather easy, but requires some explanation in order to be understood.
What you need here is to:
Create a new php file, which would fetch the post data (in this case ID of an element) and then simply unset the key (sub-array), which contains the cart item you want to remove.
You can use $key_to_remove = array_search($_POST['stock_item_id'], array_column($_SESSION["cart"], 'StockItemID')); and then simply unset it unset($_SESSION["cart"][$key_to_remove]);
Assign id="remove_<?php echo $data["StockItemID"]; ?>" to the <div class="basket-product"> and data-product-id="<?php echo $data["StockItemID"]; ?>" to the button, so you can identify it for item removal via javascript/jquery and you need that value extracted later for the item you want to remove from the corresponding session array (which is, in this case, $_SESSION["cart"]).
Create a callback function for removal on('click', function(){});
Inside that function extract that value data-product-id from the button you just clicked var stock_item_id=$(this).attr('data-product-id');
Inside the same function, after step 4, create an ajax call to the file from step 1 with the post data from step 4
On successful execution of an ajax call, delete the corresponding product row you have marked with id="remove_<?php echo $data["StockItemID"]; ?>" in step 2 with the following code $("#remove_"+stock_item_id).remove();
In the end, your code would look like this
YOUR INITIAL PHP AND HTML (With small corrections)
<?php
foreach($_SESSION["cart"] as $item) {
$data = getProducts($pdo, $item);
if ($data["ColorName"] == NULL) {
$color = "";
} else {
$color = "Color: ".$data["ColorName"]."<br>";
}
if ($data["Size"] == "") {
$size = "";
} else {
$size = "Size: ".$data["Size"]."<br>";
}
?>
<div class="basket-product">
<div class="item">
<div class="product-image">
<img src="http://placehold.it/120x166" alt="Placholder Image 2" class="product-frame">
</div>
<div class="product-details">
<h1>
<strong>
<span class="item-quantity">
1
</span>
x <?php echo $data["StockItemName"]; ?>
</strong>
</h1>
<p>
<strong>
<?php echo $color." ".$size; ?>
</strong>
</p>
<p>
Product Code - <?php echo $data["StockItemID"]; ?>
</p>
</div>
</div>
<div class="price">
<?php echo $data["RecommendedRetailPrice"]; ?>
</div>
<div class="quantity">
<input type="number" value="1" min="1" class="quantity-field">
</div>
<div class="subtotal">
<?php echo $data["RecommendedRetailPrice"]; ?> * 1
</div>
<div class="remove">
<button data-product-id="<?php echo $data["StockItemID"]; ?>">
Remove
</button>
</div>
</div>
<?php
}
?>
JS
$(document).ready(function(){
$('.remove button').on('click', function() {
var stock_item_id=$(this).attr('data-product-id');
$.ajax({
url: "new_php_file_created_to_remove_item_from_session_via_ajax.php",
data:
{stock_item_id : stock_item_id}
}).done(function() {
$("#remove_"+stock_item_id).remove();
});
});
});
NEW PHP FILE (new_php_file_created_to_remove_item_from_session_via_ajax.php)
<?php
$stock_item_id = $_POST['stock_item_id'];
$key_to_remove = array_search($_POST['stock_item_id'], array_column($_SESSION["cart"], 'StockItemID'));
unset($_SESSION["cart"][$key_to_remove]);
if(isset($_SESSION["cart"][$key_to_remove])) {
return false;
}
return true;
For the sake of readability and further maintenance and possible additions, I would strongly recommend you to separate php, html and js code into separate files, but that's only a suggestion. :)
I'm building an AJAX live search, it works but I would like to navigate using keyboard arrows (up/down). I don't know how I can do this.
My form.php
<div class="input-group" id="nav-input-group" style="display:table;">
<input name="q" id="thesearchbar" class="form-control input-search " name="search" placeholder="Serach..." autocomplete="off" type="text" onclick="">
<div class="result"></div>
</div>
My script
$(document).ready(function(){
$('#nav-input-group input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("_ajax_search.php", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents("#nav-input-group").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
and _ajax_search.php
<?php
require('bdd_pdo_connect.php');
try{
if(isset($_REQUEST['term'])){
$sql = "SELECT * FROM subcategories WHERE subcategory LIKE :term";
$stmt = $bdd->prepare($sql);
$term = '%' . $_REQUEST['term'] . '%';
$stmt->bindParam(':term', $term);
$stmt->execute();
if($stmt->rowCount() > 0){
while($row = $stmt->fetch()){
echo "<p>" . $row['subcategory'] . "</p>";
}
} else{
echo "<p>No matches found";
}
}
} catch(PDOException $e){
die("ERROR: Could not able to execute $sql. " . $e->getMessage());
}
unset($bdd);
?>
I'm new with AJAX and any help will be greatly appreciated.
Why don't you use HTML select tag to make a dropdown list? It supports arrow keys navigation by default. If you want all options to appear, use the size attribute of the HTML select tag (see HTML5 size attribute specification).
HTML
<div class="input-group" id="nav-input-group" style="display:table;">
<input name="q" id="thesearchbar" class="form-control input-search " name="search" placeholder="Serach..." autocomplete="off" type="text" onclick="">
<select class="result" size="10"></div> <!-- size="10" is an example here -->
</div>
JS
// (ajax part)
// ...
$(document).on("change", ".result", function(){
$(this).parents("#nav-input-group").find('input[type="text"]').val($(this).val());
$(this).empty();
});
I'm new to programming but I know that you need a server-side language to access a database. I'm using php to access my database and display information, but I need to move the information around on the page at the press of a button (.click) with javascript. So the conversion of data from php to javascript is what is giving me trouble.
Basically, I'm building a system where anyone that buys a ticket is entered in a database. My staff go to a page where the ticket buyers get displayed in a table (Expected Attendance) on the webpage as displayed in a picture I added to the jsfiddle (link in the javascript box), and then they check a box (checkbox) if the person actually comes. At the click of a button (Okay), I need all clicked checkboxes to move to the (
Attending) table on the webpage. Code and fiddle below.
PHP
<?php
//Connect to the database
$mysqli = NEW mysqli('localhost:3306','root','password','roster');
//Query the database
$resultSet = $mysqli->query("SELECT * FROM attendant_info");
//Count the returned rows
if($resultSet->num_rows !=0) {
//Turn the results into an associative array
while($rows = $resultSet->fetch_assoc())
{
$ID = $rows['ID'];
$first_name = $rows['first_name'];
$last_name = $rows['last_name'];
$age = $rows['age'];
$city = $rows['city'];
$state = $rows['state'];
$ticket = $rows['ticket'];
$vip = $rows['vip'];
$entry = "<div id=\"port\"><div id=\"entry\"><!--start of entry-->
<div id=\"ID\"><!--start of ID-->$ID</div><!--end of ID-->
<div id=\"info\"><!--start of info-->
<infowrapper>
<booking><first>First Name:</first><slot1>$first_name</slot1></booking>
<booking><last>Last Name:</last><slot1>$last_name</slot1></booking>
<booking2><age>Age:</age><slot1>$age</slot1></booking2>
<booking4><city>City:</city><slot1>$city</slot1></booking4>
<booking2><state>State:</state><slot1>$state</slot1></booking2>
<booking3><ticket>Ticket#:</ticket><slot1>$ticket</slot1></booking3>
<booking5><vip>VIP:</vip><slot1>$vip</slot1></booking5>
</infowrapper>
<form action=\"\">
Attending<input type=\"checkbox\" name=\"attending\" value=\"attending\">
</form>
</div><!--end of info-->
</div><!--end of entry-->
</div>";
echo "$entry";
}
//Display the results
}else{
echo "No results.";}
?>
Javascript(Jquery)
$(document).ready(function() {
$(".bypass").click(function() {
if ($("#checkbox").click){document.atbox += "entry";
}
});
});
Here is a fiddle so you can see the whole thing together. My html is located in the fiddle, StackOverflow was giving me a hard time posting it.
http://jsfiddle.net/oy81hrtp/1/
This may give you some idea.
Demo:
http://jsfiddle.net/sfohgrvL/1/
HTML:
<div style="border: 1px solid #000; padding:10px">
<h1>Expected Attendance</h1>
<div id="expected_attendance">
<p><input type="checkbox" class="my_checkboxes" />Option1</p>
<p><input type="checkbox" class="my_checkboxes" />Option2</p>
<p><input type="checkbox" class="my_checkboxes" />Option3</p>
<p><input type="checkbox" class="my_checkboxes" />Option4</p>
<p><input type="submit" class="my_submit" /></p>
</div>
</div>
<br></br>
<div style="border: 1px solid #000; padding:10px">
<h1>Attendance</h1>
<div id="attendance">
</div>
</div>
JS:
$(function(){
$(".my_submit").on('click', function(){
ht = $("#attendance").html();
$("input:checkbox[class=my_checkboxes]:checked").each(function()
{
var th = $(this);
ht = ht + th.parent().html();
th.parent().remove();
});
$("#attendance").html(ht);
});
});
To properly check your checkbox, follow this method
$(document).ready(function() {
$(".bypass").click(function() {
if($('#checkbox').prop('checked')) {
//Do what you want
}
});
});
my search result does not show on the same window, i would want the result to be displayed on the same window. i have found the same question but the code is different from what I'm using so i cant relate to it: Search wont show on same page
scenario 1:
if I put in the action="search_result2.php" - it will redirect the result on the other page
scenario 2:
if i used action="" in this code below, its not doing anything
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
$(document).ready(function(){
$("#results").show();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#search").on('click',function() {
var find = $('#find').val();
var field = $('#field').val();
$.post('search_result2.php',{find:find, field:field}, function(data){
$("#results").html(data);
});
return false;
});
});
</script>
</head>
<body>
<div id="container" style="width:auto">
<div id="mainContent">
<h2>Search</h2>
<form name="search" method="post" action="">
Seach for: <input type="text" name="find" id="find" /> in
<Select NAME="field" id="field">
<Option VALUE="testA">A</option>
<Option VALUE="testB">B</option>
<Option VALUE="testC">C</option>
<Option VALUE="testD">D</option>
</Select>
<input type="hidden" name="searching" value="yes" />
<input type="submit" name="search" id="search" value="Search" />
</form>
<div id="results">
</div>
</div>
</div>
</body>
</html>
here is my search_result2.php:
<?php
//This is only displayed if they have submitted the form
if (isset($_POST['searching']) && $_POST['searching'] == "yes")
{
echo "<h2>Results</h2><p>";
//If they did not enter a search term we give them an error
if (empty($_POST['find']))
{
echo "<p>You forgot to enter a search term";
exit;
}
// Otherwise we connect to our Database
mysql_connect("host", "username", "passw") or die(mysql_error());
mysql_select_db("testdb") or die(mysql_error());
// We preform a bit of filtering
$find = strtoupper($_POST['find']);
$find = strip_tags($_POST['find']);
$find = trim ($_POST['find']);
$field = trim ($_POST['field']);
//Now we search for our search term, in the field the user specified
$data = mysql_query("SELECT * FROM testtable WHERE upper($field) LIKE'%$find%'");
//And we display the results
while($result = mysql_fetch_array( $data ))
{
echo $result['testA'];
echo " ";
echo $result['testB'];
echo "<br>";
echo $result['testC'];
echo "<br>";
echo $result['testD'];
echo "<br>";
echo "<br>";
}
//This counts the number or results - and if there wasn't any it gives them a little message explaining that
$anymatches=mysql_num_rows($data);
if ($anymatches == 0)
{
echo "Sorry, but we can not find an entry to match your query<br><br>";
}
//And we remind them what they searched for
echo "<b>Searched For:</b> " .$find;
}
?>
If you want to load in the same page, without refreshing the page, you'll need to make an ajax request.
If you can reload the page, the php part must be in the same "location" as your original link.
For example if you put that code on the top of the same file with the form (and rename it with a .php extension), it should work (if the php can interpret in that folder).