Why doesn't this local storage code work? - javascript

This is my code for index.html
<form action = "indo.html">
<input type = "text" id = "tex">
<button id = "tex">Submit</button>
</form>
<script>
var o = document.getElementById("tex").value;
localStorage.setItem("three", o);
</script>
This is my code for indo.html
<script>
var n = localStorage.getItem("three");
document.write("Welcome "+n);
</script>

Actually its working .But the value is empty .set Initial value on input .Because its set value on page load not after the form submit
Try this
<form action="indo.html">
<input type="text" id="tex" value="something">
<button id="tex">Submit</button>
</form>
<script>
var o = document.getElementById("tex").value;
localStorage.setItem("three", o);
</script>
indo.html
<script>
var n = localStorage.getItem("three");
document.write("Welcome " + n);
</script>

If you want save data into local-storage i suggest below code:
<form >
<input type = "text" id = "tex">
<button id = "texb">Submit</button>
</form>
function fun_sub(){
const val = document.getElementById("tex").value;
localStorage.setItem("three", val);
console.log(localStorage.getItem("three"));
window.open("/indo.html", "_self");
}
In your code, name id of input element and button element is same! this mistake return error if you call getElementById in javascript ,and you must consider that when you write a code and you want call code again after render page, you should call it in a function.

Related

How can I submit an HTML form written in javascript without button?

This is what I have tried so far, but it doesn't seem to work.
var myJSON = JSON.stringify(distMatrix);
var testform = `<form id="jsform" action="test.php" >
<input type="hidden" name="array" value="${myJSON}"> /
</form>`
var printdata = document.getElementById('jsform');
document.write(printdata);
document.getElementById('jsform').submit();
You are trying to submit your form before it is actually created.
First do document write and then submit.
UPD: ok, here we go.
Create form by simply putting it to html part of your file.
Set the required data into input via JS
submit the form
var distMatrix = [[1,2],[2,2]];
// save the value into input
var input = document.getElementById('dist_matrix_json');
input.value = JSON.stringify(distMatrix);
// submit the form
document.getElementById('jsform').submit();
<form id="jsform" action="test.php" >
<input type="hidden" id="dist_matrix_json" name="array" value=""> /
</form>
Sending a json object can be as simple as this javascript :
<script>
var myObj = { "name":"John", "age":31, "city":"New York" };
var myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
</script>
That was for the GET method.
if you need post or put methods:
<div>
<form id="myForm" action="page.php" method="post">
<p id="demo"></p>
</form>
</div>
<script>
var myObj, x;
myObj = {"name":"John", "age":30, "car":null};
for (x in myObj) {
document.getElementById("demo").innerHTML += '<input type="text" name="'+x+'" value="'+myObj[x]+'"><br>';
}
document.getElementById("myForm").submit();
</script>

How To Read Input Fields From A Fieldset In JavaScript

