CODEWITHSUNDEEP
javascripthtmltextarea
Goldie
Goldie

Reputation: 170

Javascript: Submit the change for the textarea doesn't work

I'm still a rookie in frontend stuff. I'm searching for quick debugging for JavaScript code in submitting the change for the textarea tag.

I debugged it with the browser console, but haven't figured how it misbehaved yet. The desired behavior should be the Change button is initially hidden, then when the user starts changing things in the text area, the button appears. And after the button being clicked, it retains the change.

I tried to look up for similar bugs related to this behavior, but those are neither JavaScript nor exactly related to mine.

Here's the HTML snippet featuring Javascript (I ignore the presentation created by CSS for now):

<form>
    <input type="button" value="Change" id="submitChange" disabled> 
       <textarea id="textChange" rows="10" cols="30" onchange="venueTextChange();"> Write something here </textarea>
        <script>
            function venueTextChange(){
                        var val document.getElementById("textChange").disabled;
                        document.getElementById("submitChange").disabled = !val; 
                    };
    </script>
</form>

2nd: I'm also wondering how to refactor this code, so that I could externalize this script in such a way that the <textarea> tag doesn't have to set the function venueTextChange() explicitly in the element- I want to hide it, but for this case, I think I have to include the attribute onchange.

Maybe, something like .addEventListener('onchange',... ) in the external .js script could work?

Upvotes: 1

Views: 2050

Answers (2)

TalGabay
TalGabay

Reputation: 258

Here is the soultion: just change in venueTextChange() function !val to false.

<form>
    <input type="button" value="Change" id="submitChange" disabled> 
       <textarea id="textChange" rows="10" cols="30" onchange="venueTextChange()"> Write something here </textarea>
        <script>
            function venueTextChange(){
                        document.getElementById("submitChange").disabled = false; 
                    };
    </script>
</form>

Upvotes: 0

stefannew
stefannew

Reputation: 172

Part of the problem is that the onChange event only fires when the element has lost focus, i.e. when the user has changed the text and blurred the field:

https://www.w3schools.com/jsref/event_onchange.asp

You need to use something like keyup, or onInput in order to have the event fire immediately, and yes - in order to not have to invoke the function on the onchange attribute, you can add an event listener to the element from another script.

Here's a fiddle to demonstrate: https://jsfiddle.net/25xmka43/

Upvotes: 2

Related Questions