Call for External Function using jQuery

Question

I've got an external js file with the following code in it that is checking to see if a person login credentials are true or false. When I put this jquery into the actual php file it will work as intended but when it I put the jQuery into the js file and try calling it it doesn't work and I'm not getting any errors. What's wrong with the call?

js file:

function handleLogin(event) {

    // Stop form from submitting normally
    event.preventDefault();

    // Get some values from elements on the page:
    var $form = $( this ),
    username = $form.find( "input[name='username']" ).val(),
    password = $form.find( "input[name='password']" ).val(),
    url = "../process/login.php";

    // Send the data using post
    var posting = $.post( url, { username: username, password: password } );

    // Reset data in #testStatus textarea
    posting.done(function( data ) {
        if (data == '1') {
           $('#loginModal').modal('hide')
           $( "#loginOption" ).replaceWith( "<li id='loginOption'><a href='logout.php'>Logout</a></li>" );
        }
    });
}

php file (the call of the function located at the end of the php file):

        <!-- Modal -->
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="loginModalLabel">Login</h4>
          </div>
          <div class="modal-body">
            <form id="loginForm" action="">
              <div class="form-group">
                <label for="username">Username</label>
                <input name="username" type="text" class="form-control" id="username" placeholder="Username">
              </div>
              <div class="form-group">
                <label for="password">Password</label>
                <input name="password" type="password" class="form-control" id="password" placeholder="Password">
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <input type="submit" id="loginSubmit" name="login" class="btn btn-primary" value="Login">
          </div>
          </form>
        </div>
      </div>
    </div>

<script>
$("#loginForm").submit(function handleLogin() { });
</script>

score 0 · Accepted Answer · answered Apr 03 '14 at 00:00

0

You need to pass the function reference to the submit event handler...

Instead you are creating a new function which does not do anything to the submit handler, so try

$("#loginForm").submit(handleLogin);

answered Apr 03 '14 at 00:00

Arun P Johny

384,651
66
527
531

I get an error: Cannot call method 'preventDefault' of undefined. – derekshull Apr 03 '14 at 00:02
@derekshull sorry.. fixed... the `()` after `handleLogin` should not the there – Arun P Johny Apr 03 '14 at 00:03
Now I get this error after clicking submit: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'website address' is therefore not allowed access. – derekshull Apr 03 '14 at 00:05
what is the domain name used to load the page and what is the domain name to which the form is submitted – Arun P Johny Apr 03 '14 at 00:13
@derekshull You are attempting to do a cross-domain script. Look at [this stack link](http://stackoverflow.com/questions/6114436/access-control-allow-origin-error-sending-a-jquery-post-to-google-apis) for a general idea of a way to try it. Assuming the site isn't just blocking CORS – JClaspill Apr 03 '14 at 00:14
the domain name to which its submitting is just ../process/login It works if i put the jquery into the php page though. I have a main folder (we will call it main) and my php page is in the main folder and my js file is in main/js/main.js – derekshull Apr 03 '14 at 01:13
@ArunPJohny if I include the full url (such as `http://www.example.com/main/js/main.js` and `http://www.example.com/main/process/login.php`) then it will work. Is there a way to put js/main.js and process/login.php and it still work? – derekshull Apr 03 '14 at 02:28

score 0 · Answer 2 · answered Apr 03 '14 at 00:02

0

It should be like this:

$("#loginForm").submit(function(e){
  handleLogin(e);
});

answered Apr 03 '14 at 00:02

adam

240
1
7

Now I get this error after clicking submit: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'website address' is therefore not allowed access. the domain name to which its submitting is just ../process/login It works if i put the jquery into the php page though. I have a main folder (we will call it main) and my php page is in the main folder and my js file is in main/js/main.js. whats my problem? – derekshull Apr 03 '14 at 01:42
if I include the full url (such as http://www.example.com/main/js/main.js and http://www.example.com/main/process/login.php) then it will work. Is there a way to put js/main.js and process/login.php and it still work? – derekshull Apr 03 '14 at 02:28
How do you include the script when it's telling you this error ? – adam Apr 03 '14 at 08:28
at the bottom of the page before
I use `
– derekshull Apr 03 '14 at 13:25
That looks fine. I think the problem is the url of the post request. If I understand well how your project is structured, you shouldn't use '../process/login.php', instead use 'process/login.php' only, if the process folder is in the same directory as this php page, you don't have to go to the parent directory. – adam Apr 03 '14 at 22:47

Call for External Function using jQuery

2 Answers2