Jquery ajax button wont submit

Question

Cant figure out why my button wont work that is for the ajax response. Trying to get it to print out the name of one of the people from the form upon pressing the button id AJAX button. Is there something i am overlooking because no matter what I place in the success portion nothing happens.

     <div class="formContainer" id="container">
        <form class="form-horizontail form" role="form"
              action="/process-form" method="post">
            <input type="hidden" name="csrf" value="{{csrf}}">

            <div class ="form-group">
                <label for="fieldName" class="col-sm-2 control-label" >Name</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="fieldName" name="name1">

                    </div>
                </div>

                <div class ="form-group">
                    <label for="fieldName" class="col-sm-2 control-label" >phone number</label>
                    <div class="col-sm-4">
                        <input type="tel" class="form-control" id="fieldPhone" name="phoneNumber1">
                    </div>
                </div>
                <div class ="form-group">
                    <div class="col-sm-offset-2 col-sm-4">
                        <button type="submit" class=" btn btn-default" id = "list">List</button>
                    </div>
                </div>
            </form>
        </div>

        <button type="button" id="AJAX-Button"> Draw</button>
       {{#section 'jquery'}}
  </script>
<script>
function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max)) +1;
}
$(document).ready(function () {
    $("#AJAX-Button").on('click', function (event) {
        //event.preventDefault();
        var winner = "name" + getRandomInt(3);
        var formData = { 'name': $('input[name= \\winner]').val() };
        var jsonData = JSON.stringify(formData);
        console.log(formData);
        console.log(jsonData);
        console.log(winner);
        var $container = $('#container');
        $.ajax({
            url: "/process-form",
            type: 'POST',
            data: jsonData,
            success: function (data) {
                alert(winner);
            },
            error: function () {
                alert("failed");
            }
        });
    });
});

EDITED: fixed the code thanks

@swati it says not defind in reference to the $ in the $(document). ready , not sure how to fix that — user13112112, Mar 24 '20 at 04:04
check [this](https://stackoverflow.com/questions/2194992/jquery-is-not-defined) post you will be able to solved this . — Swati, Mar 24 '20 at 04:05
@Swati Ive updated if after taking a look at that post and not sure if i did it right or not but the error went away but the button still doesnt work — user13112112, Mar 24 '20 at 04:17

score 1 · Accepted Answer · answered Mar 24 '20 at 04:29

The error seems to be that you are not separating the two <script> instructions. Use one for <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> and then open a new one for your code <script></script> like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
    //code goes here
</script>

Note: If you are using HTML5 you don't need to specify type="text/javascript" in the script tag. See this answer for more info: Is type attribute necessary inside script tag.

score 0 · Answer 2 · answered Mar 24 '20 at 04:37

Place you javascript code outside the cdn link.Like this

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
        $(document).ready(function () {
            $("#AJAX-Button").on('click', function (event) {
                event.preventDefault();
                var formData = {
                    'name': $('input[name=name1]').val()
                };
                console.log(formData);
                var $container = $('#container');
                $.ajax({
                    url: "/processAJAX",
                    type: 'POST',
                    data: formData,
                    success: function (data) {                      
                            alert(data);
                    },
                    error: function () {                  
                        alert("failed");
                    }
                });
        });
        });
    </script>

Jquery ajax button wont submit

2 Answers2