Javascript or jQuery: Saving input value into variable which is saved into another variable

Question

I have been trying to save the value from an input into a variable which then is saved into another variable which holds a api call url, which is then tied to a getJSON function, for some reason I cannot seem to save the value of the input into the variable, it keeps replying back as blank, but in console it shows up as what the input value holds. What am I doing wrong?

Update: Below is the image of the url not including the saved variable. It should show what I had input into the variable in the full url. As you can see login_name= is blank and so is login_password.

jsFiddle: https://jsfiddle.net/m25pLka5/

HTML:

<form id="sso-login">
  <table>
    <tr>
      <td>User Name:</td>
      <td><input class="username" name=login_name type=text size=15 maxlength="100"></td>
    </tr>
    <tr>
      <td>Password:</td>
      <td><input class="password" name=login_password type=password size=15 maxlength="100"></td>
    </tr>
    <tr>
      <td>Remember Me:</td>
      <td><input name=remember_me type=checkbox></td>
    </tr>
  </table>
  <input type="submit" value="Submit" name="Submit" />
</form>

jQuery:

$(function(){
  var username = $('.username').val();
  var password = $('.password').val();

  var ssoURL = 'https://testing.com/';
  var ssoMethod = 'testingMethod&login_name='+ username +'&login_password='+ password +'&v=1.0&response_format=json';

  $("#sso-login").submit(function(e) {
    e.preventDefault();
    $.getJSON(ssoURL + ssoMethod, function(data) {
      console.log(data);
    });
  });
});

The issue is that you are getting the value of the username and password on page load, and never updating those variables in the code. Look at the solution below which moves this value getting into the submit handling which will get their values at the time of submit. And yeah, there's the issue of the missing ? in the url. — Taplar
– Taplar, Commented Dec 1, 2017 at 19:20
What exactly goes wrong? Are you sure that "testing.com" delivers JSON? Can you open "testing.com/testingMethod" in the Browser? And you should have a quotation mark after "testingMethod" rather than an ampersand ("&"). — Heiko Jakubzik
– Heiko Jakubzik, Commented Dec 1, 2017 at 19:21
I removed the url for my API call, and testing is only there for testing methods, the problem is not with the url call, it's with the varaible not being inserted into the outputted API result when I concat it. — M Q
– M Q, Commented Dec 1, 2017 at 19:39
@MQ which was due to you setting those variables on page load, as I said. — Taplar
– Taplar, Commented Dec 1, 2017 at 19:49

RAHUL S R · Accepted Answer · 2017-12-01 19:19:30Z

1

try changin ur code to somewhat

$(function(){  
  $("#sso-login").submit(function(e) {

   var username = $('.username').val();
  var password = $('.password').val();

  var ssoURL = 'https://testing.com?';
  var ssoMethod = 'testingMethod&login_name='+ username +'&login_password='+ password +'&v=1.0&response_format=json';
    e.preventDefault();
    $.getJSON(ssoURL + ssoMethod, function(data) {
      console.log(data);
    });
  });
});

and instead of using class to get the vals from element try using ids sometimes if the class is been used somewhere else in the dom (before the inputs) may clash so use ids as possible

and also i guess ur apis url was wrong when it comes to params params start after ?

answered Dec 1, 2017 at 19:19

RAHUL S R

1,5891 gold badge12 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Javascript or jQuery: Saving input value into variable which is saved into another variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related