Jump to content
Larry Ullman's Book Forums

Problems With Settext


Recommended Posts

Hello,

 

I am having issues inserting text into an empty div when a certain criteria is met. I have a div with an id of error and I am attempting to use the setText via the U variable. Here is my code:

var U = {



        // For getting the document element by ID:

        $: function(id) {

            'use strict';

            if (typeof id == 'string') {

                return document.getElementById(id);

            }

        }, // End of $() function.



        // Function for setting the text of an element:

        setText: function(id, message) {

            'use strict';

            if ( (typeof id == 'string') && (typeof message == 'string') ) {

        

                // Get a reference to the element:

                var output = this.$(id);

                if (!output) return false;

            

                // Set the text

                if (output.textContent !== undefined) {

                    output.textContent = message;

                } else {

                    output.innerText = message;

                }

                return true;

            } // End of main IF.

        }, // End of setText() function.

        

        // Function for creating event listeners:

        addEvent: function(obj, type, fn) {

            'use strict';

            if (obj && obj.addEventListener) { // W3C

                obj.addEventListener(type, fn, false);

            } else if (obj && obj.attachEvent) { // Older IE

                obj.attachEvent('on' + type, fn);

            }

        }, // End of addEvent() function.

        

        // Function for removing event listeners:

        removeEvent: function(obj, type, fn) {

            'use strict';

            if (obj && obj.removeEventListener) { // W3C

                obj.removeEventListener(type, fn, false);

            } else if (obj && obj.detachEvent) { // Older IE

                obj.detachEvent('on' + type, fn);

            }

        }, // End of removeEvent() function.



        // Function for creating an Ajax object:

        getXMLHttpRequestObject: function() {



            var ajax = null;



            // Most browsers:

            if (window.XMLHttpRequest) {

                ajax = new XMLHttpRequest();

            } else if (window.ActiveXObject) { // Older IE.

                ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0');

            }



            // Return the object:

            return ajax;



        } // End of getXMLHttpRequestObject() function.

        

    }; // End of U declaration.
 
// Add error message if a certain input box is filled in
function checker(e) {

        'use strict';

        

        // Get the event object:

        if (typeof e == 'undefined') e = window.event;



        var hidden = U.$('design_hidden');

        var error = U.$('error');

        

        // Check to see if hidden input has been filled in

        if (hidden) U.setText(error, 'Sorry this form is not for you!');



        

        // Prevent the form's submission:

        if (e.preventDefault) {

            e.preventDefault();

        } else {

            e.returnValue = false;

        }

        return false;

        

    } // End of checker() function

    

    window.onload = function() {

        'use strict';

        

        U.addEvent(U.$('main_submit'), 'submit', checker);

    };
Link to comment
Share on other sites

The first argument of the setText method should be a string, not a DOM object. Try getting rid of the "var error = U.$('error');" statement, and then change the call to the setText method as follows:

U.setText('error', 'Sorry this form is not for you!');
Link to comment
Share on other sites

Ok, I cant for the life of me figure out how to read an input variable and if there is something entered show a div that I have hidden. I have chosen to go this route as I am very comfortable with the showing and hiding of divs but for some reason this code is not doing its job.

 

First is my html:

 

<div class="quote_submit">
                            <input id="hidden" name="hidden" type="text" class="basic_input" value=""   placeholder="web development" >
                            <div id="error">This form is not for you!</div>
                            <button id="main_submit" class="main_submit" name="main_submit" type="submit">Submit</button>
                        </div>

 

and the corresponding javascript:

 

 

function checker(e) {
        'use strict';
        
        // Get the event object:
        if (typeof e == 'undefined') e = window.event;

        var hidden = U.$('hidden');
        var error = U.$('error');
        
        // Check to see if hidden input has been filled in
        if (hidden.value.length > 0) error.style.visibility = 'visible';
        
        // Prevent the form's submission:
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
        return false;
        
    } // End of checker() function
    
    window.onload = function() {
        'use strict';
        
        U.addEvent(U.$('main_submit'), 'submit', checker);
    };

 

Is there a reason that this code would not be working when there is text entered in the input? I am trying to have it prevent the submission of the form and show the hidden div IF there is something in the input otherwise just submit the form to the corresponding php script.

Link to comment
Share on other sites

You can't set up an onsubmit event handler for a form submit input. The handler has to be set up for the form element itself, which I don't see in your HTML.

Try enclosing everything in a form element, not a div, and then attach the onsubmit event handler to the form element.

Likely, that's causing an error, which is causing everything else to fail.

 

Please let us know what you find.

Thanks.

Link to comment
Share on other sites

Hi

 

Yeah I had the html in a form I just didnt put in on here but you were right I had the id of the button instead of the form tied to the onsubmitt. My only other question is how to reset the onsubmit once it has been used and changes have been made to the form so it can be submitted again?

Link to comment
Share on other sites

For some reason, if there was an error and (hidden) was true which causes the form to prevent Default when I go to click the submit button again nothing happens. That is fine for this situation as I am using Javascipt to prevent bot submition of the forms but If I was evauating it for actual clients I would need them to be able to submit the form again after changes.

Link to comment
Share on other sites

You can use JS to submit the form when you're ready. The basic logic in the onsubmit event callback function would be something like the following:

if (error) {
  
  // Display error message and prevent default.
  
} else {
  
  this.submit(); // Within the onsubmit event callback function, this refers to the form element. Calling the submit method will submit the form.
  
}
  • Upvote 1
Link to comment
Share on other sites

 Share

×
×
  • Create New...