CODEWITHSUNDEEP
jqueryajaxjquery-mobile
Josh C.
Josh C.

Reputation: 316

Jquery Popup form submit

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.

Upvotes: 1

Views: 12002

Answers (3)

user3404634
user3404634

Reputation: 58

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.

Upvotes: 1

Christine
Christine

Reputation: 629

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.

Upvotes: 0

Sardor Dushamov
Sardor Dushamov

Reputation: 1667

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"

Upvotes: 0

Related Questions