I need to update a html 5 datalist via ajax.
Html code is here.
<body>
<input type="text" id="bar" list="fruit" onkeyup="jsfun()" />
<datalist id="fruit"></datalist>
</body>
A pseudo code of JavaScript.
function jsfun(){
//1- Get the last word from input field ("bar").
var skw1 = document.getElementById("searchBar").value;
var skw2 = skw1.split(" ");
var skw = skw2[skw2.length-1];
//2- Use Ajax to send data on server and get data result back
/*
* here goes other javascript content for ajax
*/
xmlhttp.open("GET","searchopt.php?skw="+skw,true);
xmlhttp.send();
//3- use javascript to update the datalist with those result which Ajax get.
}
see the below url here first write mang then remove it and write bann
it give a suggestion
then remove it and know write mango bann this time it can not give any suggestion.why but the suggestion is prensent in database.it give suggestion only for first word.
http://iws.uphero.com/qwe.html
Ok... here's the issue. Datalist by default matches what is in the text box with the allowed options. The options ARE changing properly via AJAX. What isn't changing is that "mango bann" isn't equal to "mango" OR "bann".
As a workaround, you could use your AJAX function to overwrite the text box once a second word was entered. For example:
var skw1 = document.getElementById("searchBar").value;
var skw2 = skw1.split(" ");
var skw = skw2[skw2.length-1];
document.getElementById("searchBar").value = skw;
Related
How can I automatically fill a textarea field with the text from the database and automatically display the associated text when selecting an item from the dropdown menu.
Textarea field were I want to post the data in:
<textarea
class="dropDown" Name="dropdownItem" Type="Text" id="dropdownItem" placeholder="New Option"
></textarea>
Thats only a quick try that prints out the same input as the dropdownItem from my database.
<script>
var select = document.getElementById('select');
var input = document.getElementById('TextAreaTemplate');
select.onchange = function(){
input.value = select.value;
}
</script>
I already connect to the database, but I just don't know how to do this.
Do I need more JavaScript?
What you are doing here is only putting the value from your input to your textarea.
You need to make a query to your database with the value you get from your input.
I guess your connection is made via PHP (since you put the PHP tag), so I would recommend you to use AJAX request to create your query with the value from your input.
Then, your response should contain the associated text to display in the textarea.
I found this resource which show the basis of AJAX and PHP if you need, but you probably can find better.
I have an Input element in HTML (and a Javascript template) with empty Value. Throught AJAX and JQuery, I update the said value to a list of words split by comma. Each word should become green retangulars with an 'X' to remove it from the field. The same list of words works perfectly when I write it down in the code.
The problem is that when I put this very same string in the Value attrib. using JQuery, it just doesn't work properly. I just get plain text, and those fancy green retangulars only appear when I click inside the input field and hit TAB key. Then They become one item only and when I finally click to remove it, then they got split(!).
I have already tried using fadeOut() and fadeIn() and refresh method. Did not work.
Any ideas about this?
HTML:
<input id="tags_1" type="text" class="tags form-control" value="" />
AJAX/JQUERY:
var tags_x = tags_x.replace(/\,/g, ', ');
var tags_x = tags_x.split(',');
$('#tags_1').val(tags_x);
$('#tags_1').attr('value', tags_x);
$('#tags_1').fadeOut();
$('#tags_1').fadeIn();
Your id of the input is tags_1 but you are selecting it like #tags_1_tag. Why is that? I think maybe that could be the reason.
And by the way when you use var tags_x = tags_x.split(','); tags_x is an array now. If you want to put it in a value convert it to a string and then try to put it in the value attr. You can see an example below:
var new_x = tags_x.join('')
$('#tags_1_tag').val(new_x);
I'm having trouble thinking of a JS function for the following idea. I want to have an array with 5 names. I also want to have a input box with a submit button. When I enter a number (1-5) I want to have it print the name that is assigned with that number from the array. Any ideas?
I have the button/input box setup but I'm not sure how the code would work.
Are you looking for something like this? JSFiddle attached https://jsfiddle.net/kgLnc6nd/
HTML
<input id='i1'/><br>
<button onclick='javascript:show()'>Click</button><br>
<div id='d1'></div>
JAVASCRIPT
var names = ['michael','henry','james','rebecca','allison'];
function show() {
var x = i1.value;
d1.innerHTML = names[x];
}
I know it's simple and there's probably something wrong with my syntax but I just don't understated it. I'm talking about the following:
//declaration of a string
var str_input = "";
//this is supposed to get the new inputs and to store them in str_input
$(document).ready(function(){
str_input = $('input[name=po]').val();
});
//this is on html side, this should make an input field where the user to type in the needed
<input type"text" name = 'po' id="po" value="asd">
That's it, can you help me to sort it out? The problem so far is that str_input is undefined regardless of what is written in the input, though, it saves its initial value.
Your html tag is invalid:
<input type"text" name = 'po' id="po" value="asd">
Should be:
<input type="text" name = 'po' id="po" value="asd">
// ^ Missing this character (=)
Ok, Now I understood, you can do 2 things, first, you can create a button than when the user clicks it calls the function to store the value in the variable like this:
var str_input = "";
//this is supposed to get the new inputs and to store them in str_input
$(document).ready(function(){
$("#MyButton").click(function(){
str_input = $('input[name=po]').val();
})
});
//this is on html side, this should make an input field where the user to type in the needed
<input type"text" name = 'po' id="po" value="asd">
<input type="button" id="MyButton" value="Click Here" />
Or the blur function when the user lose focus of the input text like this:
var str_input = "";
//this is supposed to get the new inputs and to store them in str_input
$(document).ready(function(){
$('input[name=po]').blur(function(){
str_input = $('input[name=po]').val();
})
});
//this is on html side, this should make an input field where the user to type in the needed
<input type"text" name = 'po' id="po" value="asd">
Ok, so here is the solution, though it's a little bit in "from Alf to Alf" style. So, yes, the code I've posted in the main post uses correctly the 'by default' value of the input but the problem comes from that nothing is checking for further changes in the input text field. I'm using $(document).ready... which as far as I know runs during the web project is opened and of course enables the use of some jquery methods within it. There is an interesting function called .change() which actually put the whole thing up for me. Take a glance at the following:
$(document).ready(function(){
$('input[type="text"]').change(function(){
str_input = $('input[name=polynom]').val();;
});
str_input = $('input[name=polynom]').val();
});
The second, third and fourth line make the magic actually, where the code in the .change() method updates str_input on each time a change have appeared in the input box field, whereas the str_input = $('input[name=polynom]').val(); outside of change() takes into account the initial value of the input. That's it... I knew I was forgetting something and yeah...
P.S. Another approach is to use a function and a button (a.k.a. an event-triggered function) which to 'update' the str_input on event. For this way check the post bellow this one.
I'm trying to create a gym membership database and it needs to store pictures taken with the webcam of the customer. I have the cam working and once you take the picture you can use the below code to 'echo' the url of the file.
The below code loads a URL:
<script type="text/javascript">
function getSnap(linky){
alert(linky);
}
</script>
My question is how can I get it so the above code is automatically populated into a text field?
Any help would be appreciated :)
You would need to select the input field by either id or class and set the value to the returned URL. In the below case, we use ID, so it would be whatever is the ID tag of the input is.
<script type="text/javascript">
function getSnap(linky){
var elem = document.getElementById("myInput");
elem.value = linky;
}
</script>
<input id="myInput" />
Say you have a input called #example, you then place this instead of the alert
var example = document.getElementById('example');
example.value = linky; // set the value of an input
example.src = linky; // set the source of an image
example.innerHTML = linky; // Set as content of a div/block-element
example.href= linky; // set target for a anchor
Give your text field an ID (ex URL) and use document.getElementById('URL').value = linky;