Hi i have return url for JSON search. Now i would like to have a textfield. In which people can enter there search terms. And when pressed submit. I would like to go and run the search.
So far i have this code. the reading of the JSON works fine. Because when i fill in a complete url it show me the desired results. But i'am doing something incorrectly in building the URL form the basis url + search terms.
I would be great if someone could explain me what i am doing wrong.
document.getElementById('submit').onclick = function() {
var urlFD = "http://domain.com/support/search/solutions.json?term=" + document.getElementById('txt_name').value);
$.getJSON('urlFD', function(data) {
var output="<ul>";
for (var i in data) {
output+="<li>" + data[i].title + "--" + data[i].desc+"</li>";
}
output+="</ul>";
document.getElementById("placeholder").innerHTML=output;
});
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input type="text" id="txt_name" />
<input type="button" name="submit" id="submit" value="Submit">
<div id="placeholder"> </div>
</body>
</html>
Dont quote your variable!
$.getJSON(urlFD, function(data) {
Related
I am currently learning to use the replace method in JS. I was able to get it to work in a simple function using the console to check the output. However I am now working on making a simple user interface to interact with the function and it has caused some difficulty. I can get the function to accept and re-print the user's text, but the replace portion doesn't seem to be functioning properly as I've written it. Here is the HTML:
<!DOCTYPE html>
<!-- Create a function grabText that replaces the char - with _ -->
<html lang="en">
<meta charset="utf-8">
<head>
<title>HMTL Template</title>
</head>
<body>
<input type="text" id="inputField"
placeholder="Input Text"/>
<button id="clickButton" onclick="grabText();">Run</button>
<p id="outputText"></p>
</body>
</html>
And here is the JS:
var inputText;
function grabText () {
inputText = document.querySelector("#inputField");
document.getElementById("outputText").innerHTML = inputText.value;
inputText.value.replace(/-/g , "_");
document.getElementById("outputText").innerHTML = inputText.value;
}
I suspect there is an issue with where and how I am using .value . Thanks for any help.
keep in mind replace returns a new string, it doesn't change the existing one.
var inputText;
function grabText() {
inputText = document.querySelector("#inputField");
document.getElementById("outputText").innerHTML = inputText.value.replace(/-/g, "_");
}
<input type="text" id="inputField" placeholder="Input Text" />
<button id="clickButton" onclick="grabText();">Run</button>
<p id="outputText"></p>
I am trying to make a Sign Up and Log In html. If user inputs data on SignUp.html, it will save as localStorage and if the data inputted on LogIn.html is not equal to the data inputteed in SignUp.html, it will not confirm. But somehow there is something wrong with the function.
Can someone please help me? I am still new to js
Here is SignUp.html
<!DOCTYPE html>
<html>
<head>
<script src = "JS.js"></script>
</head>
<body>
<form>
<input id="usernameS"></input>
<button onclick="confirmInput()" type="button">SignUp</button>
</form>
</body>
</html>
and LogIn.html
<!DOCTYPE html>
<html>
<head>
<script src = "JS.js"></script>
</head>
<body>
<form>
<input id="usernameL"></input>
<button onclick="LogInput()" type="button">LogIn</button>
</form>
</body>
</html>
Here is the js
var x = "document.getElementById('usernameS')";
localStorage.setItem("usernameS", x);
var y = "document.getElementById('usernameL')";
localStorage.setItem("usernameL", y);
function confirmInput() {
alert("Welcome " + usernameS.value + ". You are now registered.");
window.location.replace('LogIn.html'); }
function LogInput(x,y) {
if (x==y)
{unsernameS = document.forms[0].usernameL.value;
alert("Welcome " + usernameL.value + "! You just logged in.");}
else if (x!=y)
alert("Username not recognized");}
At least Fix typo in your code {unsernameS = document.forms[0].usernameL.value;
I'm currently trying to receive word information from Wiktionary, as said in the title. However, doing this approach doesn't work:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
function search(){
var a = document.getElementById('search');
var b = document.getElementById('content');
$.ajax({dataType: 'text/html', url: 'http://pl.wiktionary.org/w/index.php?title=' + a.value + '&printable=yes', success: function(data) { b.innerHTML = data; } });
}
</script>
</head>
<body>
<p>
<textarea id="search" rows="1" cols="40" style="resize: none;"></textarea>
<button onclick="search();">Search</button>
</p>
<p id="content">x</p>
</body>
</html>
When I enter a word(eg. myszka[little mouse]), it does not change the element's inner content and the console doesn't show anything either. The query, however, seems to work, as I'll get an 404 error when entering a word that doesn't exist.
Is it something obvious I'm missing, or...?
Thanks in advance
Instead of PHP, I want to use jQuery to get user input and pass in a function and update a "div".
My HTML(includes scripts) code is:
<head>
<title>Mobile Locale test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Mobile Locale this is!" />
<script>
var x;
$(document).ready(function()
{
x = $("#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
console.log(x);
</script>
</head>
<body>
<form>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit">Submit!</button>
<div id="test">This should change...</div>
</form>
</body>
What I want:
I want to get input from user and assign that input to x.
Then I want to complete a string and pass x in that string.
Then I want to write that complete sentence in div id="test".
I am stumbling this for more than 6 hours but got no success. Tried numerous codes but failed.
Referred w3schools jQuery form example but they are using form method="abcd.asp".
Thanks in advance...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var x;
$(document).ready(function()
{
var x = $("input#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
function CallSubmit()
{
var x = $("input#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
return false;
}
</script>
</head>
<body>
<form>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit" onclick="return CallSubmit();">Submit!</button>
<div id="test">This should change...</div>
</form>
</body>
</html>
Your script is executed on page load, when the input is empty - call the code on an event, like keyup
$(document).ready(function(){
$("#q").keyup(function() {
var name = "Hello " + this.value + ". Welcome to this site";
$("#test").text(name);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit">Submit!</button>
<div id="test">This should change...</div>
You could get the name in the click event of the button.
Working example : http://jsfiddle.net/jjjoeupp/
$('#submit').on('click', function()
{
x = $("#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
Hope it helps!!!
You can bind the focusoutevent with the input to dynamically change the div. Another approach would be to update on each keypress.
$(document).ready(function () {
$('#q').keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
if ($(this).val() != '') {
var x = $(this).val();
var name = "Your string " + x;
}
$('#test').text(name);
}
});
});
fiddle : http://jsfiddle.net/86evwkbx/
I am trying to get the user to put something into the text area and the output should be what he wrote repeapiting x amount of times, but I get an error "document.forme is undefined".
Can you please help me understand why it is undefined?
My code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>input home work</title>
<script type="text/javascript">
var help= document.forme.tryout.value;
for (x=1; x<=10;x++){
function numberCheak (){
document.write("this is"+" "+help++);
}
}
</script>
</head>
<body>
<form name="forme">
<input name="tryout" type="text" />
<input type="button" value="click me" onClick="numberCheak();"/>
</form>
</body>
</html>
Ok, you have a few problems. The first is that you are trying to access a form element that doesn't exist yet: the script is above the form element, so the form doesn't exist when you try to get it. If you move the script to the bottom of the page it will work better.
Second, the loop should be inside the function, not wrapped around the function.
Third, document.write has weird side effects and causes the document to be rewritten and will stop the script from continuing correctly.
Here's my revised script
function numberCheak() {
var help = document.forme.tryout.value;
for (var x = 1; x <= 10; x++) {
document.getElementById("output").innerHTML += help;
}
}
and the HTML form that goes with it
<form name="forme" id="forme">
<input name="tryout" type="text" />
<input type="button" value="click me" onclick="numberCheak();" />
<span id="output"></span>
</form>
You can see it in action on jsFiddle.
Forms are stored in collection and can be accessed like this:
var form = document.forms[i];
or
var form = document.forms[name];
In your case, i is 0 and name is forme.