I need to search for a 'term' and then display the data in the html page.
See more info here.
http://www.nlm.nih.gov/medlineplus/webservices.html
The data that needs to be displayed is
"title"
"FullSummary"
"groupName"
"snippet"
I am a beginner when it comes to ajax and javascrpt
What I have so far is:
<html>
<head runat="server">
<title></title>
<script type="text/javascript">
function DoSearch() {
'http://wsearch.nlm.nih.gov/ws/query?db=healthTopics&term='($get("searchterm"), DoCallback);
}
function DoCallback(result) {
for (var i = 0; i < result.length; i++) {
$get("searchterm").innerHTML += results[i] + "<br/>";
}
}
</script>
</head>
<body>
<form name="input">
Search Term: <input type="text" name="searchterm" value=""><br>
<input type="button" onclick="mySearch()" value="Search">
</form>
<div id="searchResultsPlaceholder">resultsDiv
</div>
</body>
</html>
Can anyone advise?
Ajax will work based on Same Origin Policy.
Assume you are using Same Origin Policy while accessing url via XMLHttpRequest
<html>
<head runat="server">
<title></title>
<script type="text/javascript">
function mySearch()
{
var term = $("#searchterm").val();
$.get("http://wsearch.nlm.nih.gov/ws/query",
{
db:"healthTopics",
term:term
},
function(result,status){
var resultHTML=""
for (var i = 0; i < result.length; i++) {
resultHTML + = results[i] + "<br/>";
}
$get("searchResultsPlaceholder").innerHTML =resultHTML;
});
}
</script>
</head>
<body>
<form name="input">
Search Term: <input type="text" name="searchterm" value=""><br>
<input type="button" onclick="mySearch()" value="Search">
</form>
<div id="searchResultsPlaceholder"></div>
</body>
</html>
Related
So, basically i have a textbox and file upload button . What i want when user enter integer in textbox for eg :10 then i want to display file upload button 10 times.
Here is a working demo hope it will helpful for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function AppendRow(e) {
var val = e.value;
if (val !== "") {
var html ='';
for (var i = 0; i < val; i++) {
html +='<input type="file" id="file">';
}
$("#append").empty().append(html);
}
}
</script>
</head>
<body>
<input type="text" id="input1" onkeyup="AppendRow(this)"/>
<div id="append">
<div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keyup(function(){
var val = $(this).val();
if (val !== "") {
var html;
for (var i = 0; i < val; i++) {
html = '<input type="file" id="file">';
$("#append").append(html);
}
}
});
});
</script>
</head>
<body>
<input type="text" id="input" />
<div id="append">
</div>
</body>
</html>
Please use the following code
<input [(ngModel)]="count" />
<div *ngFor="let item of [].constructor(count); ">
<input type='file'>
</div>
I would like to continue working with the data from the ModalDialog in the function abfrage().It is important that I get the data there I want to return it.i would like to create a loop with several input fields later on html, so i don't write this on the html page.
function abfrage(){
let count = 1;
let html = '<input type="text" name="text">';
var t = HtmlService.createTemplateFromFile('dialogForm');
let dialog = ui.showModalDialog(t.evaluate(), 'Hello');
}
dialogForm.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Userform</h1>
<table>
<?!= html ?>
</table>
<input type="button" value="Close" onclick="google.script.host.close()" >
<input type="submit" value="Submit" class="action">
</body>
</html>
gs:
function abfrage(){
let count = 1;
let html = '<form><br /><input type="text" name="text">';
var t = HtmlService.createTemplateFromFile('dialogForm');
let dialog = ui.showModalDialog(t.evaluate(), 'Hello');
}
function serversidefunctionname(obj) {
var name=obj.name;
//process name
//return html if desired
}
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Userform</h1>
<?!= html ?>
<br /><input type="button" value="Close" onclick="google.script.host.close()" >
<br /><input type="button" value="Submit" class="action" onClick="processForm(this.parentNode);" />
</form>
<script>
function processForm(obj) {
google.script.run
.withSuccessHandler(function(retobj){
//process return from server side function if any
})
.serversidefunctionname(obj);
}
</script>
</body>
</html>
When I click on back button of next page the check box value should not be reset.
It should be same as I checked or unchecked. The code from the first and next page is below.
First Page
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" name="code" value="ECE">ECE<br>
<input type="checkbox" name="code" value="CSE">CSE<br>
<input type="checkbox" name="code" value="ISE">ISE<br>
<br>
<input type="button" onclick="dropFunction()" value="save">
<br><br>
<script>
function dropFunction() {
var branch = document.getElementsByName("code");
var out = "";
for (var i = 0; i < branch.length; i++) {
if (branch[i].checked == true) {
out = out + branch[i].value + " ";
window.location.href="next.html";
}
}
}
</script>
</form>
</body>
</html>
Next Page
<html>
<head>
<title>Welcome to </title>
</head>
<body color="yellow" text="blue">
<h1>welcome to page</h1>
<h2>here we go </h2>
<p> hello everybody<br></p>
</body>
<image src="D:\images.jpg" width="300" height="200"><br>
<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
window.location.href="first.html";
}
</script>
</body>
</html>
Full solution: example. First add ids to your checkboxes:
<input type="checkbox" name="code" value="ECE" id='1'>ECE<br>
<input type="checkbox" name="code" value="CSE" id='2'>CSE<br>
<input type="checkbox" name="code" value="ISE" id='3'>ISE<br>
<input id="spy" style="visibility:hidden"/>
Then change your dropFunction:
function dropFunction() {
var branch = document.getElementsByName("code");
var out = "";
localStorage.clear();
for (var i = 0; i < branch.length; i++)
if (branch[i].checked == true)
localStorage.setItem(branch[i].id, true);
for (var i = 0; i < branch.length; i++) {
if (branch[i].checked == true) {
out = out + branch[i].value + " ";
window.location.href="next.html";
}
}
}
And add some new javascript code to first.html:
window.onload = function() {
var spy = document.getElementById("spy");
if(spy.value=='visited')
for(var i=1;i<=3;i++)
if(localStorage.getItem(i))
document.getElementById(i).checked=true;
spy.value = 'visited';
}
I want to use HTML form elements in JavaScript. I used them like this but it doesn't work:
<form name="M">
<input name="in1" type="text" id="in1">
<input type="button" name="btn1" id="btn1" value="Check" onclick="f1()">
</form>
<script src="script.js"></script>
...and the JavaScript code was like this:
var s1 = 60;
function f1() {
``
if (document.M.elements[0] == s1) {
window.location = 'tick.htm';
} else {
window.location = 'cross.htm';
}
}
What is wrong here?
Just to give some clarification on why this was not working. In the test, document.M.elements[0] is a reference to the input object, not the value of the input. Using document.M.elements[0].value gives us the current value of the input.
//Ignore this, for display only.
function output(msg) {
var element = document.getElementById('output');
element.innerHTML = msg;
};
function f1() {
var s1 = 60;
if (document.M.elements[0].value == s1) {
output('Pass');
} else {
output('Fail');
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form name="M">
<input name="in1" type="text" id="in1">
<input type="button" name="btn1" id="btn1" value="Check" onclick="f1()">
</form>
<b id="output"></b>
</body>
</html>
I am practicing on how to query url. But i could not get my expected output. Here is my code:
Form 1:
<html>
<head>
<title>Save Value</title>
</head>
<body>
<form action="display.html" method="get">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" />
</label>
<input type="submit" value="submit" />
</form>
</body>
</html>
Form 2:
<html>
<head>
<title>Display</title>
<script type="text/javascript">
<script type="text/javascript">
function queryVar(variable) {
var query = location.search.substring(1);
var vars = query.split("&");
var i;
for (i = 0; i < vars.lenght; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return(false);
}
</script>
</head>
<body>
<form action="#">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" readonly="readonly" />
</label>
<script type="text/javascript">
var firstName = document.getElementById("name").value;
firstName = location.search.substring(1);
</script>
</form>
</body>
</html>
So when i clicked submit button it will go to form 2 and will display the value that i typed in the form 1.
Thank you for your help!
Here's the solution for what you exactly wanted to do.
Form 1
<html>
<head>
<title>Save Value</title>
</head>
<body>
<form action="display.html" method="get">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" />
</label>
<input type="submit" value="submit" />
</form>
</body>
</html>
Form 2
<html>
<head>
<title>Display</title>
<script type="text/javascript">
function queryVar(variable) {
var query = location.search.substring(1);
var vars = query.split("&");
var i;
for (i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return(false);
}
</script>
</head>
<body>
<form action="#">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" readonly="readonly" />
</label>
<script type="text/javascript">
document.getElementById("name").value = queryVar("name");
</script>
</form>
</body>
</html>
<script type="text/javascript">
function queryVar(variable) {
var query = location.search.substring(1);
var vars = query.split("&");
var i;
for (i = 0; i < vars.lenght; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return(false);
}
</script>
</head>
<body>
<form action="#">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" readonly="readonly" />
</label>
</form>
<script type="text/javascript">
document.getElementById("name").value=location.search.substring(1);
</script>
remove the duplicated opening tag for first script
you forgot to assign the data to your field, I did (also put the second script outside of form)
Submitted form data (when using post) goes in the HTTP Request headers and are not accessible for JavaScript. You need to use a code preprocessor (like PHP) or pass the data to the url hash which would be extremely rare.
When using get, you should still use a preprocessor and not javascript for doing that. That was the actual purpose when introducing the "get" request type.