1

I'm rather new to ajax and I'm working with jquery mobile. What I'm doing is a login form inside a popup window and i have to code to make both work but I'm just not sure on how to connect the two so that it actually works.

Here is the pop up html

<a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Login</a>
        <div data-role="popup" id="popupLogin" data-overlay-theme="a" data-theme="a" class="ui-corner-all">
        <form id="popuplogin">
            <div style="padding:10px 20px;">
                <h3>Please Login</h3>
                <label for="un" class="ui-hidden-accessible">Username:</label>
                <input type="text" name="user" id="un" value="" placeholder="username" data-theme="a">
                <label for="pw" class="ui-hidden-accessible">Password:</label>
                <input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a">
                <button type="submit" data-theme="b" data-icon="check">Sign in</button>
            </div>
        </form>
        </div>

and here is my script. My question is how do I connect the two together.

$("#popupLogin").submit(function() {
$.ajax({
type: "POST",
url: "submiturl",
data: $("input#name").val(),
success: function(html) {
  // show the confirmation inside the popup
}
})
})

To be honest I'm not even sure I fully understand the ajax but if someone could help me understand it. it would be greatly appreciated.

7
  • There is no form with the ID form, so nothing will be triggered. Not to mention you have 3 different tags that have the ID popuplogin which is not valid HTML5. IDs must be unique. Oct 18, 2013 at 4:29
  • well i understood the part on the beginning of the ajax i just dont fully understand how that portion of code works. also the code i used is straight from the jquery mobile website
    – Josh C.
    Oct 18, 2013 at 4:35
  • Regardless of where you got it, there is no form with the id "form", so no ajax will be called. Nor is there an input with the id "name", so there is no value to be had. When you submit the form, the jQuery will trigger because it triggers when the form is submitted. When it triggers, it calls the ajax function. Oct 18, 2013 at 4:40
  • ok so i changed it to call popupLogin. can you please explain how that ajax works. like where would i go to work my php for working with the data?
    – Josh C.
    Oct 18, 2013 at 4:42
  • 1
    Type:"POST" - means that the data is sent via the post, which means the URL will not contain the data. url - the URL the data will be sent to. If the URL is www.mywebsite.com/derp.php, derp.php will recieve the data. Data - the data being passed into the POST to be handled by your server code. Success - an anonymous function that recieves a "callback" from the server code. Anything output in the server code will return if the call is successful. Oct 18, 2013 at 4:47

3 Answers 3

1

try something like this.

<button type="button" data-theme="b" data-icon="check" data-inline="true" onclick="validLogin()">Sign in</button>

by adding the onclick your calling your javascript function. I.E connecting the two Pieces of code

Then in your javascript do something like this.

function validLogin(){
var uname=$('#uname').val();
var password=$('#password').val();
$.ajax({
    type: "POST",
    url: "scripts/processed.php",
    data: {"uname": uname, "password":password},
    cache: false,
    success: function(result){
        var result=trim(result);
        if(result=='correct'){
            window.location='index.php';
            $('#loginForm').submit();
        }else{
            $("#loginerror").html(result);
            return false;
        }
    }
});
}

that should do what you want.

0

See this row:

<a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Login</a>

and

<form id="popuplogin">

change <a href="#popupLogin" to <a href="#popuplogin"

2
  • 1
    False, he should change the ID entirely, as they should be 100% unique. Oct 18, 2013 at 4:23
  • the popup loads just fine what will changing that do?
    – Josh C.
    Oct 18, 2013 at 4:24
0

Your popup code looks correct. I would change your form code to

<form id="formLogin" action="@submitUrl" method="post">

Then your submit button whould submit the form data without you needing to do any javascript.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.