I have this Fieldset:
<fieldset id="myFieldset" >
<input type="hidden" name="username" value="Testing">
</fieldset>
I tried to read the input value of the fieldset like this in javascript:
function myFunction() {
var x = document.getElementById("myFieldset");
console.log("The fieldset elements: ", x);
var data = x.getElementsByTagName("username");
console.log("The googleData elements: ", data);
}
But I'm not able to get the input section of the field set.
The tag name is input
username is the name (which you can search on with getElementsByName (no Tag in the method).
You can try something like this:
(function(){
var f = document.getElementById("myFieldset");
var input = f.getElementsByTagName("input");
console.log(input[0].value)
var n = document.getElementsByName("username")[0];
console.log(n.value);
})()
<fieldset id="myFieldset" >
<input type = "hidden" name = "username" value = "Testing">
</fieldset>
Try this
var data = x.getElementsByName("username");

Javascript changing HTML but change then immediately defaults back to the hard-coded value

I am trying to make it so that when I hit the submit button in html, we value in the input field replaces the item inside of the P element that has the id "numberz".
I can get the code to do that but the website immediately changes back to having the default value in the P element with the id "numberz".
How do I prevent the website from changing back to the default value of the element that is hard-coded into the HTML file?
<!DOCTYPE html>
<html>
<head>
<title>JS test</title>
<script>
function e() {
var x = document.getElementById("numberz");
var z = document.getElementById("num").value;
//alert(x.innerHTML + " s " + z);//
x.innerHTML= z;
};
</script>
</head>
<body>
<p>The number is:</p>
<p id = "numberz">s</p>
<br>
<br>
<form onsubmit = "return e();">
<input id = "num" type = "text" size = "4" placeholder = "test"/>
<input type = "submit" value = "Submit"/>
</form>
</body>
</html>
Because the form is submitting, you need to cancel the form submission.
function e() {
var x = document.getElementById("numberz");
var z = document.getElementById("num").value;
//alert(x.innerHTML + " s " + z);//
x.innerHTML= z;
return false;
};

Return False & Javascript Form

I've looked over a number of posts that are similar to my query, but in general, they are not helping me. I think part of my problem is that I am so new to JavaScript that a lot of the previous posts are too complicated for me. I have the simple code below, but it does not seem to work. I do not get my alerts, and I do not think the form is being submitted even when the function should be returning "true." I checked the Error Console, and there are no errors. Can someone help?
JavaScript:
function submit()
{
var age = document.Message.Age.value;
if (age > 39)
{
alert("You're old.");
return false;
}
else
{
alert("You're young!");
return true;
}
}
HTML:
<FORM id = "Message" name = "Message" method = "post" action = "http://cnn.com" onsubmit = "return submit();">
First Name: <INPUT type = "text" name = "Fname"/><br>
Age: <INPUT type = "text" name = "Age"/><br>
<INPUT type="button" name = "Submit" value = "Submit">
</FORM>
Change your HTML to
<FORM id = "Message" name = "Message" method = "post" action = "http://cnn.com" onsubmit = "return submit();">
First Name: <INPUT type = "text" name = "Fname"/><br>
Age: <INPUT type = "text" name = "Age"/><br>
<INPUT type="submit" name = "Submit" value = "Submit">
</FORM>
Note that the input type has been changed to 'submit', so that the submission actually takes place.
I doubt your javascript function itself is being called or not. If not, I think you need to move you onsubmit to <body> tag from <form> tag.
as
<body onsubmit"return submit();">
Also either change your button to either type as submit or add an onClick() event below:
<INPUT type="submit" name = "Submit" value = "Submit"/>
or
<INPUT type="button" name = "Submit" value = "Submit" onClick="submit()"/>
Below is the full working code(in chrome and IE8) sample:
<Html>
<head>
<script language="javascript">
function submit(){
var age = document.Message.Age.value;
if (age > 39){
alert("You're old.");
return false;
}else{
alert("You're young!");
return true;
}
}
</script>
</head>
<body>
<FORM id = "Message" name = "Message" method = "post"
action = "http://cnn.com" onSubmit = "javascript:return submit();">
First Name: <INPUT type = "text" name = "Fname"/><br>
Age: <INPUT type = "text" name = "Age"/><br>
<INPUT type="submit" name = "Submit" value = "Submit"/>
</FORM>
</body>
</html>

value from HTML textbox to Javascript var

Hi want to store what user input into the textbox into my javascript var to be passed to my external PHP page,
I can pass the variable if i just define a value like mySite= 22 but not from what user enters into the text box.
Please help me to get access to the texbox.value
<form method="post" action="" onsubmit="submitFun(this)">
<input type="text" name="order_IDsearch" id="order_IDsearch"onBlur="javascript:setmysite(this);">
<input type="submit" />
</form>
<script type="text/javascript">
var mySite = '';
function setmysite(v1) {
var parent = document.getElementById('list');
var element = parent.GetElementsByTagName('order_IDsearch')[0];
mySite = element;
}
function submitFun(f1) {
t = './get_order.php?s=' + mySite;
t = encodeURI (t);
f1.action = t;
f1.submit();
return true;
}
You can try document.getElementById('order_IDsearch').value;

Categories