CODEWITHSUNDEEP
javascripthtml
Infinity Lord
Infinity Lord

Reputation: 9

javascript button leads to another page

Hey Guys i tried to get value of javascript variable from html form but when ever i press the submit button instead of printing it on the page normally, it prints it on page after removing css and all the other code after that from page. in the end i am left with a single simple page which only has the input value printed on it

<form action="C:\Users\b  n\Desktop\Coding Mastery\Responsibe Web Design\JavaScript (Book)\Sams Teach Yourself JavaScript in 24 Hours by Michael Moncur chapter = 010 creating custom objects 002 (  ).html" method="get">
    <input type="text" placeholder="userInput" id="userInput">
    <input type="submit" onclick="othername();">
</form><hr>
<script LANGUAGE="JavaScript">
    function othername() 
    {
        var input = document.getElementById("userInput").value;
        document.write(input);
    }
</script>
<!--long code after this-->

Upvotes: 1

Views: 356

Answers (3)

I_love_vegetables
I_love_vegetables

Reputation: 1341

Dont use document.write() because it will remove everything in your html except the content what you put inside the document.write method

One solution is You can add a paragraph tag to your html and display the result in the p element instead

Like this :

<form action="C:\Users\b  n\Desktop\Coding Mastery\Responsibe Web Design\JavaScript (Book)\Sams Teach Yourself JavaScript in 24 Hours by Michael Moncur chapter = 010 creating custom objects 002 (  ).html" method="get">
    <input type="text" placeholder="userInput" id="userInput">
    <input type="submit" onclick="othername();">
</form><hr>

<p id="p"></p>
<script LANGUAGE="JavaScript">
    function othername() 
    {
        var input = document.getElementById("userInput").value;
        document.getElementById("p").innerText = input;
    }
</script>

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 19996

document.write(input); will replace all the HTML contents in the page with the value of input you provided. If you just want to print the content somewhere inside the page, use

document.getElementById('id').innerText = input

Refer

Also replace <input type="submit" onclick="othername();">

with

Update Page

To prevent reloading of page.

Sample demo

function writeInPara() {
  const val = document.getElementById('user-input').value;
  document.getElementById('target-area').innerText = val;
}
function writeInPage() {
  const val = document.getElementById('user-input').value;
  document.write(val);
}
<div>
  <input type="text" id="user-input" />
  <button onclick="writeInPara()">Update Paragraph</button>
  <button onclick="writeInPage()">Update Page</button>
</div>
<div>
  <p id="target-area">Your input will be replaced here if you click 'Update Paragraph' button</p>
</div>

Upvotes: 0

Sulabh Agarwal
Sulabh Agarwal

Reputation: 291

Its happening because you are trying to print the values on document, instead try to print /update the values in any html element or in console. And yes change the type of button to button instead submit.

console.log(input);

OR

document.getElementById("userOutput").value = input;

Upvotes: 0

Related Questions