skip to Main Content

I’m trying to make a simple post method using jquery ajax. Whenever I click submit button, Im getting an error:400(Bad request) in my console. Im not sure what is the mistake in the code, I will be happy if anyone helps with the issue. Thank you.

Note: The URL used in the code is a dummy and not a working URL.

<html>

    <head>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css"
            media="all" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.min.css" rel="stylesheet"
            type="text/css" media="all" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.min.js"></script>
        <script type="text/javascript">
            function ok(){
                var thisForm = $(this).closest('form.contactPage');
                var sendData = thisForm.serialize();
                jQuery.ajax({
                 type: "POST",
                // url is dummy and not a working url
                 url: "dummy URL", 
                 data: thisForm.serialize(),
                    data: sendData,
                    success : function(data, textStatus, jqXHR)
                    {

                        console.log(data);
                    },
                    error: function(jqXHR, textStatus, error){
                        console.log(error);
                    }
                })
            }            
        </script>
    </head>

    <body>
        <form name="contactPage" class="form-email">

            <input type="text" class="form-control input-lg input-sm validate-required" id="name" placeholder="Contact Person" />
            <div class="form-group">
                <select class="form-control input-lg bfh-countries wrapper-dropdown-2 validate-required" id="dd" data-country="US"></select>
            </div>
            <input type="text" class="form-control input-lg validate-required" id="contactNum" placeholder="Contact Number" />
            <input type="text" class="form-control input-lg validate-required validate-email" id="email" placeholder="Email Address" />
            <input type="time" class="form-group form-control input-lg validate-required" id="time" placeholder="Time" />
            <input type="submit" class="form-group form-control" value="Contact" onclick="ok()" />
        </form>
    </body>
    </html>

3

Answers


  1. That URL seems to invalid.

    I suggest you check the URL given.

    Login or Signup to reply.
  2. The URL provided by you is not valid. try again with a valid URL..

    Login or Signup to reply.
  3. <!DOCTYPE html>
    <html>
    <head>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css"
                media="all" />
            <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.min.css" rel="stylesheet"
                type="text/css" media="all" />
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.min.js"></script>
    
    </head>
    <body>
    <form name="contactPage" id="contactPage" class="form-email">
    
                <input type="text" class="form-control input-lg input-sm validate-required" id="name" placeholder="Contact Person" />
                <div class="form-group">
                    <select class="form-control input-lg bfh-countries wrapper-dropdown-2 validate-required" id="dd" data-country="US"></select>
                </div>
                <input type="text" class="form-control input-lg validate-required" id="contactNum" placeholder="Contact Number" />
                <input type="text" class="form-control input-lg validate-required validate-email" id="email" placeholder="Email Address" />
                <input type="time" class="form-group form-control input-lg validate-required" id="time" placeholder="Time" />
                <input type="submit" class="form-group form-control" value="Contact"/>
            </form>
    <script>
    $(document).ready(function(){
    
         $(function(){
            $("#contactPage").submit(function(event){
                event.preventDefault();
                $.ajax({
                        url:'url.php',
                        type:'POST',
                        data:$(this).serialize(),
                        success:function(result){
                           alert(result);
                        }
                });
            });
        });
    });
    </script>
    </body>
    </html>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search