Avatar of Rohit Bajaj
Rohit BajajFlag for India asked on

Disabling click on a button if text is empty

Hi,
I have an editor in spring mvc with the following js :

require(["jquery", "detect", "utils", "codemirror/lib/codemirror", "codemirror/mode/meta", "codemirror/addon/mode/loadmode", "codemirror/addon/selection/active-line"], function ($, detect, utils, CodeMirror) {

    CodeMirror.modeURL = "codemirror/mode/%N/%N";

    var cm = window.cm = CodeMirror($('#editor').get(0), {
        styleActiveLine: true,
        lineNumbers: !detect.isMobile,
    });

    var mime;
    $("#mode").on("change", function() {
        mime = $("#mode option:selected").prop("id");
        var mode = CodeMirror.findModeByMIME(mime).mode;
        cm.setOption("mode", mode);
        CodeMirror.autoLoadMode(cm, mode);
    });

    $("#submit").on("click", function(e) {               // on submtting make the editor readonly
        //alert($("#name").value());
        e.preventDefault();
        e.stopPropagation();

        var objectTobeSent = {};
        objectTobeSent.id = null;
        objectTobeSent.title = $("#name").val();
        if (objectTobeSent.title === "") {
            objectTobeSent.title = "Untitled";
        } 
        objectTobeSent.mime = mime;//console.log(objectTobeSent.mode);
        objectTobeSent.text = cm.getValue();

        var createURL = document.getElementsByClassName("invisible")[0].dataset.createUrl;

        $.ajax({
            contentType: "application/json; charset=utf-8",
            url : createURL,
            type: "POST",
            data : JSON.stringify(objectTobeSent),
            success: function(snippet, status, xhr) {
                if (xhr.status !== 201) {
                    alert("Couldn't create code snippet. Please try after sometime");
                } else if (!utils.sendMessage(snippet, objectTobeSent.title, $("#message").val())) {
                    window.location.href = snippet.URL;
                }
            },
            error: function(request, status, error) {
                alert(request.responseText);
            }
        });
    });

    $("#cancel").on("click", function (e) {
    });
});

Open in new window


On the page i have a submit button and in the above js there is a click listener on it : $("#submit").on("click", function(e) {
This basically operates on a editor and the text in the editor is stored in        objectTobeSent.text = cm.getValue();
The user types in the editor and clicks submit and then this click listener comes into action.
Currenly even if the user has not typed anything that is text value is "" empty string and one clicks on submit button the click listener gets invoked..
I want to make the submit button unclickable if the text is empty.

Here is the code in JSP for the button :
<div class="buttons">
	  <button id="submit" class="btn_green">Create & Post</button>
	  <button class="dailogueCancel" id="cancel">Cancel</button>
	</div>

Open in new window

Please help me modify javascript code to achieve this .
Thanks
JavaScript

Avatar of undefined
Last Comment
crystal (strive4peace) - Microsoft MVP, Access

8/22/2022 - Mon
SOLUTION
crystal (strive4peace) - Microsoft MVP, Access

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Rohit Bajaj

hi
but as soon as user types something the button should become clickable.
also need to handle the case when user types something and deletes the text. so button becomes clickable meanwhile and then again is disable
crystal (strive4peace) - Microsoft MVP, Access

what about running the code on the document KeyUp event?
ASKER
Rohit Bajaj

Hi,
I have one more confusion regarding this . Here is my complete jsp which includes this js :
<!DOCTYPE html>
<html>
  <head>
    <title>Create Snippet</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <script>var require = {config: function (c) {require = c}}</script>

  </head>

  <body>
    <div id="container">
      <div class="dijitDialogTitleBar">
	<div class="dijitDialogTitle">Create Snippet</div>
      </div>
      <div class="dijitDialogPaneContent">
	<input id="name" type="text" class="title" placeholder="Title (Optional)" />
	<div class="form-group">
	  <select id="mode" class="form-control">
	    <option value="" disabled selected style='display:none;'>Code Type</option>
	    <option id="application/x-httpd-php" > PHP</option>
	    <option id="text/x-pig" > Pig</option>
	    <option id="text/plain" > Plain Text</option>
	    <option id="text/x-plsql" > PLSQL</option>
	    <option id="text/x-properties" > Properties files</option>
	    <option id="text/x-python" > Python</option>
	    <option id="text/x-puppet" > Puppet</option>
	    <option id="text/velocity" > Velocity</option>
	    <option id="text/x-verilog" > Verilog</option>
	    <option id="application/xml" > XML</option>
	    <option id="application/xquery" > XQuery</option>
	    <option id="text/x-yaml" > YAML</option>
	    <option id="text/x-z80" > Z80</option>
	  </select>
	</div>
	
	<div id="editor-pane">
	  <div id="editor"></div>
	</div>
	<div class="message_area">
	  <textarea id="message" type="text" placeholder="Add Comment (Optional)" ></textarea>
	</div>
	<div class="buttons">
	  <button id="submit" class="btn_green">Create & Post</button>
	  <button class="dailogueCancel" id="cancel">Cancel</button>
	</div>
      </div>
    </div>
    <div class="invisible" data-create-url="${createURL}"></div>
  </body>
</html>

                                

Open in new window


When this jsp is rendered in browser i can type in
1) Title
2) Text
3) Comment
and choose codeType

The editor area which i am interested in monitoring is coming with the line :

<div id="editor-pane">
        <div id="editor"></div>
      </div>


My project internally uses codeMirror library. The above automatically produces Text editor.
So i have to somehow put onkeyup listener on this editor part rather than on the whole document.
Your help has saved me hundreds of hours of internet surfing.
fblack61
crystal (strive4peace) - Microsoft MVP, Access

maybe the code that is invoking/closing the editor can call it?

perhaps this link will help:
http://api.jquery.com/keyup/
ASKER
Rohit Bajaj

hi
putting keyup on editor worked.
but now suppose i type something and so the button becomes enabled , i press the button and a new page opens up ...now i press back on browser. my initial page opens up with the button enabled whereas the text in editor is blank.

looks like its retaining the modified html when back is pressed. what can i do to avoid this behaviour
crystal (strive4peace) - Microsoft MVP, Access

how about running the code on the page activate event?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
Rohit Bajaj

one more thing i noticed that doing back on chrome works fine. but doing back on firefox keeps the button enabled
crystal (strive4peace) - Microsoft MVP, Access

interesting ...
ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
crystal (strive4peace) - Microsoft MVP, Access

nice example, Julian ~
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy