How to store data from html form in variable?

Question

Basically there is a Google-like search bar, once the user hits submit I need to store it in a variable. There is more to the jQuery than below, but all it is is document.ready. The reason I need the data in a variable is because after that, I will use $.post and send it to my API.

("#form").submit( function(res) {
    var id = $(this).JSON.parse(data);

//Other attempted ways of getting input. 
    // $(this).data
    // $(this).data('button')
    // document.getElementById('id').value
    // $(this).getElementById('id').value
    // $(this).JSON.parse(data) -> "cannot parse undenfined, means no JSON data."


$.post('/search', {id: id }, function(data) { 
        data = JSON.parse(data);
        $("#count").text("we analyzed...");
        $("#result1".text(data));
        $("#totals").text("with a score of..");
        $("#result2").text(data);
    });
    res.redirect('/test/' + id);
});

<form id="form">
    <div class="featurette">
        <div class="featurette-inner text-center">
            <div class="search">
                <div class="input-group input-group-lg">
                    <span class="input-group-btn">
                        <button class="btn btn-danger" type="submit">Search</button>
                    </span>
                    <input type="text" name="id" input id="searchbar" class="form-control" placeholder="Enter your search term....">
                </div>
            </div>
        </div>
</form>

The HTML seems invalid? Also, does the form submit, and the page reload? — adeneo
– adeneo, Commented Apr 18, 2016 at 18:27
@adeneo I am using node.js and handlebars. How else does it seem invalid? — Marc Fletcher
– Marc Fletcher, Commented Apr 18, 2016 at 18:28
@WillAshley because you're missing a closing </div> tag and the input has an incorrect input attribute — Rory McCrossan
– Rory McCrossan, Commented Apr 18, 2016 at 18:30
@mhodges it returns undefined. I've added the rest of the jquery if it helps. I also get an error saying redirect is not a function. — Marc Fletcher
– Marc Fletcher, Commented Apr 18, 2016 at 18:32

Rory McCrossan · Accepted Answer · 2016-04-18 18:32:51Z

1

Firstly, note that your #form selector is missing the $.

Assuming that you mean that you want to retrieve the value the user typed in the #searchbar input field, you can just use $('#searchbar').val():

$("#form").submit( function(res) {
    var search = $('#searchbar').val();
    // use the 'search' variable as needed here...
    // $.post('url...', { searchTerm: search });
});

Also note that your HTML is invalid. You're missing a closing </div> and there is no input attribute on an input element. Try this:

<form id="form">
    <div class="featurette">
        <div class="featurette-inner text-center">
            <div class="search">
                <div class="input-group input-group-lg">
                    <span class="input-group-btn">
                        <button class="btn btn-danger" type="submit">Search</button>
                    </span>
                    <input type="text" name="id" id="searchbar" class="form-control" placeholder="Enter your search term...." />
                </div>
            </div>
        </div>
    </div>
</form>

edited Apr 18, 2016 at 18:32

answered Apr 18, 2016 at 18:27

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

Marc Fletcher Over a year ago

It worked! Thank you sir. The term is stored. Do you know why it is saying 'error; redirect is not a function'?

Rory McCrossan Over a year ago

It's because the event object that's passed in to the function (which you're storing in res) has no redirect method. If you want to do a redirect, use window.location.assign('url...');. However your AJAX call is rather redundant if you're redirecting the page immediately after it anyway.

Collectives™ on Stack Overflow

How to store data from html form in variable?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related