使用Bootstrap标签输入和AJAX在readyState上的表单输入值未更改

Question

I have the following HTML form:

<form method="post" action="./results.php">
    <input type="submit" name="submitbtn" id="submitButton" class="btn btn-default btn-responsive" role="button">
    <input name="q" id="query" value="" data-role="tagsinput"/>
</form>

After loading the page using AJAX, I want to populate the value field with the http.responseText . I'm trying doing it this way:

function AjaxFunction()
{
    url = 'fbserver.php';
    http.open("GET",url, true);
    http.onreadystatechange = function()
    {
        if (http.readyState == 4)
        {
            $(".se-pre-con").fadeOut("slow");
            var query = http.responseText; // The user's interests as a string
            document.getElementById("query").value = query;
            /* Tried refreshing the input here like suggested in the linked question ($('input').tagsinput();) */
        }
    }
    http.send(null);
}

However, it's not working, leaving the form input empty and the value attribute unchanged. I tried document.getElementById("query").name = query; and the name attribute changes normally.

I guess it has something to do with the tagsinput plugin as mentioned here , but I was unable to fix this problem based on the answers. Any help would be appreciated! ;)

Answer 1

You should use the api of the plugin rather putting the text values directly.

I am using jQuery (and I think the plugin also has a dependency on it, so you can use this approach also). So inyour ajax call, you can:

$('#query').tagsinput('add', http.responseText);

You can view the other methods here: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/