Ive read through a bunch of similar issues with autocomplete but none of the solutions presented have helped me with this. I have a form that is searching for usernames in a database. The autocomplete list is populating with the appropriate names, and from the looks of the code being returned for the autocomplete, the names are coming back with the appropriate IDs and VALUEs.
Why am I unable to submit the form with any data being passed along?
The screen is refreshing as if the form was submitted but no information comes back with the GET. Just a "?" at the end of the url. If I use the keyboard or use the mouse to select an option in the autocomplete dropdown, no information is passed with the GET. Even if I type in something and use a submit button and disregard the autocomplete dropdown there is still no information being passed along.
Here is the current HTML.
<title>TEST</title>
<link href="jquery-ui.min.css" rel="stylesheet" />
<link href="autocomplete.css" rel="stylesheet" />
<script src="jquery-1.11.2.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.ui.autocomplete.html.js"></script>
<script type="text/javascript" src="../test.php"></script>
</head>
<body>
<form id="searchform" method="GET">
<input type="text" id="searchterm" placeholder="Search For Client">
<input type="submit" value="Submit">
<script type="text/javascript" src="../js/watchdog.js"></script>
</form>
</body>
</html>
and the JS named "watchdog" that is watching that form field. What am I missing?
$(function() {
$("#topic_title").autocomplete({
source: "ajax.php",
minLength: 2,
select: function(event, ui) {
var item = ui.item;
console.log(item,ui);
if(item) {
$(this).val(item.value);
$(this.form).submit();
return false;
}
}
});
});
I should also add, this is the seventh or either variation of this script with the same empty results.
Thanks in advance for any help with this.
the autocomplete code looks fine for me. the only problem I can see in your code is you didn't provide the name attribute in the <input> so your browser didn't append it to the url.just replace this
<input type="text" id="searchterm" placeholder="Search For Client">
with this
<input type="text" id="searchterm" name="clientId" placeholder="Search For Client">
(remember to change clientId to the name that your server expects)
Related
I really need help... :-) I have two html pages and forms on both of them. I need solution to show field value from first form (on first page) in field on second form, after click on SEND button. But, I need both pages to stay open, on first I need to insert values and on second page that values should be shown. Also, I need a solution without PHP because this app will be running on local devices, without server. I don't have any solution and please, I need some tips how I can do that.
I found here some solutions with localStorage and it looks interested but I need to stay on First page and send field value to Second page, in live. There is code which I found here, this is example what I need, just I need both pages to be open and after I insert some value in field on first page and click on button, that value should be shown in field on second page. Thank you in advance!
<html>
<head>
<title>First Page</title>
<script type="text/javascript">
function saveVal() {
var inputFirst = document.getElementById("name").value;
localStorage.setItem("name", inputFirst);
inputFirst = localStorage.getItem("name");
}
</script>
</head>
<body>
<form action="secondPage.html" method="get">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" />
</label>
<input type="submit" value="submit" onclick="saveVal()"/>
</form>
</body>
</html>
<html>
<head>
<title>Second Page</title>
</head>
<body>
<form action="#">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name"
readonly="readonly" />
</label>
<script type="text/javascript">
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
</script>
</form>
</body>
</html>
You can use setInterval to constantly check and set the value:
//this will run storeCheck function every 250 miliseconds and update values from localStorage.
setInterval(storeCheck, 250);
function storeCheck() {
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
}
This is my first question! I am trying to enter a search term into a search box, and when I click Submit, I want the search term inserted into this URL:
http://www.hadrians-search.tk/search?search_param=mario?&items_per_page=2&page_number=2
mario would be the search term. This is the search page I am testing with:
http://cs.oswego.edu/~jmcquaid/CSC-380/search3.html
When I enter a search term such as ball into the search box and click Submit, this is the URL I get:
http://hadrians-search.tk/search?search%3Fsearch_param%3D=ball
As you can see, this is clearly not the URL I am intending to get.
Bear in mind that search3.html is just a file I am testing with on the front-end:
<!DOCTYPE html>
<html>
<body>
<form id="myForm" action="http://hadrians-search.tk/search?search_param=">
Search: <input type="text" name="search?search_param="><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit().action="http://hadrians-search.tk/search?search_param=";
}
</script>
</body>
</html>
So basically I am trying to send the search term entered in the search box to the Flask server, but it isn't getting sent properly. Should I be trying an HTTP GET Request? I originally tried this, but I couldn't figure out how to integrate an HTTP GET Request with a search box and button. Because of this, I instead tried to use action, as you can see in the file. Any advice that you can provide will be greatly appreciated, and I thank you for your time.
You can pass the parameters via GET. If you have three parameters, you could add the three elements in the form. You can do something like this.
<!DOCTYPE html>
<html>
<body>
<form id="myForm" method="get"
action="http://hadrians-search.tk/search">
search_param: <input type="text" name="search_param"><br><br>
items_per_page: <input type="text" name="items_per_page"><br><br>
page_number: <input type="text" name="page_number"><br><br>
<input value="Submit form" type="submit">
</form>
</body>
</html>
I previously had a an old autocomplete script running with an older jQuery on an input form. I wanted to add markItUp to my text entry form and the autocomplete version I was using was no longer working with the newer jQuery.
I saw that the latest autocomplete was available in jquery-ui.js, but after installing that I started getting the following warning:
Error: cannot call methods on autocomplete prior to initialization;
attempted to call method '/include/suggest.php'
I looked up initialization and added this after $(document).ready(function():
$(this.target).find('input').autocomplete();
Same error message. So I tried making it more specific to the input field that's being autocompleted:
$(this.target).find("input[id^='last_']").autocomplete();
I'm sort of flying blind here. The autocomplete stuff for this page was done by someone I no longer have access to and I've never really written jQuery stuff myself. I'm trying to understand this but right now, I'm stumped.
Here's a skeleton of the page:
<script src="/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="/inc/auto/main.css" type="text/css" />
<link rel="stylesheet" href="ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="/js/markitup/jquery.markitup.js"></script>
<script src="/js/markitup/sets/default/set.js"></script>
[markitup styles]
<script>
function html_entity_decode(str)
{
var ta=document.createElement("textarea");
ta.innerHTML=str.replace(/</g,"<").replace(/>/g,">");
return ta.value;
}
$(document).ready(function() {
$("#markItUp").markItUp(mySettings);
$(this.target).find('input').autocomplete();
$("input[id^='last_']").autocomplete('/include/suggest.php',{
matchCase:true,
formatItem: function(data, i, total)
{
var s=data[0].split(",")
return s.join(" ");
}
});
$("input[id^='last_']").result(function(event, data, formatted){
var ids=this.id.split('_')
var id=ids[1]; // from last_xx got xxx
var s=html_entity_decode(data[0]).split(",");
$(this).next().focus();
$(this).next().select();
//have only last value -- TAB pressed
if(s.length==1)return;
$('#first_'+id).val(s[0]);
$('#middle_'+id).val(s[1]);
$('#last_'+id).val(s[2]);
});
});
</script>
</head>
<body>
<h1>News Inserter</h1>
<form action="/forms/cronkite.shtml" accept-charset="UTF-8" method="POST">
Reporter (Last, First Middle):<br />
<input type="text" id="last_1" name="lastreporters" size="15" maxlength="30" value="" />, <input type="text" id="first_1" name="firstreporters" size="15" maxlength="30" value="" /><input type="text" id="middle_1" name="middlereporters" size="15" maxlength="30" value="" /><br />
Story:<br />
[markitup text area]
<input type="SUBMIT" value="Insert Data" /><input type="RESET" value="Reset" /><br />
</form>
Is the problem solely in my initialization call? One additional point: the autocomplete version I was using was Autocomplete - jQuery plugin 1.1pre Copyright 2007. Has the jQuery-ui version of autocomplete changed enough that I need to update my forms?
I Have Faced Same Problem Due to Older Version Of Jquery, Then I Have added "http://code.jquery.com/jquery-migrate-1.0.0.js" Js Now All Works Fine.
After digging through tutorials, I see that jquery-ui has changed things quite a bit. Off to the tutorials!
Please see my last post for the answer.
On my website I have an input field. I want to use it that users on my page can "tag" other users to an image (similar to the "person xy is on this picture feature on facebook).
As soon as the person starts typing, I want to display possible values via jQuery autocomplete and as soon as the person selects one possible value, I'd like to have the selected value displayed in a tag. (I speak of the optical representation, for example that the value is underlined with a grey, rounded rectangle, like here on SO).
This is my input field:
<label for="tokenfield">Wer ist auf diesem Bild zu sehen?</label>
<input type="text" class="form-control" id="tokenfield" value="example1, example2" />
Something like this will change the placeholder as you type:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="Bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.placeholderValue').on("keyup", function () {
$('.targetPlaceholder').attr('placeholder', $('.placeholderValue').val());
})
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input type="text" class="placeholderValue form-control" />
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control targetPlaceholder" placeholder="Username" aria-describedby="basic-addon1" />
</div>
</div>
</div>
</div>
</body>
</html>
I asked the question above a few weeks ago, but now realized, that it wasn't so well asked. And after a few days looking around, I found a solution for it.
I now wanted to let you know about my solution, just as a reference or hint for everyone else who finds this question or has the same problem.
So I am now using this library GitHub Tokenfield.
And use it like this:
<label for="tokenfield">Wer ist auf diesem Bild zu sehen?</label>
<input type="text" class="form-control" id="tokenfield" value="red,green,blue" />
the basic JavaScript for initializing the input field is:
$(document).ready(function () {
$('#tokenfield').tokenfield();
})
However, if you want to use jQuery Autocomplete you can do so like this:
$('#tokenfield').tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white']
},
showAutocompleteOnFocus: true,
limit: 1
});
The input field gets initialized as tokenfield, so when entering data and pressing enter, it results in those token-badge-tag things.
After intitialization, it shows 3 tags, "red", "green" and "blue", which the library takes from the "value"-field of the input field.
I like this solution and library very much, because it also offers mechanisms to bind to jQuery Autocomplete via ajax, which is exactly what I wanted and needed.
I hope I was able to help somebody or save some time.
I am trying to follow this tutorial on autocomplete: http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/
I am open to others if anyone has suggestions, but I digress.
I want to type the last name of a guest and get a list displayed below of all the matches. However I get something real screwy where it says "1 result is available, use up and down arrow keys to navigate." and has a tiny dot somewhere in the text I can click which will fill my readonly textboxes. How can I get this to function properly? I honestly don't know where I am going wrong. I will post my html and jQuery. My php obviously works fine so I don't feel it's necessary to post.
<div class="guestinfo">
<p class="ui-widget">
<div><label>Exisiting Guest List</label></br>
<input type="text" name="guests" id="guests"/></div>
<input readonly="readonly" type="text" id="firstname" name="firstname"/>
<input readonly="readonly" type="text" id="lastname" name="lastname"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script>
$(function() {
$('#guests').val("");
$("#guests").autocomplete({
source: "classes/autocomplete_guests.php",
minLength: 2,
select: function(event, ui) {
$('#firstname').val(ui.item.fname);
$('#lastname').val(ui.item.lname);
}
});
});
</script></p>
This is an accessibility feature, you can easily fix this in css, try adding this in your stylesheet:
.ui-helper-hidden-accessible {
display:none;
}