Javascript function undefined, but IT IS

Question

I'm doing some testing with AJAX form submissions and I keep getting ReferenceError: submit_ajax is not defined from the code below. However, you can see that it IS defined.

<script type="javascript">
function submit_ajax(){
    data = {'email':$('#email2').val(),'password':$('#pwd2').val()}

    $.ajax({
        url: 'ajax_testing.php',
        data: data,
        success: function() {
            //AJAX success
            $('#success_fail').html('success!');
            window.setTimeout(function() { $('#success_fail').hide(); }, 3000);
            $('#myModal2').hide();
        },
        error: function() {
            //Ajax failure
            $('#success_fail').html('failed!');
            window.setTimeout(function() { $('#success_fail').hide(); }, 3000);
            $('#myModal2').hide();
        }
    });
}

</script>


    <div>
        <div id="success_fail"></div>
      <!-- Trigger the modal with a button -->
      <button type="button" class="btn btn-info btn-lg" id="button_for_modal2" data-toggle="modal" data-target="#myModal2">Form Submitted via AJAX and No Parent Refresh</button>

      <!-- Modal -->
      <div class="modal fade" id="myModal2" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Title of Form</h4>
            </div>
            <div class="modal-body">
              <h2>Vertical (basic) form</h2>
              <!--<form action="<?PHP echo $_SERVER['PHP_SELF']; ?>" method="post">*******************************AJAX*********************************-->
                <div class="form-group">
                  <label for="email">Email:</label>
                  <input type="email" class="form-control" id="email2" placeholder="Enter email (ajax)" name="email2">
                </div>
                <div class="form-group">
                  <label for="pwd">Password:</label>
                  <input type="password" class="form-control" id="pwd2" placeholder="Enter password (ajax)" name="pwd2">
                </div>
                <button onclick="submit_ajax()" class="btn btn-default">Submit</button>
              <!--</form>-->
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>

I've tried running the function directly in the console and I get the same thing.

Any idea about what's going wrong here?

the issue is with the attribute type="javascript" - not a recognised javascript mime type — Jaromanda X
– Jaromanda X, Commented Jul 31, 2017 at 0:00

hsz · Accepted Answer · 2017-07-31 00:01:22Z

2

Instead of using <script type="javascript"> use <script type="text/javascript"> which is valid type for JS code.

answered Jul 31, 2017 at 0:01

hsz

153k63 gold badges269 silver badges320 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

baao Over a year ago

Or use no type at all, as text/javascript is the default

Mohideen bin Mohammed · Accepted Answer · 2017-07-31 00:26:54Z

0

change your script tag, either dont include type or set it as type="text/javascript"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    function submit_ajax(){
         alert('submit_ajax working')
        data = {'email':$('#email2').val(),'password':$('#pwd2').val()}

        $.ajax({
            url: 'ajax_testing.php',
            data: data,
            success: function() {
                //AJAX success
                $('#success_fail').html('success!');
                window.setTimeout(function() { $('#success_fail').hide(); }, 3000);
                $('#myModal2').hide();
            },
            error: function() {
                //Ajax failure
                $('#success_fail').html('failed!');
                window.setTimeout(function() { $('#success_fail').hide(); }, 3000);
                $('#myModal2').hide();
            }
        });
    }

    </script>
    <button onclick="submit_ajax()" class="btn btn-default">Submit</button>

edited Jul 31, 2017 at 0:26

answered Jul 31, 2017 at 0:21

Mohideen bin Mohammed

20.4k11 gold badges121 silver badges131 bronze badges

2 Comments

Bergi Over a year ago

Please add some explanation.

Mohideen bin Mohammed Over a year ago

sorry it went inside script tag. now it visible. thanks

Collectives™ on Stack Overflow

Javascript function undefined, but IT IS

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related