I have a form that should submit a request to the open movie database and return the movies. But it isn't returning anything and it seems as though loadData isn't even working. Because $greeting.text('So, you want to search for ' + movieStr); isn't working either. It should show So you want to search for in the html and it doesn't appear. If go directly to www.omdbapi.com/?t=fall it returns a json.
function loadData(){
var $movieElem = $('movie-items');
var $greeting = $('#greeting');
$movieElem.text("");
var movieStr = $('#movie').val();
var omdbapiUrl = 'www.omdbapi.com/?t='+ movieStr;
$greeting.text('So, you want to search for ' + movieStr);
$.getJSON(omdbapiUrl, function(data){
items = data.response.docs;
for (var i=0; i < items.length; i++){
var item = items[i];
$movieElem.append('<li>'+ '<p>' + item.Title + '<p>' +'<p>' + item.Director + '</p>'+'</li>');
};
}).error(function(e)){
});
$('#form-container').submit(loadData);
}
<form id="form-container" class="form-container">
<label for="movie">Movie:</label><input type="text" id="movie" value=""><br>
<button id="submit-btn">Submit</button>
</form>
<h2 id="greeting">What do you want to search for? </h2>
<ul id="movie-items"> Movie info will appear here</ul>
Thanks for the suggestion. I modified my code and it still isn't showing anything. I think the primary issue is that loadData isn't being called because nothing is appearing in the console.log when I added a console.log statement from within loadData. Is there something wrong with this line that is loading the data? I don't see any errors in the console.log
$('#form-container').submit(loadData);
This is from the html
<form id="form-container" class="form-container">
This isn't showing anything in the console.log
console.log("Hello from loadData");
This is script.js
function loadData(){
console.log("Hello from loadData");
var $movieElem = $('movie-items');
var $greeting = $('#greeting');
$movieElem.text("");
var movieStr = $('#movie').val();
$greeting.text('So, you want to search for ' + movieStr);
var omdbapiUrl = 'http://www.omdbapi.com/?t=fall';
$(document).ready(function () {
$.getJSON(omdbapiUrl, function(data){
console.log(data);
}).error(function(e){
});
});
$('#form-container').submit(loadData);
}
This is the html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="form-container" class="form-container">
<label for="movie">Movie:</label><input type="text" id="movie" value=""><br>
<button id="submit-btn">Submit</button>
</form>
<h2 id="greeting">What do you want to search for? </h2>
<ul id="movie-items"> Movie info will appear here</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script src="js/script.js"></script>
</body>
</html>
Us the example bellow. You are adding an extra parenthesis and you are missing the http: for external calls
the problem: .error(function(e)){
$(document).ready(function() {
function loadData(e) {
e.preventDefault();
console.log("Hello from loadData");
var $movieElem = $('movie-items');
var $greeting = $('#greeting');
$movieElem.text("");
var movieStr = $('#movie').val();
$greeting.text('So, you want to search for ' + movieStr);
var omdbapiUrl = 'http://www.omdbapi.com/?t=fall';
$.getJSON(omdbapiUrl, function(data) {
console.log(data);
}).error(function(e) {
});
}
$('#form-container').submit(loadData);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="form-container" class="form-container">
<label for="movie">Movie:</label><input type="text" id="movie" value=""><br>
<button id="submit-btn">Submit</button>
</form>
<h2 id="greeting">What do you want to search for? </h2>
<ul id="movie-items"> Movie info will appear here</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script src="js/script.js"></script>
</body>
</html>
The solution was to remove all the extra stuff in my script.js file that wasn't needed and wasn't being called and just leave Panagiotis Vrs's code.
var omdbapiUrl = 'http://www.omdbapi.com/?t=fall';
$(document).ready(function () {
$.getJSON(omdbapiUrl, function(data){
console.log(data);
}).error(function(e){
});
});
EDIT:
I have used Panagiotis Vr's code to instead wrap everything in a document.ready as mentioned in the below post.
Related
I have a tool that is supposed to be an easy way to create a checklist, and it works, but what happens when I use it for something with two checkboxes, it creates a new line between each one, is there a way to stop it from doing that? my code is here for yes/no
<!DOCTYPE html>
<html>
<h1>Create a checklist</h1>
<div>
<input type="text" placeholder="Text for object" id="txt" />
<button onclick="addYN()">Add yes/no</button>
</div>
</html>
<div style="background-color: grey;" id="prv"></div>
<script>
var pv = document.getElementById("prv");
var txt = document.getElementById("txt");
function getVarYn() {
let tx = txt.value;
return (
"<div><p>" +
tx +
"</p> <p> yes</p> <input type = 'checkbox'/> <p>no </p> <input type = 'checkbox'/> </div> "
);
}
function addYN() {
var t = txt.value;
pv.innerHTML = pv.innerHTML + getVarYn();
}
</script>
The problem is not the <div> you create but all the <p> tags. <p> tags are paragraphs and they do create "a new block/line"
See like so you would have no new lines
var pv = document.getElementById("prv");
var txt = document.getElementById("txt");
function getVarYn() {
let tx = txt.value;
return (
"<div>" +
tx +
" yes<input type = 'checkbox'/>no<input type = 'checkbox'/> </div> "
);
}
function addYN() {
var t = txt.value;
pv.innerHTML = pv.innerHTML + getVarYn();
}
<h1>Create a checklist</h1>
<div>
<input type="text" placeholder="Text for object" id="txt" />
<button onclick="addYN()">Add yes/no</button>
</div>
<div style="background-color: grey;" id="prv"></div>
Note: the closing </html> element should always be the very last element of your HTML document. And everything else should be inside the <body> element which you do not have. The basic structure looks like so
<!DOCTYPE html>
<html>
<body>
<!-- ADD all your HTML content here -->
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<!-- BUT NOW you need to finish with all the HTML here -->
<!-- THE VERY LAST thing here before the closing </body> -->
<!-- should be the <script> tags -->
</body>
</html>
I am trying to make mobile app using Phonegap. I am writing a code using HTML to search an ID in google sheet and give the complete row in return. Following is my HTML code.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="form-row">
<div class="form-group col-md-2">
<label for="idNum">ID Number</label>
<input type="text" class="form-control" id="idNum">
<output id="rnum"></output>
</div>
<button type="button" class="btn btn-outline-info" id="searchbtn" onclick="search_ID()">Search Profile</button>
</div>
<p id="demo"></p>
<form class="google_script" method="POST"
action="https://script.google.com/macros/s/AKfycbwlHuXwW1fEDfeer1ot6Ltb9cqT83VRZfQQQdTqZSgPvpYapUs/exec">
<script data-cfasync="false" src="index.js"></script>
</body>
</html>
and index.js file is:
function search_ID() {
var input = document.getElementById("idNum").value;
if (isNaN(input)) {
voteable = "Input is not a number";
} else {
voteable = (input.length ==6 ) ? "Correct Value" : "Wrong Value";
}
document.getElementById("demo").innerHTML = voteable;
google.script.run.doSomething();
}
I want to call function in Google Script from local HTML file to get the data from google sheet (Given public view). Please help.
I think you want to do something like this:
function search_ID() {
var input = document.getElementById("idNum").value;
if (isNaN(input)) {
voteable = "Input is not a number";
} else {
voteable = (input.length ==6 ) ? "Correct Value" : "Wrong Value";
}
document.getElementById("demo").innerHTML = voteable;
google.script.run.
.witSuccessHandler(function(obj){
window.alert(obj.msg);
})
doSomething();
}
You can also do it like this:
google.script.run
.withSuccessHandler(functionname)
.doSomething()
function functionname() {
window.alert('obj.msg');
}
gs:
function doSomething() {
//
return {msg:"I did something and returned;"}
}
client to server communication
I made a tool which make my work a little easier by inserting a value into a url in a new window on multiple sites. It was working quite well but now I am having the problem of the search value being cleared onsubmit.
Javascript:
<script language="JAVASCRIPT">
function run() {
var request = document.text.query.value;
var req = "";
var endofurl = "endofurl.html";
for(var i = 0; i < request.length; i++) {
var ch;
if((ch = request.substring(i, i + 1)) == " ") req += " ";
else req += ch;
}
if(document.search.website.checked) {
var website = open( "https://www.website.com/" + req, "website");
}
//--></script>
HTML:
<form name="search">
Please select the networks you want to use.
<p>
</center>
</p>
<div class="row">
<div class="column">
<br>
<input name="website" type="checkbox">Website to Search
<form name="text" onsubmit="run(); return false;">
<center>And enter your Query.</center>
<center>
<input name="query" placeholder="Steropodon" value="" size="50" type="TEXT">
<input value="Search" onclick="run()" type="BUTTON">
</center>
So far, return false had been working to keep the value of the input in the form="text" input name="query" but now it seems to clear it and reload the page. I'm not sure what changed.
You have errors in your code opening and closing the tags.
Try this code. It works:
<html>
<head></head>
<body>
Please select the networks you want to use
<div class="row">
<div class="column">
<br>
<input name="website" type="checkbox">Website to Search
<form name="text" onsubmit="run(); return false;">
<center>And enter your Query.</center>
<center>
<input name="query" placeholder="Steropodon" value="" size="50" type="TEXT">
<input value="Search" onclick="run()" type="BUTTON">
</center>
</form>
</div>
</div>
<script language="JAVASCRIPT">
function run() {
var request = document.text.query.value;
var req = "";
var endofurl = "endofurl.html";
for(var i = 0; i < request.length; i++) {
var ch;
if((ch = request.substring(i, i + 1)) == " ") req += " ";
else req += ch;
}
var checkbox = document.getElementsByName("website");
if(checkbox[0].checked) {
var website = open("https://www.website.com/" + req,
"website");
}
}
</script>
</body>
</html>
Hope it helps.
I fixed it. It was not the tags. I had only pasted a small amount of the total code to make it easier to read but I failed at making it easier to read. The problem was undefined inputs. I have been adding many if statements but didn't have a corrosponding checkbox. Oops.
Thanks for the help.
So my dilemmna is that I don't know how to record what the user inputs. (my goal as of now is to simply print what the user enters in an input box, not to add the numbers)
var x = document.getElementById('textboxone').value;
Why isn't this working?
<!DOCTYPE html>
<html>
<head>
<link href="cssFiles/ttt.css" rel="stylesheet" type="text/css"></link>
<script Language ="JavaScript">
//create skeleton divs
function createDivs () {
var s;
s = '<div class="simplebox" id="divBody">Bla 3 bla</div>';
document.write(s);
}
//create body skeleton
function createBodyDivs (sID) {
var s;
s = '<div class="smallerbox" id="divInput">';
s += '<div id="textboxone"><span>Add <input type="text" ></input></span></div>';
s += '<div id="textboxtwo"><span>To <input type="text" ></input></span></div>';
s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';
var oDiv = document.getElementById(sID);
oDiv.innerHTML = s;
}
//adding the two numbers from input boxes
function addnumbers(form){
var x = document.getElementById('textboxone').value;
alert(x)
}
</script>
</head>
<body>
<script Language ="JavaScript">
createDivs();
createBodyDivs('divBody');
</script>
</body>
</html>
Check out AngularJS my friend! :)
JSFIddle Demo
<div ng-app="">
<input type="text" ng-model="data.message" />
<h1>{{data.message}}</h1>
<div class="{{data.message}}"></div>
</div>
using: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js
I've quickly checked the code and first of all you input button will not trigger addNumbers(form) since the onclick of the input doesn't point of that function.
Then for the function itself, document.getElementById('textboxone').value returns undefined because the actual value you want is in the <input> and not in the <div id="textboxone">
So if you have you're createBodyDivs function modified so that the id where on the input, then this document.getElementById('textboxone').value would actually return the correct value.
function createBodyDivs (sID) {
var s;
s = '<div class="smallerbox" id="divInput">';
s += '<div><span>Add <input type="text" id="textboxone" ></input></span></div>';
s += '<div><span>To <input type="text" id="textboxtwo" ></input></span></div>';
s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';
var oDiv = document.getElementById(sID);
oDiv.innerHTML = s;
}
For the click binding, you button should be the following for it to work:
<input type="button" value = "Answer Generator" OnClick="addnumbers()"></input>
my intension is to send a hidden count value form view to controller in spring mvc,everything is working but iam not getting the count in the controller,plese do some favour
my view is
<HTML>
<HEAD>
<script type="text/javascript" src="resources/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var i = 1;
//var c = 0;
$("#AddSection").click(function() {
i++;
$("<div />").append($("<input />", {
type: "text",
name: "Section" + i
})).appendTo("#someContainer");
//c = i;
document.getElementsByName("Count").Value = i;
alert(i);
});
$("input").live("click", function() {
$("span").text("Section: " + this.name);
});
});
</SCRIPT>
</HEAD>
<BODY>
<form method="get" action="addProfile">
ProfileName<input type="text" name="pname"><br />
SectionName<input type="text" name="Section1">
<input type="button" id="AddSection" value="AddSection">
<div id="someContainer"></div>
<input type="hidden" id="hiddenSection" name="Count" />
<span></span> <input type="submit" value="save">
</form>
</BODY>
</HTML>
You have a typo:
document.getElementsByName("Count").Value = i;
// ^----Typo!
value is lowercase:
document.getElementsByName("Count")[0].value = i;
// ^----Fixed!
// ^-------- return HTML Collection, take first.
Better use id:
document.getElementById("hiddenSection").value = i;
You're using jQuery, so you can use one of the following:
$("#hiddenSection").val(i);
$('input[name="Count"]').val(i);