How do I display a jquery variable obtained from user input?

Question

I want to be able to click the submit button after inputting some text into the forms, then click the results button to display what I just input.

It seems like the titles variable is "stuck" in the function onClick(event) function. How do I "get it out?"

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            $('#submit').click(onClick);
        });

        function onClick(event) {
            var titles = $('input[name^=titles]').map(function(idx, elem) {
                return $(elem).val();
            }).get();
            window.alert(titles); //it displays the titles here
        }

        $("#result").click(function() {
            window.alert('x');
            window.alert(titles); //but not here
            $("p").text(titles[0]);
        });
    });
</script>
    <p>display results here</p>
    <input name="titles[]">
    <input name="titles[]">
    <button id="submit">submit</button>
    <button id="results">results</button>
</body>

This has probably been answered already but I don't know enough jargon to effectively search for an answer. Also I used some of the code from here cause I want to take in two string inputs: Get values from multiple inputs jQuery

Andrew Brooke · Accepted Answer · 2016-01-24 22:13:57Z

1

First of all, you have a typo in the selector for your second click event. It should be #results, rather than #result

To the core of the problem, the titles variable is out of scope in the second click event.

You can remedy this by declaring it outside of either function. This well let you reference it in either one.

var titles = [];

function onClick(event) {
  titles = $('input[name^=titles]').map(function(idx, elem) {
    return $(elem).val();
  }).get();
  window.alert(titles);
}

$("#results").click(function() {
  window.alert(titles);
  $("p").text(titles[0]);
});

answered Jan 24, 2016 at 22:13

Andrew Brooke

12.2k8 gold badges41 silver badges56 bronze badges

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

Comments

hdcos · Accepted Answer · 2016-01-24 22:39:45Z

Hi Austin when you click on submit jquery calls your function onClick but this function has nothing to do with the one that you register here

$("#result").click(function() { // resultCallback

so when you define the variable

var titles

this variable, like you say, is bound (scoped) to the function onClick and you can't access it from resultCallback. Plus it is completely asynchronous. Clicking on result button (ie calling resultCallback) is not clicking on submit button (ie calling onClick) and because of this the variable titles won't be loaded.

If you want to retrieve the titles create a function getTitles that internally contains

return $('input[name^=titles]').map(function(idx, elem) {
    return $(elem).val();
  }).get();

and call it from your functions.

Collectives™ on Stack Overflow

How do I display a jquery variable obtained from user input?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related