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

score 1 · Accepted Answer · answered Jan 24 '16 at 22:13

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]);
});

score 1 · Answer 2 · answered Jan 24 '16 at 22:39

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.

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

2 Answers2