CODEWITHSUNDEEP
javascriptjqueryformsinput
Nikkorian
Nikkorian

Reputation: 790

Jquery not returning the values in form INPUTs

I have a login form on a modal jquery dialog with the usual 2 text INPUTs. When I enter a login name and password then click the submit, the call back function is called.

The first thing the callback does is try to extract the values of the two INPUTs, but the values returned are empty strings (I have a breakpont here, and have even stepped through the jquery processing of the objects - they objects are correctly identified as the fields on the form, but value="" for both).

At this point I can still see the values in the form, and when the callback exits and the focus goes back to the form, the values are still in the INPUTS. I also tried .prop("value") rather than .val(), but the result was the same.

I just can't figure why I can't read the values - any help appreciated. 

<form id="cp-loginform" action="/cypo/index.php" method="POST" >
    <input type="hidden" name="Login" value="Login">
    <input type="hidden" name="pp" value="0" />
    <input type="text"  id="cp-loginname" name = "loginname" placeholder = "Login ID" class="loginforminput cp-width-50" autofocus >
    <input type="password" id="cp-password"  name = "password"  placeholder = "password" class="loginforminput cp-width-50"></p>
    <input type="submit" id="cp-submit"  name = "submit" onclick="ProcessLogin()" ></p>
</form>

function ProcessLogin() {
    var loginval = $("#cp-loginname").val(); 
    var passwordval = $("#cp-password").val(); 
    console.log(loginval.concat(" ",passwordval));
}

PROBLEM RESOLVED: I felt that this was a scope issue. The form itself was obviously OK (if submitted from the dialog it worked) - it was just the attempt to check the INPUT values using jquery that wasn't working.

I found that my select had to start with the dialog element and include a descendent path to my INPUTs. It's as if the dialog puts a wrapper around the elements inside so they are no longer visible as owned by the document.

If I login with xxx and zzz and step therough the following code I see this: 

var loginval = $("#cploginname").val();                 << = ""
var passwordval = $("#cppassword").val();               << = ""    
var loginval = $("#cp-loginform #cploginname").val();   << = "" 
var passwordval = $("#cp-loginform #cppassword").val(); << = ""
var loginval = $("#cpdialog #cp-loginform #cploginname").val();   << = "xxx"
var passwordval = $("#cpdialog #cp-loginform #cppassword").val(); << = "zzz" 
console.log(loginval.concat(" ",passwordval));

I can't say I understand what's going on, but I have a solution so I am happy. Thanks to all who answered.

FINAL WORD Thanks to @CMedina, I now understand. The form was defined in a hidden DIV at the top of my BODY section, and I passed $("#loginform") to a f() that created the dialog. The dialog was added to the DOM just before the . I had missed the fact that my original form was still in the DOM, so I was referencing that, not the dialog copy. When I included the dialog wrapper in the path, I finally 'found' the second copy.

Upvotes: 0

Views: 1092

Answers (2)

Ehsan
Ehsan

Reputation: 12969

Try it :

<html>
    <head>
    </head>
    <body>
       <form id="cp-loginform" action="/cypo/index.php" method="POST">
    <input type="hidden" name="Login" value="Login">
    <input type="hidden" name="pp" value="0" />
    <input type="text"  id="cp-loginname" name = "loginname" placeholder = "Login ID" class="loginforminput cp-width-50" autofocus >
    <input type="password" id="cp-password"  name = "password"  placeholder = "password" class="loginforminput cp-width-50">
    <input type="submit" id="cp-submit" name ="submit" onclick="ProcessLogin(event)">
    </form>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            function ProcessLogin(e) {
            e.preventDefault();
            var loginval = $("#cp-loginname").val(); 
            var passwordval = $("#cp-password").val(); 
            alert(loginval.concat(" ",passwordval));
            }

        </script>
    </body>
</html>

Upvotes: 0

CMedina
CMedina

Reputation: 4242

Your button is the type submit (their natural behavior is to send the form). Remove the onclick in your button html.

<input type="submit" id="cp-submit"  name = "submit">

You must add preventDefault to prevent submit the form and do what you want. Add the code JS for the button onclick event

$("#cp-submit").on("click", function(e){
   e.preventDefault();
   var loginval = $("#cp-loginname").val(); 
   var passwordval = $("#cp-password").val(); 
   console.log(loginval.concat(" ",passwordval));
});

Result: https://jsfiddle.net/cmedina/svjqb2a4/

Upvotes: 2

Related Questions