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/
Related
I am using a $.getJSON method to retrieve weather data from open weather. When i use an explicit URL string for the document ready function, I am able to retrieve the values from the response JSON and write them to the page.
This works fine.
I am attempting to create a basic user input to query the data by zip code. I've created a nested function with the API URL as a concatenated string. I am unable to determine why the code in the nested function submitZip is not writing the response to the page in the same way that the document ready function did.
I have tried debugging and it appears that the string is concatenating correctly and making the API call successfully, but for some reason I am unable retrieve data from the response. Any ideas on I may have incorrect here?
var place = document.getElementById("meat");
var header = document.getElementById("header");
$(document).ready(function () {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=36830&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial", function (data) {
place.innerText = data.main.temp;
});
});
var weather = document.getElementById("Weather");
function submitZip() {
var zipCode = document.getElementById("Zip-Code");
var fullURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode.value + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
$.getJSON(fullURL, function (data) {
//var currentTemp = api.main.temp;
weather.innertText = data.main.temp;
});
return weather;
};
var submitButton = document.getElementById("submit-zip");
submitButton.addEventListener('click', submitZip, false);
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Weather</title>
</head>
<body>
<h2 id="header">This page will be utilitzed as practice for API</h2>
<p id="meat"></p>
<form>
<p>Enter the Zip Code to see the Weather there!</p>
<input id = "Zip-Code" type="text"/>
<input id = "submit-zip" type="submit"/>
</form>
<div>
<p id= "Weather"></p>
</div>
</body>
</html>
<script src="javascript/main.js"></script>
</body>
</html>
Your page gets reloaded as soon as you press the submit button.
Change the type of the button to button or
prevent the default behaviour using event.prevenDefault()
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Weather</title>
</head>
<body>
<h2 id="header">This page will be utilitzed as practice for API</h2>
<p id="meat"></p>
<form>
<p>Enter the Zip Code to see the Weather there!</p>
<input id = "Zip-Code" type="text"/>
<input id = "submit-zip" type="submit"/>
</form>
<div>
<p id= "Weather"></p>
</div>
</body>
</html>
<script src="javascript/main.js"></script>
</body>
</html>
var place = document.getElementById("meat");
var header = document.getElementById("header");
$(document).ready(function () {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=36830&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial", function (data) {
place.innerText = data.main.temp;
});
});
var weather = document.getElementById("Weather");
function submitZip(e) {
e.preventDefault();
var zipCode = document.getElementById("Zip-Code");
var fullURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode.value + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
$.getJSON(fullURL, function (data) {
//var currentTemp = api.main.temp;
weather.innertText = data.main.temp;
});
return weather;
};
var submitButton = document.getElementById("submit-zip");
submitButton.addEventListener('click', submitZip, false);
Two issues:
The form is submitted (and reloads) when you click the button. Avoid this by calling e.preventDefault() on the event object.
You have a spelling mistake in weather.innertText. Remove the extra t in the middle
Working code:
var place = document.getElementById("meat");
var header = document.getElementById("header");
$(document).ready(function () {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=36830&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial", function (data) {
place.innerText = data.main.temp;
});
});
var weather = document.getElementById("Weather");
function submitZip(e) {
var zipCode = document.getElementById("Zip-Code");
var fullURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode.value + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
$.getJSON(fullURL, function (data) {
//var currentTemp = api.main.temp;
weather.innerText = data.main.temp;
});
e.preventDefault();
};
var submitButton = document.getElementById("submit-zip");
submitButton.addEventListener('click', submitZip, false);
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Weather</title>
</head>
<body>
<h2 id="header">This page will be utilitzed as practice for API</h2>
<p id="meat"></p>
<form>
<p>Enter the Zip Code to see the Weather there!</p>
<input id = "Zip-Code" type="text"/>
<input id = "submit-zip" type="submit"/>
</form>
<div>
<p id= "Weather"></p>
</div>
</body>
</html>
<script src="javascript/main.js"></script>
</body>
</html>
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;
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) {
i need a little help, figuring out my javascript output format
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>cleaner</title>
<script language="javascript" type="text/javascript">
function show (text){
var userInput = document.getElementById('textbox').value;
userInput = userInput.replace(/\W/g, '');
userInput = userInput.replace(/ /gi,", ");
document.getElementById('text').innerHTML = userInput;
}
</script>
</head>
<body>
<input type='textbox' name='textbox' id='textbox' value="Title Here"/>
<input type=button name=button value="OK" onClick="show()"/>
<div id="text"></div></body></html>
my input
& ^A % - _ ^ % clean* this$ keyword-
my result is
A_cleanthiskeyword
i want a result like this
a, clean, this, keyword
what should i add in my replace code?
thanks
Please check this code this will works for you
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>cleaner</title>
<script language="javascript" type="text/javascript">
function show ()
{
var userInput = document.getElementById('textbox').value;
var num = userInput.indexOf('A');
userInput = userInput.match(/[a-z]+/gi).join(", ").toLowerCase().replace(/ /g, '');
document.getElementById('text').innerHTML = userInput.substring(num-1);
}
}
</script>
</head>
<body>
<input type='textbox' name='textbox' id='textbox' value="Title Here"/>
<input type=button name=button value="OK" onClick="show()"/>
<div id="text"></div>
</body></html>
Here is link for JSFiddle for your code jsfiddle
Try this:
function show (text){
var userInput = document.getElementById('textbox').value;
userInput = userInput.match(/[a-z]+/gi).join(", ").toLowerCase();
document.getElementById('text').innerHTML = userInput;
}
I have here a working code that lets the user input something and it displays the output right away, but I want to create a function triggered by a button that would clear the output area itself. Is this possible with my code?
Here is my complete code:
<html>
<meta charset="UTF-8">
<head>
<title>Sample Array</title>
<script>var index = 0;</script>
</head>
<body>
Input:
<input type="text" id="input">
<input type="button" value="GO" onClick="press(input.value)">
<p id = "display">
<script>
var sample = new Array();
function press(Number)
{
if ( Number != '' )
{
sample[index] = Number;
document.getElementById("display").innerHTML += sample[index] + "<br>";
index++;
}
else
alert("empty");
document.getElementById('input').value = '';
}
</script>
</body>
</html>
Try this,
Javascript:
function Clean(){
document.getElementById('display').innerHTML='';
}
HTML:
<input type="button" value="Clean" onClick="Clean()"/>
Do this:
Notes:
-I have closed the P element.
-A new button was added "Clean" and you can use JQuery as it is shown below to clean the output (remember to have JQuery referenced in your page).
<html>
<meta charset="UTF-8">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Sample Array</title>
<script>var index = 0;</script>
</head>
<body>
Input:
<input type="text" id="input" />
<input type="button" value="GO" onClick="press(input.value)"/>
<input type="button" value="Clean" onClick="$('#display').html('');"/>
<p id = "display"></p>
<script>
var sample = new Array();
function press(Number)
{
if ( Number != '' )
{
sample[index] = Number;
document.getElementById("display").innerHTML += sample[index] + "<br>";
index++;
}
else
alert("empty");
document.getElementById('input').value = '';
}
</script>
</body>