CODEWITHSUNDEEP
javascripthtmlcss
Zuffido
Zuffido

Reputation: 124

JavaScript input type=submit is not working

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>

Upvotes: 0

Views: 423

Answers (3)

Shivanshu Singh
Shivanshu Singh

Reputation: 56

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>

Upvotes: 3

Issa
Issa

Reputation: 112

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

Upvotes: 0

Marco Chavez
Marco Chavez

Reputation: 215

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>

Upvotes: 0

Related Questions