CODEWITHSUNDEEP
javascriptjquerysubmit
NewbieCoder
NewbieCoder

Reputation: 706

Javascript, enabling disabled fields on submit isn't working

$(function() {
    $("#booking-form").submit(function() {
        alert("hi");
        $("#Booking_clientPackagedService_id").prop("disabled", false);
    });
});

Initially, I have my #Booking_clientPackagedService_id disabled.

So I implemented the above code to re-enable it when the form is submitted.

But I found out that it is not enabling. The alert("hi"); is working but not for the .prop().

Is it because of the syntax itself? Or is there some other ways to do it?

Please advise thanks.

Upvotes: 0

Views: 99

Answers (6)

adricadar
adricadar

Reputation: 10219

Use event.preventDefault(); to block the form to be submited.

If you want to submit 2nd time, than you can verify if a class exist and add it after fields have been enabled.

$(function() {
    $("#booking-form").submit(function(event) {
        if(!$(this).hasClass('submited'))
        {
            event.preventDefault(); // prevent form to submit
            alert("hi");
            $("#Booking_clientPackagedService_id").attr("disabled", false);
            $(this).toggleClass('submited');
        }
    });
})

Check the snippet to see the working example.

$(function() {
    $("#booking-form").submit(function(event) {
        if(!$(this).hasClass('submited'))
        {
            event.preventDefault(); // prevent form to submit
            alert("hi");
            $("#Booking_clientPackagedService_id").attr("disabled", false);
            $(this).toggleClass('submited');
        }
    });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="booking-form">
  <input type="text" id="Booking_clientPackagedService_id" disabled="disabled" />
  <input type="submit" value="Submit" />
</form>

Upvotes: 1

Jai
Jai

Reputation: 74738

You can makeuse of localstorage in your case:

var issubmitted = localstorage.getItem('issubmitted') !== undefined && localstorage.getItem('issubmitted') === 'submitted' || false;
$("#Booking_clientPackagedService_id").prop("disabled", issubmitted);

$("#booking-form").submit(function() {
    localstorage.setItem('issubmitted', 'submitted');
    alert("hi");
});

Upvotes: 1

Aneesh R S
Aneesh R S

Reputation: 3827

$(function() {
    $("#booking-form").submit(function() {
        alert("hi");
        $("#Booking_clientPackagedService_id").prop("disabled", false);
        return false;
    });
});

Upvotes: 1

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

try like this 

$("#booking-form").on("submit",function(e) {
        e.preventDefault();
        $("#Booking_clientPackagedService_id").prop("disabled", false);
 });

Upvotes: 1

Prasanna Kumar H A
Prasanna Kumar H A

Reputation: 3431

Try this

$('#Booking_clientPackagedService_id').removeAttr("disabled");

Upvotes: 1

Sudharsan S
Sudharsan S

Reputation: 15403

Use event.preventDefault(); the default action of the event will not be triggered. 

   $("#booking-form").submit(function(event) {
            event.preventDefault();
            $("#Booking_clientPackagedService_id").removeAttr('disabled');
        });

Upvotes: 1

Related Questions