How to select form id in jquery code?

Question

I'm trying to disable submit button until some fields are filled. I've found a code working, but I have several forms in my page, so I'd like to select the form affected by the code...

html:

<form id="form_id1">
  <fieldset>
    <legend>Personal</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
    Date of birth: <input type="text" size="10" /><br />
    Address : <textarea size="30"></textarea><br />

  </fieldset>
<input type="submit" value="Submit" />
</form>
<form id="form_id2">
  <fieldset>
<legend>Personal</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" /><br />
Address : <textarea size="30"></textarea><br />

  </fieldset>
<input type="submit" value="Submit" />
</form>

javascript:

$(document).ready(function()
{

    $('input:submit').attr("disabled", true);
    var textCounter = false;
    $('input:text, textarea').keyup(check_submit);

    function check_submit() {
        $('input:text, textarea, select').each(function()
          {
            if ($(this).val().length == 0) {
                textCounter = true;
                return false;
               }
            else {
                textCounter = false;
            }
         });

        $('input:submit').attr("disabled", textCounter);
    }
});

any idea? thanks

Ok, with the code #form_id1 input:submit before all fields it works on jsfiddle. But not on my page... I found that I'm using tinymce for textarea field, and that is the problem. The button is not activated after filling the textarea field! If I remove tinymce, it works! Any idea?

I've found that tinymce is using iframe for displaying its textarea :-(( is there a way to validate that?...

"so I'd like to select the form affected by the code" which means? Here, none form fired anything — A. Wolff
– A. Wolff, Commented Jun 5, 2013 at 8:53

Bloafer · Accepted Answer · 2013-06-05 09:23:29Z

1

You could try this (working on jsFiddle http://jsfiddle.net/Dx6wU/)

$(document).ready(function(){
    $('input:submit').attr("disabled", true);

    $("input:text, textarea, select").bind("keyup blur", function(){
        check_form($(this));
    });

    function check_form(formField){
        var form = formField.closest("form");
        var disableButton = false;
        $.each(form.find("input:text, textarea, select"), function(){
            if($(this).val().length == 0){
                disableButton = true;
            }
        });
        form.find("input:submit").attr("disabled", disableButton);
    }
});

answered Jun 5, 2013 at 9:23

Bloafer

1,3287 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eric_zyh · Accepted Answer · 2013-06-05 08:51:39Z

0

use $("#form_id1 **")

   $('#form_id1 input:text,#form_id1 textarea,#form_id1 select').each(function()
      {
        if ($(this).val().length == 0) {
            textCounter = true;
            return false;
           }
        else {
            textCounter = false;
        }
     });

    $('#form_id1 input:submit').attr("disabled", textCounter);

answered Jun 5, 2013 at 8:51

eric_zyh

1769 bronze badges

Comments

fGo · Accepted Answer · 2013-06-05 08:52:52Z

0

what about

element.parent().attr("id");

where element is your button object

answered Jun 5, 2013 at 8:52

fGo

1,1466 silver badges11 bronze badges

Comments

BeNdErR · Accepted Answer · 2013-06-05 08:56:02Z

0

have a look here: http://jsfiddle.net/AVsgH/53/

CODE

$("form").each(function () {
    $(this).find('input:text, textarea, select').each(function () {
        if ($(this).val().length == 0) {
            textCounter = true;
            return false;
        } else {
            textCounter = false;
        }
    });
     $(this).find('input:submit').attr("disabled", textCounter);
});

hope it helps

answered Jun 5, 2013 at 8:56

BeNdErR

18k21 gold badges79 silver badges107 bronze badges

Comments

Wattcey · Accepted Answer · 2013-06-05 08:57:12Z

0

First of all I'd give ids to the form input buttons.
Then you should be able to use jquery closest:

$('input[id$="yourbtnid"]').closest("form");

answered Jun 5, 2013 at 8:57

Wattcey

1131 silver badge7 bronze badges

Comments

letiagoalves · Accepted Answer · 2013-06-05 08:58:18Z

0

Since the keyup event callback is attached to descendants of form elements you can select the form affected by the code doing:

$('input:text, textarea').keyup(check_submit);

function check_submit() {
    // some code
    var $form = $(this).closest('form');
    // some code 
}

See this demo in action

answered Jun 5, 2013 at 8:58

letiagoalves

11.3k4 gold badges43 silver badges68 bronze badges

1 Comment

letiagoalves Over a year ago

the demo highlight the form affected by the code so "keyup" some input or textarea to see it in action

albertedevigo · Accepted Answer · 2013-06-05 09:31:51Z

0

Where it says $('input:whatever'), you can use $('#form_id1 input:whatever').

EDIT

To face the TinyMCE issue with the keyup event you shoud add some code to the initializer:

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onKeyUp.add(function(ed, e) {
          check_submit;
      });
   }
});

That binds the same check_submit function to the onKeyUp event that TinyMCE provides.

You can check the documentation for more references.

edited Jun 5, 2013 at 9:31

answered Jun 5, 2013 at 8:51

albertedevigo

18.4k6 gold badges55 silver badges58 bronze badges

5 Comments

Recif Over a year ago

Yes! That's it, thanks. In jsfiddle it works but not on my form! :-( I found that I'm using tinymce for textarea field, and that is the problem. The button is not activated after filling the fields! :-( Why?

albertedevigo Over a year ago

Wow, that's a completely different question. Your problem is that TinyMCE needs a particular setup to handle events. Check this question stackoverflow.com/questions/1024712/…

Recif Over a year ago

Ok, I've read the thread... But I ca't see how to adapt the code for my case :-( could you help please?

albertedevigo Over a year ago

Well, I've edited, but it's hard to answer without having your TinyMCE code or at least a jsfiddle to check the actual issue.

Recif Over a year ago

If I put the code into tinymce.init, it disable tinymce... Here is my code (sorry, it doesn't work putting code in comments): jsfiddle.net/Q2qqd (I use tinyMCE v4 with jquery)

Collectives™ on Stack Overflow

How to select form id in jquery code?

7 Answers 7

Comments

Comments

Comments

Comments

Comments

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related