JavaScript input type=submit is not working

Question

I am trying to input through a form and when I submit the button, it is not working. Kindly help me with this. I want to display the input taken from the form and display it in the span tags at the bottom.

Below is my HTML and JavaScript:

// Variables are being declared.

var sRecipientName;
var sOrganizationName;
var sDate;
var sURL;
var sHostName;


function submitDetails() {
  sRecipientName = document.getElementById("recipient").value;
  console.log(sRecipientName);
  sOrganizationName = document.getElementById("organization").value;
  console.log(sOrganizationName);
  sDate = document.getElementById("date").value;
  console.log(sDate);
  sURL = document.getElementById("URL").value;
  console.log(sURL);
  sHostName = document.getElementById("host").value;
  console.log(sHostName);

}

<section id="pageForm">
  <form action="#">
    <label for="recipientName">Recipient name:</label>
    <input type="text" id="recipient" name="recipientName" placeholder="Enter your Recipient Name" />

    <label for="organizationName">Organization name:</label>
    <input type="text" id="organization" name="organizationName" placeholder="Enter your Organization Name" />

    <label for="eventDate">Event Date:</label>
    <input type="text" id="date" name="eventDate" placeholder="Enter your Event Date" />

    <label for="websiteURL">URL:</label>
    <input type="text" id="URL" name="websiteURL" placeholder="Enter your Website URL" />

    <label for="hostName">Host name:</label>
    <input type="text" id="host" name="hostName" placeholder="Host Name" />

    <input type="submit" value="Submit" onclick="submitDetails()">

  </form>
</section>


<article id="placeholderContent">
  <span id="recipientName">recipientName</span>!
  <br/>
  <br/> <span id="organizationName">organizationName</span> <span id="eventDate">eventDate</span> <span id="websiteURL">websiteURL</span>
  <br/>


  <span id="hostName">hostName</span>
</article>

Nothing in the code you posted appears to make any attempt at updating any elements on the page. — Pointy
– Pointy, Commented Aug 28, 2020 at 19:09
The code works and successfully prints values to the console. But the form is also being submitted. Are you just asking how to prevent the form from being submitted? — David
– David, Commented Aug 28, 2020 at 19:11
Does this answer your question? add onclick function to a submit button — Heretic Monkey
– Heretic Monkey, Commented Aug 28, 2020 at 19:20
the principle of a submit is to send information to a server and to indicate to it which page to load immediately, here you do not indicate any then it reloads the same page in its initial html state — Mister Jojo
– Mister Jojo, Commented Aug 28, 2020 at 19:20
As David implies, but doesn't state explicitly, when you press your input type="submit" button the form is submitted to the server and the page is re-loaded. If you were actually writing your vars to the page, not just to the console, they would disappear when the page got loaded again after the submit. Again as Davis says, you will need to prevent that default form submission behavior. — Stephen P
– Stephen P, Commented Aug 28, 2020 at 19:22

Stephen P · Accepted Answer · 2020-08-28 22:34:11Z

3

First of all there is no need of a form for your use-case. A <form> is required when you have to post some data to server, but in your case you just wanted to do some DOM manipulations which you can do without a form.

I have just written a function updateDetails() which takes the values from your inputs and overwrites your span's innerHTML with those values. On your submit button, I have changed it from a submit to a plain <button>, and on click I have just called the function updateDetails() to update the spans.

I have attached a snippet that will work in your use case

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <section id="pageForm">
        <label for="recipientName">Recipient name:</label>
        <input type="text" id="recipient" name="recipientName" placeholder="Enter your Recipient Name" />
        <label for="organizationName">Organization name:</label>
        <input type="text" id="organization" name="organizationName" placeholder="Enter your Organization Name" />
        <label for="eventDate">Event Date:</label>
        <input type="text" id="date" name="eventDate" placeholder="Enter your Event Date" />
        <label for="websiteURL">URL:</label>
        <input type="text" id="URL" name="websiteURL" placeholder="Enter your Website URL" />
        <label for="hostName">Host name:</label>
        <input type="text" id="host" name="hostName" placeholder="Host Name" />
        <button onclick="submitDetails()">Submit</button>
    </section>
    <article id="placeholderContent">
        <span id="recipientName">recipientName</span>!
        <br>
        <br> 
        <span id="organizationName">organizationName</span> 
        <span id="eventDate">eventDate</span> 
        <span id="websiteURL">websiteURL</span>
        <br>
        <span id="hostName">hostName</span>
    </article>
    <script>
        function submitDetails(){
            updateDetails("recipient", "recipientName");
            updateDetails("organization", "organizationName");
            updateDetails("date", "eventDate");
            updateDetails("URL", "websiteURL");
            updateDetails("host", "hostName");
        }
        function updateDetails(copyId, pasteId){
            document.getElementById(pasteId).innerHTML = document.getElementById(copyId).value;
        }
    </script>
