0

In my page I have 2 forms. he jQuery scripts disables both buttons of the forms, until one dropdown value is selected as you can see here http://jsfiddle.net/baW53/

The problem is that I need to activate only the button where the dropdown value is changed/selected. For now if I choose a value on the first form, it activates the button of the second form also. But it has to activate only the same form's button.

How to do this?

var jq = $.noConflict();

jq(document).ready(function (){
    validate();
    jq('select').change(validate);
});

function validate(e){

    var validation = true;
    jq('select').each(function(){ 

        if(jq(this).val().length>0)
        {
            validation = false;
        }
    });   

    if ( validation ) {
        jq('.submit').prop('disabled', true);

    } else {

        jq('.submit').prop('disabled', false);
    }
}

<form name="forma" method="POST" action="used-results.php" id="apliforma">
dropdown menus
<button type="submit" class="btn btn-primary submit" id='submit' >submit</button>
</form>

<form name="forma2" method="POST" action="used-results.php" id="sinthetiforma">
dropdown menus
<button type="submit" class="btn btn-primary submit" id='submit2' >submit</button>
</form>
DrLivingston
  • 788
  • 6
  • 15
EnexoOnoma
  • 8,454
  • 18
  • 94
  • 179

3 Answers3

0

You are selecting every submit button with this selector jq('.submit') you need to make it more specific. There are any number of ways to do this.

One way is to get the select control from your event object then write a pattern to go to it's parent form and then down to the select button.

Getting the closest form: jQuery find parent form

jq(ev).closest("form").find(".submit")

I'm not sure that ev is right, you might have to dig the control out of the event.

Community
  • 1
  • 1
DrLivingston
  • 788
  • 6
  • 15
0

You can find specific elements with more complex selectors. For instance, if you gave your forms id="forma" and id="formb" you could do jq(#forma .submit) to get the one button.

If you stick with the name attribute, I believe the selector would be jq([name="forma"] .submit) or something close to that.

sellmeadog
  • 7,437
  • 1
  • 31
  • 45
0

You have to use selectors like others say. Here's the modification to your jsfiddle: http://jsfiddle.net/baW53/1/

Basically, if its the initial call, we change the properties of all the buttons, i.e, buttons with class submit else we find the button which is a sibling of the dropdown and use its id.

Here's the relevant portion:

if (e) {
        var btn = "#" + jq(this).siblings('button').attr('id');
} else {
        var btn = ".submit";
}
Ayush Chaudhary
  • 716
  • 1
  • 8
  • 20
  • Thank you, but it has a strange behaviour when I return the value back to None. At first it does not disables the button. – EnexoOnoma Mar 17 '14 at 23:14
  • That's because the validate method checks for the value of BOTH the dropdowns and not the one that was changed. Here's a quick fix: http://jsfiddle.net/baW53/3/ – Ayush Chaudhary Mar 17 '14 at 23:19