Reading form value fails - Javascript

Question

I`m trying to read the value from an input and fill it in one empty div.However , the value is being read but when I click the button submit , the value appears for like 0.2 seconds on the empty div , and then , disappears ... any suggestions why?

HTML :

 <div id="vuvedenaSuma">

 </div>

        <form action="">
            <input type="text" id="suma" required="required" placeholder="Въведи сума" name="Suma" />

            <button id="submit">Submit!</button>
        </form>

Javascript:

function valueRead(){
    var vuvedenaSuma = document.getElementById('suma').value;
    document.getElementById('vuvedenaSuma').innerHTML = vuvedenaSuma;
}

document.getElementById('submit').addEventListener('click',valueRead);

I want to make it withe eventListener , not onclick attribute on the button.

Ian Ramos · Accepted Answer · 2018-09-18 19:03:17Z

3

Your form is being submitted right after the execution of the function.

You can prevent the default event(form submission) to be called with event.preventDefault() like this:

function valueRead(e){
    var vuvedenaSuma = document.getElementById('suma').value;
    document.getElementById('vuvedenaSuma').innerHTML = vuvedenaSuma;
    e.preventDefault();
}

https://jsfiddle.net/ez0qchyq/

edited Sep 18, 2018 at 19:03

answered Jan 4, 2016 at 19:51

Ian Ramos

4147 silver badges16 bronze badges

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

Comments

John Kossa · Accepted Answer · 2016-01-04 19:50:23Z

3

Your event is firing, then the page is likely reloading because of the form firing. Try using

event.preventDefault()

and it will prevent the form from submitting.

Edit: Also, the comment below me is absolutely correct. Remember to pass the event into the function.

edited Jan 4, 2016 at 19:50

answered Jan 4, 2016 at 19:45

John Kossa

4593 silver badges8 bronze badges

1 Comment

Sean Perkins Over a year ago

For browser support, be sure to pass the event parameter to the valueRead function. Example: document.getElementById('submit').addEventListener('click',valueRead(event));

Katana314 · Accepted Answer · 2016-01-04 19:50:09Z

2

The default way that a form "submits" is to send a new page request to the server, using the given inputs as parameters. From there, a serverside language like PHP might save them. Often, this would churn out an "Operation successful!" page or similar.

In your case, your form's action is blank, meaning it will "submit" to the page it's on. Since your page is pretty basic, it will reload without any of the sent information appearing in it.

As John Kossa suggested, you could intercept this by adding an argument, let's say, "evt", to the parentheses of the valueRead function, and then calling evt.preventDefault().

answered Jan 4, 2016 at 19:50

Katana314

8,6052 gold badges31 silver badges36 bronze badges

Comments

Kingmaker · Accepted Answer · 2016-01-04 19:49:31Z

1

When you click the button then you send the form and the page is automatically refreshed. To prevent this behavior try this solution

function valueRead(e){
    e.preventDefault();
    var vuvedenaSuma = document.getElementById('suma').value;
    document.getElementById('vuvedenaSuma').innerHTML = vuvedenaSuma;
}

answered Jan 4, 2016 at 19:49

Kingmaker

5191 gold badge6 silver badges22 bronze badges

Comments

yaakov · Accepted Answer · 2016-01-04 19:54:55Z

1

Also, you might want to use the event listener on submit:

document.getElementById('formName').addEventListener('submit', valueRead);

answered Jan 4, 2016 at 19:54

yaakov

4,7274 gold badges29 silver badges55 bronze badges

Collectives™ on Stack Overflow

Reading form value fails - Javascript

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related