Link to home
Start Free TrialLog in
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
SOLUTION
Avatar of crystal (strive4peace) - Microsoft MVP, Access
crystal (strive4peace) - Microsoft MVP, Access

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Rohit Bajaj

ASKER

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
Avatar of crystal (strive4peace) - Microsoft MVP, Access
crystal (strive4peace) - Microsoft MVP, Access

what about running the code on the document KeyUp event?
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.
maybe the code that is invoking/closing the editor can call it?

perhaps this link will help:
http://api.jquery.com/keyup/
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
how about running the code on the page activate event?
one more thing i noticed that doing back on chrome works fine. but doing back on firefox keeps the button enabled
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial