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.
Related
I'm making a code where the user enters information and it stores it in an object, but when I check if the object is saved by alerting one of its values it says there is no such object.
here is my code.
let users = {};
function user(name,real){
this.username = name,
this.realname = real,
this.id = Math.floor(Math.random() *1000);
this.subs = 0,
this.videos = [],
this.listuser = function() {
return this.username;
}
};
function newuser(name, email,username){
users[name] = new user(username, name);
};
let savefile = () => {
var channame = string(document.getElementById('channame'));
var name = string(document.getElementById('name'));
var email = string(document.getElementById('email'));
newuser(name,email,channame);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>youtube ripoff</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br> <br><br><br><br><br>
<form action="">
<label for="username">Channel Name: </label>
<input type="text" id="channame" name="channelname"><br>
Real Name
<input type="text" id="name" name="name"><br>
Email
<input type="text" id="email" name="email"><br>
<input type="submit" value="Submit" onmousedown="newuser('name1','name#gmail.com','channelname1');">
<br><br><br><br>
<input type="button" value="Load Channels" id="seech" name="seechannels" onmousedown="alert(users['name1'].listuser());"><br>
</form>
<script src="script.js">
function fun(){
window.alert("starting program...")
//other code
}
</script>
</body>
</html>
Is there some sort of error that I'm not seeing?
After click on submit button in form with action="" page is reload and all data is lost. Pleas use:
<form action="javascript:void(0)">
instead of
<form action="">
This prevent page reload.
I'm trying to create a ‘customer’ object that will store all of this data and then display the information as a ‘Customer Order’ similar with listing all the new information.
I can't figure out what's the problem. (Pretty sure the whole code itself is messed up)
When I run it, it also shows 'ReferenceError: clicked is not defined' message.
I don't understand the concept of storing data and displaying new information as a 'Customer Order'.
This is my javascript.
/*index.js*/
var objectarray = [];
function addToArray() {
var customerobject = {
name: "",
address: "",
postalcode: "",
phone: "",
email: ""
}
customerobject.name = document.getElementById("name").value;
customerobject.address = document.getElementById("address").value;
customerobject.postalcode = document.getElementById("postalcode").value;
customerobject.phone = document.getElementById("phone").value;
customerobject.email = document.getElementById("email").value;
objectarray.push(customerobject);
console.log(objectarray);
}
document.getElementById("buttonandchecks").addEventListener("click", clicked);
function clicked() {
addToArray();
}
<input id="name" value="Jenna" />
<input id="address" value="840 9STREET" />
<input id="postalcode" value="T2P 2T4" />
<input id="phone" value="111-111-1111" />
<input id="email" value="Renee#gmail.com" />
<button id="clickMe">click me</button>
function buttonandchecks()
{
//javascripts to get an output based on customer information
}
> ------------------------Below is my html------------------------
<!DOCTYPE html>
<html>
<head>
<link href="this.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="this.js">
</script>
</head>
<body>
<br>
<form name="information">
<table>
<tr><td>; First and Last Name :;</td><td><input type="name" id="nameid" size="25" maxlength="25" autofocus="yes" pattern="[a-zA-Z -]+$"></td></tr>
<tr><td>; Address :;</td><td><input type="address" id="addressid" size="25" maxlength="25" pattern="[a-zA-Z0-9]| |/|,|.|\|#|#|$|%|&)+"></td></tr>
<tr><td>; Phone Number :;</td><td><input type="tel" size="25" id="phoneid" placeholder="XXX XXX XXXX" pattern="\d{3} \d{3} \d{4}"></td></tr>
</form>
<form name=order>
//javascript to get an customer information
<br>
<br>
<center><input type=button value="Price your Order" id="clickMe" onClick="clicked();"></center>
</form>
</body>
</html>
I fixed your code, but there is a lot more to this question. This isn't really a proper way to store the data. You should be posting the information from the form to a service.
<html>
<body>
<input id="name" value="Jenna" />
<input id="address" value="840 9STREET" />
<input id="postalcode" value="T2P 2T4" />
<input id="phone" value="111-111-1111" />
<input id="email" value="Renee#gmail.com" />
<button id="clickMe">click me</button>
</body>
<script>
var objectarray = [];
var button = document.getElementById("clickMe");
function addToArray() {
var customerobject = {};
customerobject.name = document.getElementById("name").value;
customerobject.address = document.getElementById("address").value;
customerobject.postalcode = document.getElementById("postalcode").value;
customerobject.phone = document.getElementById("phone").value;
customerobject.email = document.getElementById("email").value;
objectarray.push(customerobject);
console.log(objectarray);
}
button.addEventListener("click", addToArray);
</script>
</html>
I am trying to show forms according to user input in the text box but it is showing it one time only...please help...
index.html:
<html>
<head>
<script type="text/javascript" src="demo1.js"></script>
</head>
<body>
<form name="su">
<input type="text" name="tt" onkeyup="javascript:toggleFormVisibility();" id="sub"/> </a>
</form>
<form id="subscribe_frm" style="display:none">
NAME:<input type="text" name="text">
EMAIL:<input type="text" name="text">
PASSWORD:<input type="text" name="text">
</form>
demo.js:
function toggleFormVisibility()
{
var txt = document.getElementById('sub').value;
for(var i=0;i<txt;i++)
{
var frm_element = document.getElementById('subscribe_frm');
var vis = frm_element.style;
vis.display = 'block';
}
}
A bit of a guess, but I think you are trying to create multiple copies of your form. Try this out:
http://jsfiddle.net/QnrM9/
JS
function toggleFormVisibility() {
var txt = document.getElementById('sub').value;
var neededChildren = txt.length - document.getElementById('form_container').children.length + 1;
for (var i = 0; i < neededChildren; i++) {
var frm_element = document.getElementById('subscribe_frm').cloneNode(true);
var vis = frm_element.style;
vis['display'] = 'block';
document.getElementById("form_container").appendChild(frm_element);
}
}
document.getElementById('sub').addEventListener('keyup', toggleFormVisibility);
HTML
<form name="su">
<input type="text" name="tt" id="sub" />
</form>
<div id="form_container">
<form id="subscribe_frm" style="display:none">NAME:
<input type="text" name="text" />EMAIL:
<input type="text" name="text" />PASSWORD:
<input type="text" name="text" />
</form>
</div>
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>
hi guys i am new to js and html.I need a o/p as when click the button tat should show the all contents entered in form...
My code for giving alert of all entered data in single
how can I add values of form textbox using string ,for loop all should be only in javascript...or else give your own code with the conditions i said....
<html>
<head>
<title>elements in a form</title>
<script type="text/javascript">
function processFormData()
{
var len= document.getElementsByTagName('name');
var str1=null;
for(i=0;i<=len;i++)
{
var str=(subscribe.name[i].value);
str=str1+str;
}
alert(str);
}
</script>
</head>
<body>
<form name ="subscribe" >
<p><label for="name">Your Name: </label><input type="text" name="name" id="txt_name" value="name"></p>
<p><label for="email">Your Email: </label><input type="text" name="email" id="txt_email" value="mail"></p>
<input type="button" value="submit" onclick="processFormData()">
</form>
</body>
</html>
Try that for a start
var len= document.getElementsByTagName('input').length;
// add that you want the number of element
// Change 'name' for 'input' when using 'name' you are looking for <name in the HTML
// if you want the element with the name ABC use getElementsByName()
var str1='';
for(i=0;i<=len;i++)
{
var str=(subscribe[i].value);
str1=str1+str;
}
alert(str1);
jsFiddle example (in jQuery for the calling of the function) : http://jsfiddle.net/DavidLaberge/HPuhg/1/
<html>
<head>
<title>elements in a form</title>
<script type="text/javascript">
var str1=null;
function processFormData()
{
var len= document.getElementsByTagName('name').length;
for(i=0;i<=len;i++)
{
var str=(subscribe.name[i].value);
str1=str1+str;
}
alert(str1);
}
</script>
</head>
<body>
<form name ="subscribe" >
<p><label for="name">Your Name: </label><input type="text" name="name" id="txt_name" value="name"></p>
<p><label for="email">Your Email: </label><input type="text" name="email" id="txt_email" value="mail"></p>
<input type="button" value="submit" onclick="processFormData()">
</form>
</body>
</html>
you have just minor mistake that is you used str in place of str1; Now use the above code.
Try something like:
function processFormData() {
var inputs = document.getElementsByTagName("input"),
i,
len,
stringBuffer = [],
str;
for (i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type.toLowerCase() === "text") {
stringBuffer.push(inputs[i].value);
}
}
str = stringBuffer.join(""); // str contains concatenated values of all inputs
}
Try this:
function processFormData()
{
var len= document.getElementsByTagName('input').length;
var str = '';
for(i=0;i<len-1;i++)
{
str += document.subscribe[i].value;
}
alert(str);
}