We help IT Professionals succeed at work.

Disabling click on a button if text is empty

Rohit Bajaj
Rohit Bajaj asked
on
139 Views
Last Modified: 2015-12-22
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
Comment
Watch Question

crystal (strive4peace) - Microsoft MVP, AccessRemote Training and Programming
CERTIFIED EXPERT
Top Expert 2015
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
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, AccessRemote Training and Programming
CERTIFIED EXPERT
Top Expert 2015

Commented:
what about running the code on the document KeyUp event?

Author

Commented:
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.
crystal (strive4peace) - Microsoft MVP, AccessRemote Training and Programming
CERTIFIED EXPERT
Top Expert 2015

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

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

Author

Commented:
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, AccessRemote Training and Programming
CERTIFIED EXPERT
Top Expert 2015

Commented:
how about running the code on the page activate event?

Author

Commented:
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, AccessRemote Training and Programming
CERTIFIED EXPERT
Top Expert 2015

Commented:
interesting ...
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
crystal (strive4peace) - Microsoft MVP, AccessRemote Training and Programming
CERTIFIED EXPERT
Top Expert 2015

Commented:
nice example, Julian ~

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.