Creating the form is the easy part
<form action="mymovies.php" method="get" >
<input type="text" size="25" onkeydown="searchq();" placeholder="Search" name="search" class="search_box fanceyInput"></form>
Using this script as is does not output the file when searched for. I know it's not right but can someone help me fix it?
<script>
function searchq() {
var searchTxt = $("input[name='search']").val();
$.get("mymovies.php", {searchVal: searchTxt}, function(output) {
$("#output").php(output);
});
}
</script>
Currently I am pulling the filenames down from my server using,
$myDirectory = opendir("./movies"); // Opens directory
and then doing a lot of other stuff, if you care to look { FILE } but ultimately the list of movies gets printed out into a table using this,
print("
<tr class='$class'>
<td><a href='./$namehref$name</a></td>
<td>$mpreview</td>
<td>$mrating</td>
<td>$mrunningtime</td>
<td>$thefilesize</td>
<td>$DateAdded</td>
</tr>");
So again my question is how can I change or clean up my page so when searching for a specific movie it either scrolls down, goes to, or displays the searched movie at the top of the page?
In addition to all this how can I HIDE/IGNORE files with a .php extension from showing up in the print list? It's a list of movies so they are all .mp4 but in order for me to grab the file sizes (over 2 gigs) I had to put a php page inside the movies folder. No reason for it to show in the list.
One last thing at the top of the pastebin page there are a list of other things I would like to add to this page, if someone that codes pretty easy could spend an hour with me I would really appreciate it.
Thanks in advance.
You can use jquery for searching...
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
var availableTags = ["ActionScript","AppleScript","Asp","BASIC","Scheme"];
$( "#tags" ).autocomplete({source: availableTags});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
Related
I'm very new to coding, so please forgive me if this is a dumb question.
I'm working on an assignment where I have to add functionality and styles to an existing bootstrap HTML doc. The purpose is to allow people to enter a dollar amount into an input field either by typing in an amount or by clicking buttons that populate the field with set amounts. One of my instructions was to update the donate submit button so that it appends the chosen donation amount to the "/thank-you" URL.
This is what I have for the input field:
<form id="amountSend">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount"/>
</form>
This is what I have for the button:
<button id="donateBtn" type="submit" action="/thank-you"
method="get">DONATE<span class="metric-amount"></span></button>
And I was thinking that the jQuery would look something like this, though the submit function is not currently giving me any visible results.
$("#donateBtn").click(function() {
if (!$.isNumeric($("#other-amount").val())) {
$("#dataWarning").show();
$(".metric-amount").hide();
$(".metric-message").hide();
} else {
$("#amountSend").submit(function() {
var url = "/thank-you";
$(".metric-amount").appendTo("url");
});
}
})
I also got some decent results using a PHP method:
<form id="amountSend" method="post" action="/thank-you.php">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount" name="donation"></input>
</form>
<button id="donateBtn" type="submit">DONATE<span class="metric-amount"></span></button>
<script>
$("#donateBtn").click(function() {
if (!$.isNumeric($("#other-amount").val())) {
$("#dataWarning").show();
$(".metric-amount").hide();
$(".metric-message").hide();
} else {
$("#amountSend").submit();
}
});
</script>
This one will open the PHP file I set up (/thank-you.php, which i have stored just in the same root folder as my main HTML doc), but all the browser gives me is the raw HTML code of the PHP file. Here's the code I have in the PHP file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
Thank you for your donation of
<?php echo $_POST["donation"]; ?><br>
</body>
</html>
Anyway, I guess I'm wondering if I'm on the right track? Should I pursue the jQuery or PHP method? Can I even do this using only jQuery? I've seen a few posts on this subject already, but I thought I'd make a new one since the ones I've seen are all fairly vague, I haven't seen the same answer twice, and I'm not sure I fully understand exactly what I'm trying to accomplish, in terms of a visual confirmation of results.
Thanks!
First of all, you have several issues with your code.
Number one: The formulary you have there is bad coded, the form tag needs to have the action and method attributes, not the submit button.
And in top of that, the submit button needs to be inside the form tag, if is not in there, it will not have and kind of effect.
Number two: If you are gonna submit the formulary to a php file and handle the request there ,you need the file to be running on a server (local or whatever). PHP is a server language, if you open the file directly in a browser, it will show you the code it has inside and will not work.
Hope it helps!
In one of my webpage i need to add PayPal payment button, in which value has to be entered by input.
i got this script to add PayPal button:
<script
async="async" src="https://www.paypalobjects.com/js/external/paypal-button.min.js?merchant=email#adress.com"
data-button="paynow"
data-amount="5"
data-currency="USD">
</script>
Now i have to change the value of "data-amount" every time by Input from User.
I tried to use onkeyup, setAttribute but both don't seem to work. Please suggest what should i do or where i'm making mistake.
<!DOCTYPE html>
<html>
<script>
function showMe(e) {
var x=e.value;
document.getElementsById("paypal").setAttribute("data-amount", "x");
}
</script>
<body>
Amount: <input type="number" name="amount" id="amount" onkeyup="showMe(this)" required>
<script id="paypal"
async="async" src="https://www.paypalobjects.com/js/external/paypal-button.min.js?merchant=payPalmerchantId"
data-button="paynow"
data-currency="USD">
</script>
<br><br><br>
<p>You will be redirected to Payment Gateway..</p>
</body>
</html>
try this..
function showMe(e) {
var x=e.value;
$("#paypal").attr("data-amount", x);
}
or doing everything in jquery
$("#amount").on('input', function() {
$("#paypal").attr("data-amount", $("#amount").val());
});
I'm not familiar with PayPal scripts, but as I know, such types of embedding set attributes and any other features at step of initializing...
So you have to reload your script.
You could also search for the ability to change attributes with the help of API provided by PayPal
Update:
I've just tried to insert your code into my local page...
Your script searches for element with id "paypal", but if you look at your code after tha page loads, you won't see even "script" tag which refers to the paypal js file. You'll see a form instead. Try to search for "script" word here and you won't find that tag. At least this reason is why your script doesn't work.
What I am trying to do in the code below is to change the text in the Div1 tag with the information in the text input. The thing I want to accomplish is that the text is saved when I reload/quit the page or immediately when it is changed. Is this possible?
Thanks in advance.
<div id="Div1">
<p>Hi</p>
</div>
<input type="text" id='Input'/>
<input type="button" value="submit" onclick="GetInput();" />
<script type="text/javascript">
function GetInput () {
var Input = document.getElementById("Input").value;
document.getElementById('Div1').innerHTML= (Input);
}
</script>
Javascript is a client-side language. This means that the page elements (collectively known as the DOM) are only altered after the page is loaded from the web server and rendered in your browser. Javascript can change these but can not save any data.
In order to save data (persistence), you will need some type of data store. This is usually accomplished with a database running on a server. You will need to get your hands on one or possibly rent some storage space.
Try this, it may help you.
Save value:
localStorage.setItem("name", $('#Input').val());
Get value:
localStorage.getItem("name");
<div ng-app>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here" id="inputtext">
<input class="btn-primary" type="submit" value="add">
</form>
<script type="text/javascript" src="js/process1/Process1Controller.js"></script>
I want to load specified js file after html load since id of input textbox is used in js .
i have seen different thread and done many experiments for this like
$scope.$on('$viewContentLoaded', function(){
})
but issue not resolved
This is a hack, and not likely the proper way to do things, but try using ng-if to dynamically populate the items on the page:
//HTML
<script ng-init='myVariable = true' ng-if='myVariable' type="text/javascript" src="myJsToLoad.js"></script>
again, this is not the proper way to do things in angular, but it should work
As per my suggestion,
put the entire js code in a function, like below:
function loadmyjs(){
// put your entire related js code here...
}
And inside the current controller, call that js method like, When your id is created....
loadmyjs();
I got a bit stuck and would appreciate any help.
Intro
In short (I hope): I am creating a website (only local at the moment) which has stored city names and some important/interesting values (for example population, time, currency). I use a MySQL database to store the data. Three of these tables relevant to this case: Table 1. stores cities as values. table 2. stores the "title" of the relevant data (population, current time, currency). The third table the actual value (100 000, 12:30, Euro). I am using php to communicate between the database and the html.
Desired outcome:
A search box is used to find a city of interest. The web page prints the selected city in the top of the page and some relevant data of the city inside two divs.
Problem
How can I get the value of autocomplete back to php in order to make three different SQL queries on the same page depending on the selection?
I read that you could use a php -file as the source of the autocomplete (now on an array, values stored from the database) and somehow autocomplete could retrieve other data based on the users' selection. But will it work if I am not using any other jquery-ui component? How would it actually be written in code?
EDIT
I read shortly about:
Sending it as POST, but can it be done in the same page?
Use sessions
Use AJAX
What is the easiest/best to understand/use?
Any other suggestions?/help?/tips?
At this point my stack has overflown.
Summary
What is a easy to learn and correct way to handle communication from javascript/jQuery back to PHP while staying on the same page?
Code
<?php
require_once "dataPDO.php"; //All of the sql-queries
$databaseHandler = new dataPDO();
$list=$databaseHandler->allCities(); //a list of all the cities
?>
<!doctype html>
<html>
<head>
<title>Choose a city</title>
<meta charset="utf-8">
<!-- needed by autocomplete -->
<link rel="stylesheet" href="js/jquery.ui.all.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.position.js"></script>
<script src="js/jquery.ui.menu.js"></script>
<script src="js/jquery.ui.autocomplete.js"></script>
<script>
$(function() {
var names=<?php echo json_encode($list); ?>;
$("#cities").autocomplete({
source: names, minLength: 2
});
});
$(document).ready(function () {
$('#cities').on('autocompletechange change', function () {
var data = $('#city').html('Chosen city: ' + this.value);
}).change();
});
</script>
</head>
<body>
<div>
<div class="ui-widget">
<label for="cities">Search for a city:</label>
<input id="cities">
<div id="city"></div>
</div>
</div>
<div>
<section class="left">
<?php
try {
$databaseHandler->information(1);//(hardcoded) information belonging to the first city
}
catch(PDOException $e)
{
echo $e->getMessage();
}
?>
</section>
<section class="right">
<?php
try {
$databaseHandler->values(1);//(hardcoded) information values belonging to the first city
}
catch(PDOException $e)
{
echo $e->getMessage();
}
?>
</section>
</div>
</body>
You certainly do not need to use JQuery or another framework, however, it sure does make it a lot easier to do these types of things. RyanS' comment about using JQuery makes a lot of sense for this reason. You'd just be reinventing the wheel.
Basically, the process will be to make a PHP file that takes some parameters through GET or POST and then uses those parameters to display the data. Once you have that file in place, you can use Javascript to trigger an event to call that PHP script. For instance, you can say when someone selects a value from a drop down menu, then pass these parameters to the PHP script and display the output from there into a div that you have on the same page as the drop down menu.