Jsoup element.class.class selcet method returning null

Question

I'm trying to get to a <button> element inside a <form> element.

<form action="search.php" method="post" class="form-inline">
            <div class="form-group">
                <label for="value"><span class="text-uppercase">Lyrics Search:</span></label>
                <input type="text" name="value" class="form-control input-sm">
            </div>
            <div class="form-group">
                <select name="field" class="form-control input-sm">
                    <option value="artist" >Artist</option>
                    <option value="title" >Title</option>
                    <option value="body"  >Body</option>
                </select>
                <button type="submit" class="btn btn-primary btn-sm">Submit</button>
            </div>
        </form> 

Now the <button> element is inside 2 HTML classes and i know i need to concatenate those classes in the select() method. Somehow my code returns null after the select() method.

MyCode:

HtmlPage htmlPage = new HtmlPage(Jsoup.connect("http://www.lyricsplanet.com/").get());

            // Get to <div class="form-group">
            Element searchFormElement = htmlPage.getHtmlDocument().select("div.form-group").first();
searchFormElement.attr("name", searchedLyrics); // Setting the value of name to the searched lyrics.

            // Getting to <button type="submit" class="btn btn-primary btn-sm">Submit</button>
            Element buttonElement = htmlPage.getHtmlDocument().select("button.btn btn-primary btn-sm.form-inline").first();
            System.out.println(buttonElement.html());

In - select("button.btn btn-primary btn-sm.form-inline").first(); I try to get to the <button> element using It's two classes.

So what am i doing wrong?

EDIT I just noticed there's 3! classes to the <button> element. That's more messy.

Answer 1

To search with multiple classes for one element, you have to group multiple selectors like this select("button.btn, button.btn-primary, button.btn-sm") .

For details see http://jsoup.org/cookbook/extracting-data/selector-syntax in the section Selector combinations .

Answer 2

I've never heard of a class called HtmlPage in Jsoup. You should use the Document-class which will be returned if you call Jsoup.connect(...);

You could try the following code:

Document document = Jsoup.connect("http://www.lyricsplanet.com/").get(); // Just connect
Element formElement = document.select("div#alphabet > form").first(); // Search for form
formElement.select("input[name=value]").val(yourSearchValue); // Set your search value
Element submitButton = formElement.select("button[type=submit]").first(); // Then search in form for submit button, otherwise your selector could find another submit button first

The HTML Form elements (search-field and submit-button) do not have an identifier you could use. The only way is to use these specific css selectors.

Edit: Do you want to submit the form afterwards? Then you don't have to search for the submit button. You can just submit the form after you've set the search value. Try the following code:

Document document = Jsoup.connect("http://www.lyricsplanet.com/").get();
FormElement formElement = document.select("div#alphabet > form").forms().get(0); // Use FormElement instead of Element
formElement.select("input[name=value]").val(yourSearchValue);
Document searchResult = formElement.submit().post(); // Do anything you want with the search result page/html