Disable button until form field is empty but the button is outside form

Question

Hi i am creating a popup plugin in WordPress in which i want to disable my button which is outside form disable until my form fields are empty. I am not using submit button because after clicking submit button it reloads the page which i don't want to do i just want it to close so i am using button instead of type="submit"

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>Modal header</h3>
            </div>
            <div class="modal-body">
                <form method="post" action="" name="sf-popup" id="sf-popup">

                    <input type="text" name="sfname" placeholder="Name" class="col-xs-12 col-md-6 sfname">
                    <input type="tel" name="sfphone" placeholder="Phone Number" class="col-xs-12 col-md-offset-1 col-md-5 sfphone">
                    <textarea name="message" placeholder="Enter Your Query" class="col-md-12"></textarea>
                </form>

            </div>
            <div class="modal-footer">
                <button id="sfpsubmit" class="btn btn-primary sfp_btn" name="submit">Submit</button>

            </div>
        </div>
    </div>

    <script>
        $("#sf-popup .sfname").keyup(function() {
            alert("hmmm");
            /* if($(this).val() == '' && $( "#sf-popup .sfphone").val() == ''){
            $('#sfpsubmit').attr('disabled','disabled');
        } else{
            $('#sfpsubmit').removeAttr('disabled');
        } */
        });
        $("#sf-popup .sfphone").keyup(function() {
            if ($(this).val() == '' && $("#sf-popup .sfname").val() == '') {
                $('#sfpsubmit').attr('disabled', 'disabled');
            } else {
                $('#sfpsubmit').removeAttr('disabled');
            }
        });
    </script>

</div>

and i try plenty of javascript method but all are not good to work for me

WORKING CODE this code is now working for me thanks for you help Prakash Rao

jQuery(document).ready(function($) {
    setTimeout(function(){
            $('#myModal').modal('show');
        }, 3000);


        $( "#sf-popup .sfname" ).keyup(function() {
          if($(this).val() == '' || $( "#sf-popup .sfphone").val() == ''){
                $('#sfpsubmit').attr('disabled','disabled');

            } else{
                $('#sfpsubmit').removeAttr('disabled');
                $( ".sfp_btn" ).click(function() {
                    $('#myModal').modal('hide');
                });
            }
        });

        $( "#sf-popup .sfphone" ).keyup(function() {
            var sfp_phone = $(this).val();
            if(sfp_phone.length > 10){

                $(this).val(sfp_phone.substr(0,10));
                $('#sfpsubmit').removeAttr('disabled');
            }
                if(sfp_phone == '' || $( "#sf-popup .sfname").val() == '' || $.isNumeric(sfp_phone) == false ||sfp_phone.length < 10){
                $('#sfpsubmit').attr('disabled','disabled');

            } else{
                $('#sfpsubmit').removeAttr('disabled');
                $( ".sfp_btn" ).click(function() {
                    $('#myModal').modal('hide');
                });
            }
            });


    });

Take a look at [this](http://stackoverflow.com/questions/5614399/disabling-submit-button-until-all-fields-have-values). There are a lot of methods in the answer — KcYoosuf, Mar 02 '16 at 11:42
I have already checked that but in this the submit button is inside form and by button is outside form which i already mentioned in my question — Jayant Rawat, Mar 02 '16 at 11:44
You can disable the refreshing of the page when clicking a submit button in a form by using `preventDefault()` — SlashmanX, Mar 02 '16 at 12:30

Prakash Rao · Accepted Answer · 2016-03-02T12:55:15.920

2

try the keyup event of jquery which will check every time the user types in the input box

Provide classes to input boxes "sfphone" and "sfname"

<input type="text" name="sfname" placeholder="Name" class="col-xs-12 col-md-6  sfname">
<input type="tel" name="sfphone" placeholder="Phone Number" class="col-xs-12 col-md-offset-1 col-md-5 sfphone">

Make sure the id of submit button that is id="submit" is not 2 times in this page, also all the IDs should be once

for eg : For name input

$( "#sf-popup .sfname" ).keyup(function() {
  if($(this).val() == '' && $( "#sf-popup .sfphone").val() == ''){
    $('#submit').attr('disabled','disabled');
} else{
    $('#submit').removeAttr('disabled');
}
});

similarly for phone input

$( "#sf-popup .sfphone" ).keyup(function() {
  if($(this).val() == '' && $( "#sf-popup .sfname").val() == ''){
    $('#submit').attr('disabled','disabled');
} else{
    $('#submit').removeAttr('disabled');
}
});

edited Mar 02 '16 at 12:55

answered Mar 02 '16 at 12:28

Prakash Rao

2,368
1
9
12

and the dot should be one i think before removeAttr – Jayant Rawat Mar 02 '16 at 12:44
No prob but the button not disabled – Jayant Rawat Mar 02 '16 at 12:49
Okay try paste this jquery code wrapped with script tags below the popup form.. that is after the end of
– Prakash Rao Mar 02 '16 at 12:52
I also have put dots to sfphone and sfname in jquery blocks 1st and 2nd one – Prakash Rao Mar 02 '16 at 12:55
Okay let me try this – Jayant Rawat Mar 02 '16 at 12:57
No still not. I have that button outside form is it really effect on this thing – Jayant Rawat Mar 02 '16 at 13:00
nope that doesn't matters as we are getting the button by its ID .. try to alert something inside the keyup event while commet everything else – Prakash Rao Mar 02 '16 at 13:01
this means onkeyup not working.. make that work.. using some min.js – Prakash Rao Mar 02 '16 at 13:08
i have updated my question this is how i am using now – Jayant Rawat Mar 02 '16 at 13:12
Hey @parkash are you still there Key up is working now but disable is not working – Jayant Rawat Mar 02 '16 at 13:34
$('#submit').css('border','solid 2px'); instead of disabled it it works then there is syntax error in disable code – Prakash Rao Mar 02 '16 at 13:54

Disable button until form field is empty but the button is outside form

1 Answers1