I know it's a silly question of this type, but im new to JS and im learning coding step by step. I'm curious how would i set up sessions for input values in javascript if i have this type of coding?
<input type="text" id="name" >
<input type="text" id="lastname">
<input type="submit" value="submit" id="btn">
Again i want to apologize for this question , and thank you for the help that you can offer me about this .
Now this code had help me out.What i wanted to do is to store the values of the input fields into sessions and be able to display them into the browser likethis:
<body>
<input type="text" id="name" ><br><br>
<input type="text" id="lastname"><br><br>
<input type="submit" id="btn" value="set sessions"><br><br>
<p id="para"></p>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
var name=document.getElementById("name").value;
var lastname=document.getElementById("lastname").value;
sessionStorage.setItem("name",name);
sessionStorage.setItem("lastname",lastname);
document.getElementById("para").innerHTML=sessionStorage.getItem("name")+"
"+sessionStorage.getItem("lastname");
}
</script>
</body>
Related
I'm studying Javascript.
Todays's mission is print entered data on Chrome console.
I made some code that can type and submit button.
But I don't know how to print entered data on console.
I think 'console.log','getElementById' would be answer.
But I can't make code with those clues..
Anyone can help me please?
Thanks in advance.
<body>
<input type="text" name="mname" placeholder="Enter movie name" size="40">
<input id="active" type="submit" value="Search">
<script>
var m = document.getElementById('mname');
console.log(m);
</script>
</body>
<body>
<input type="text" id="mname" placeholder="Enter movie name" size="40">
<input id="active" type="submit" onClick="consoleData()" value="Search">
</body>
<script>
function consoleData () {
var m = document.getElementById('mname');
console.log(m.value);
}
</script>
You can try the basic HTML tutorials for this, please follow below which is one of them.
function print() {
var m = document.getElementById('mname').value;
console.log(m);
}
<body>
<input type="text" id="mname" placeholder="Enter movie name" size="40">
<input onclick="print()" type="submit" value="Search">
</body>
I believe this source may be useful to improve your knowledge https://www.w3schools.com/js/
You should add an event trigger for the console.log().
Like this:
<body>
<input type="text" name="mname" id="mname" placeholder="Enter movie name" size="40">
<input id="active" type="submit" value="Search" onclick="log()">
<script>
function log(){
var m = document.getElementById('mname');
console.log(m.value);
}
</script>
</body>
I think 'console.log','getElementById' would be answer.
Yes, you can use these two methods to achieve your task. Here is a snippet with some points to consider:
Change name attribute to id attribute on input as getElementById requires it
Use .value to get the input's text
Add onclick attribute to link input to the log function
function log() {
var m = document.getElementById('mname').value;
console.log(m);
}
<input type="text" id="mname" placeholder="Enter movie name" size="40" value="Superman" />
<input id="active" onclick="log()" type="submit" value="Search" />
Hi i'm not a programmer and i need a javascript code.
I want to pass the URL parameter to a hidden form field!
This is what is added to the URL:
?ref_id=ik20284953
So i want to get the REF_ID and get it into a hidden field of a form which i already have.
How exactly can i do it ?
I found some solutions here in the forum but nothing worked for me!
HELP IS MUUUUCH APPRECIATED!
Greetings
Matthias
EDIT:
THIS IS MY FORM:
<div id="form-163709-wrapper">
<form id="ktv2-form-163709" accept-charset="UTF-8" method="post" action="https://www.klick-tipp.com/api/subscriber/signin.html"><input type="hidden" id="FormField_ApiKey" name="apikey" value="3smez1c7gz8ze9db" /><input type="hidden" id="FormField_Digit" name="fields[fieldDigit]" value="" />
<div class="ktv2-form-element"><label for="FormField_EmailAddress">Ihre E-Mail-Adresse: </label><br /><input type="text" id="FormField_EmailAddress" name="email" value="" size="40" /></div>
<div class="ktv2-form-element"><label for="FormField_FirstName">Vorname: </label><br /><input type="text" id="FormField_FirstName" name="fields[fieldFirstName]" value="" /></div>
<div class="ktv2-form-element"><input type="hidden" id="FormField_81808" name="fields[field81808]" value="" /></div><br />
<div><input type="submit" id="FormSubmit" name="FormSubmit" value="Ihr Button-Text" /></div>
</form>
</div>
You can get the ref_id with the URLSearchParams().get(), then you can inject the value with setAttribute()
var urlParams = new URLSearchParams(window.location.search);
var myParam = urlParams.get('ref_id');
document.getElementById('FormField_81808').setAttribute('value',myParam)
<form>
<input type="hidden" id="FormField_81808">
</form>
First you need to parse the query string, you can check this post: Parse query string in JavaScript
And then if you are using jQuery,
$("#FormField_81808").val(parsed_value);
If it is a native javascript that you are using;
document.getElementById("FormField_81808").value = parsed_value;
PS: It is best to put some code when you are trying to get an answer to this type of questions.
I have a 2-step registration process which consists of 2 different HTML pages.
The second (and final) step collects all the data and sends it to the server for evaluation. For simplicity, let's say I collect user's name in the first form and user's age in the second:
formA.html:
<form action="formb.html" method="get">
Name: <input id="age" type="text" name="age">
<input id="submit_button" type="submit" value="CONTINUE">
</form>
formB.html:
<form action="serverscript.py" method="post">
Age: <input id="name" type="text" name="name">
<input id="submit_button" type="submit" value="SUBMIT">
</form>
How can I "propagate" the "name" that user has entered in formA.html to formB.html so that I can send name,age to the server?
p.s. The only way I can thinkg is doing it with and then parsing the URL in formB , but that seems very ugly...
formA.html:
<form action="formb.html" method="get">
Name: <input id="Name" type="text" name="Name">
<input id="submit_button" type="submit" value="CONTINUE">
</form>
In form B make This Changes...
formB.html:
<form action="serverscript.py" method="post">
Age: <input id="age" type="text" name="age">
<input id="Name" type="hidden" value="">
<input id="submit_button" type="submit" value="SUBMIT">
</form>
<script type="text/javascript">
var query = window.location.search.substring(1);
var Field=query.split("=");
document.getElementById("Name").value = Field[1];
</script>
Hope it will help ;)
I can think of 3 ways :
1) cookie. store the information in a cookie and read it in the second form
2) Query string.You can chain the the data to query string and read it on form B
3) You can use the action attribute of a form which can take a url. (recommended)
You can build the data you get from form A as html hidden input fields within form B on load, since you are sending your data through 'GET' method, then when you submit form B, the data will be sent to the server.
Edit
Assuming am using PHP as server side :
forma.php
<form action="formb.php" method="get">
Name: <input id="name" type="text" name="name">
<input id="submit_button" type="submit" value="CONTINUE">
</form>
formb.php
<form action="postPage.php" method="post">
Age: <input id="age" type="text" name="age">
<?php
if(isset($_GET['name'])
{
?>
<input id="name" type="hidden" name="name" value="<?php echo $_GET['name']?>"/>
<?php } ?>
<input id="submit_button" type="submit" value="SUBMIT">
</form>
Try using HTML5 sessionStorage to store data in browser session. During the session, a user could visit other pages of the domain, or other sites entirely, then return to the original domain. Any data saved in sessionStorage during that session will remain available, but only to pages in the original domain, until the tab or window is closed.
I'm trying to get the elements from textboxes nameBox and foodBox to be displayed in the paragraph id=message after the submit button is clicked, with the message:
“Hello <name in namebox>! We want to let you know that <food in foodbox> has 50% discount in our restaurant!”
But i can't figure out how to do that. I'm pretty sure i'm doing something (if not all) wrong but since i'm new at this i can't figure it out what.
<body>
<br>
<br>
<div>
<p id="message"></p>
</div>
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
<button id="submitButton">Submit</button>
<script>
var parent=document.getElementById("message");
var child=document.getElementById("nameBox");
parent.removeChild(child);
</script>
</body>
That's because parent is not the parent of child. To make it so, edit your code to put the two input elements inside the <p> tag:
<p id="message">
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
</p>
Here you go :
<html>
<head>
<script>
function showText(){
var name=document.getElementById("nameBox").value;
var food=document.getElementById("foodBox").value;
document.getElementById("msg").innerHTML="Hello " + name + " ! We want to let you know that has 50% discount in our restaurant! for " + food;
}
</script>
</head>
<body>
<br>
<br>
<div id="msg">
</div>
Enter your name:
<input type="text" id="nameBox" value=""/><br>
Enter your favorite food
<input type="text" id="foodBox" value=""/><br>
<input type="button" id="submitButton" onclick="showText()" value="Submit" />
</body>
</html>
You can make your alignments as you wish, try to use firebug (https://getfirebug.com/) in case of finding UI related issues. It is pretty easy to figure out what is wrong in the UI
Check your HTML. Maybe it should look like this?
<div id="message">
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
<button id="submitButton">Submit</button>
</div>
You can call function on clicking submit button and then change the message.
<input type="button" id="submit" value="Submit" onclick="somefunction()"/>
Here is the javascript:
function somefunction() {
var fieldNameElement = document.getElementById('message');
fieldNameElement.innerHTML = “Hello ! We want to let you know that has 50% discount in our restaurant!” ;
}
While changing the innerHTML you can add appropriate formatting tags as well.
Also you should add inputs in a table, and add border's and required formatting if required:
<table>
<tr>
<td>
Enter your name:
</td>
<td>
<input type="text" id="nameBox" value=""><br>
</td>
</tr>
<tr>
<td>
Enter your favorite food
</td>
<td>
<input type="text" id='foodBox' value=""><br>
</td>
</tr>
</table>
You can also think about using a Javascript library which provides lot of methods to make your life easy, would suggest JQUERY
Cheers !!
I have a form as follows:
<form name="chat" id="chat" action="" onsubmit="sendMessage()">
<a name="chat"> </a>
<input type="text" name="chat" id="chat" size="38" maxlength="50" vertical-align="middle">
<input type="hidden" name="action" id="action" value="checkresponse">
<input type="hidden" name="response_Array[sessionid]" id="response_Array[sessionid]" value="keu88lh88ini89dgnccob54f27"><br>
<input type="text" name="response_Array[top]" id="response_Array[top]" value="a">
<input type="text" name="response_Array[second]" id="response_Array[second]" value="b"><br>
<input type="text" name="response_Array[third]" id="response_Array[third]" value="c"><br>
<input type="text" name="response_Array[fourth]" id="response_Array[fourth]" value="d"><br>
<input type="text" name="response_Array[input][0]" id="response_Array[input][0]" value="input 0"><br>
<input type="text" name="response_Array[that][0]" id="response_Array[that][0]" value="that 0"><br>
<input type="submit" name="submit" id ="submit" value="SEND" style="width: 45px">
</form>
When the user clicks Submit, I need to send all the input fields to the server.
But, the page should not get refreshed. So, I have created sendMessage(),in which I have used XMLHttpRequest object to send the form submit request.
To read input fields, I have used in sendMessage():
var infoStr = "chat="+document.forms[0]['chat'].value;
infoStr += "&action="+document.forms[0]['action'].value;
I want to know how should I read the 2D array :response_Array and parse it into a JSON string so that it can be passed to the php server code.
It is so simple
var infoStr=""
for(var i=0;i<document.forms[0].elements.length;i++)
{
infoStr+=document.forms[0].elements[i].name+"="+document.forms[0].elements[i].value+"&";
}
alert(infoStr); // You will have the full name value pairs.
Hope this solves your problem.