</body>

</html>

edited Aug 28, 2020 at 22:34

Stephen P

14.9k2 gold badges50 silver badges71 bronze badges

answered Aug 28, 2020 at 19:25

Shivanshu Singh

563 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Stephen P Over a year ago

Hi Shivanshu, you have handed a solution to Zuffido but you haven't explained what you are doing, how it differs from the original post, or why it works when the original doesn't work. A good answer on Stackoverflow will be helpful to future readers, not only to the original asker of the question, and the answer should help the asker understand the solution.

Shivanshu Singh Over a year ago

Hi Stephen, sorry I thought that would be enough but I was wrong. I have updated my answer with details on implementation.

Stephen P Over a year ago

No need to be sorry, you added a good writeup and I upvoted — I did take the liberty of doing some more minor edits that I think clarified some things further.

Shivanshu Singh Over a year ago

Awesome, Thank You

Zuffido Over a year ago

Thanks @ShivanshuSingh for your kind response. Yea exactly I forgot to write the code for the DOM manipulation here. However I found a solution to this.

Marco Chavez · Accepted Answer · 2020-08-28 19:23:19Z

From what I understand, you are trying to change the placeholder text with the information from the form. You would want to first prevent the default behavior of the form submission by passing the event to the function in your submit (which I've changed to a button).

You would then want to have something set the innerHTML of the element to one of the values of the form.

var sRecipientName;
var sOrganizationName;
var sDate;
var sURL;
var sHostName;


function submitDetails(e) {
  e.preventDefault();
  sRecipientName = document.getElementById("recipient").value;
  sOrganizationName = document.getElementById("organization").value;
  sDate = document.getElementById("date").value;
  sURL = document.getElementById("URL").value;
  sHostName = document.getElementById("host").value;

  document.getElementById('recipientName').innerHTML = sRecipientName;
  document.getElementById('organizationName').innerHTML = sOrganizationName;
  document.getElementById('eventDate').innerHTML = sDate;
  document.getElementById('websiteURL').innerHTML = sURL;
  document.getElementById('hostName').innerHTML = sHostName;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>My website</title>
</head>

<body>
    <section id="pageForm">
        <form action="#">
            <label for="recipientName">Recipient name:</label>
            <input type="text" id="recipient" name="recipientName" placeholder="Enter your Recipient Name" />

            <label for="organizationName">Organization name:</label>
            <input type="text" id="organization" name="organizationName" placeholder="Enter your Organization Name" />

            <label for="eventDate">Event Date:</label>
            <input type="text" id="date" name="eventDate" placeholder="Enter your Event Date" />

            <label for="websiteURL">URL:</label>
            <input type="text" id="URL" name="websiteURL" placeholder="Enter your Website URL" />

            <label for="hostName">Host name:</label>
            <input type="text" id="host" name="hostName" placeholder="Host Name" />

            <button type="submit" onclick="submitDetails(event)">Submit</button>

        </form>
    </section>


    <article id="placeholderContent">
        <span id="recipientName"></span>
        <br />
        <br /> <span id="organizationName"></span> <span id="eventDate"></span> <span id="websiteURL"></span>
        <br />


        <span id="hostName"></span>
    </article>
    <script src="script.js"></script>
</body>

</html>

It worked thanks, I had forgotten to add the code for DOM manipulation here. Looks like I was missing the preventDefault function.

Issa · Accepted Answer · 2020-08-28 19:28:55Z

0

Make sure you are not using console.log(). First remove it.

Then you have to add an eventListener that works if form is submitted and to prevent default events.

Example:

<input value="I am" id="val1" >
<span id="output">

//JavaScript codes
 let data = document.getElementById('val1').value;
document.getElementById('output').innerHTML = data;

But make sure those codes are in function that responds to the submit event

answered Aug 28, 2020 at 19:28

Issa

1126 bronze badges

Collectives™ on Stack Overflow

JavaScript input type=submit is not working

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related