CODEWITHSUNDEEP
jqueryhtmlforms
Haroon
Haroon

Reputation: 506

How can I validate and submit a form with jQuery if submit button has the name submit?

I have this error in console "Uncaught TypeError: form.submit is not a function"

Input button : <input id="submit" class="button_text" type="submit" name="submit" value="Submit"/>

I have found many solutions saying that name should not be submit. I have tried changing name but then form validations do not work on form submit and submit the form even if there are errors. What can be the issue?

jQuery:

$("#submit").click(function() {
    form.target="_self";
    form.action="submit.php";
    form.submit();
});

$('#form').validate({
    submitHandler: function(form) {
        $.ajax({
        url: form.action,
        type: form.method,
        data: form.serialize(),
        success: function(response) {
            if (response == false)
            {alert('could not submit!')}
        }

        });

    }
});

UPDATE: I want to disable the submit button if form is validated and submitted successfully, but if I add like this it disable the submit button without submitting the form.

$('#submit').on('click', function() {
            $('#form').attr('action', 'submit.php');
            $('#form').submit();
        });
        $("#form").submit(function(e){
            if ($(this).valid()) {
                $("#submit").attr("disabled", true);
                $("#preview").attr("disabled", true);
                return true;
            }else{
                e.preventDefault();
            }
        });

Upvotes: 0

Views: 1777

Answers (3)

Anil Shrestha
Anil Shrestha

Reputation: 1200

try like this

$("#submit").click(function() {
  $('#formId').attr('action', 'submit.php');
  $('#formId').attr('target', '_self');
  $('#formId').submit();

});

UPDATE

        if ($("#form_id").valid()) {
            $("#form_id").submit();
            $("#submit").attr("disabled", true);
            $("#preview").attr("disabled", true);

        }else{
           return false;
        }

do something like this. it may give yo some idea. first validate form and then submit

Upvotes: 3

Phani Kumar M
Phani Kumar M

Reputation: 4590

Can you try like this:

<script type="text/javascript">
    $(document).ready(function () {
        $("#submit").click(function (e) {
            e.preventDefault();

            var form = $("#form");

            $.ajax({
                url: form.action,
                type: form.method,
                data: form.serialize(),
                success: function (response) {
                    if (response == false) {
                        alert('could not submit!')
                    }
                    else {
                        //form.target = "_self";
                        //form.action = "submit.php";
                        form.submit();
                    }
                }
            });

            return false;
        });
    });
</script>

<form id="form" action="test.html" method="POST">
    <input type="text" value="" id="test" name="test" />
    <input id="submit" class="button_text" type="submit" name="submit" value="Submit" />
</form>

Upvotes: 0

Znaneswar
Znaneswar

Reputation: 3387

Try this

$('#submit').on('click', function() { 
   /* your code here */
 });

Upvotes: 0

Related Questions