Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have tried to search for an answer, but I don't know the exact terms to use.
I'm sorry if this has been asked (a lot) before.
I have an HTML/PHP form where the user needs to enter a client name via dropdown field.
What I want to do with this field is limit the selection while the user is typing. Say I want to input the name John Smith, wich is shown as "Smith, john", I want the user to be able to start typing the last name and the form 'automatically' select the name closest to what has been typed already.
So in this example I would type in "Smit" and the dropdown list is limited to all names that start with 'Smit'.
I know HTML and PHP, but Java/jQuery/AJAX/etc are new for me and I really don't know where/how to start ;-)
Can anyone point me in the right direction?
Edit:
I have tried the javascript autocomplete function. The examples given seem to work quite well, although it now presents an ugly list of words that match.
What I'm still not sure about is how to get a PHP array in there. I have tried to do what void suggests, but to no avail. Here's the code I have now:
<script>
var client= $.parseJSON('<?php echo json_encode($clname); ?>);
$(function(){
$( "#tags" ).autocomplete({
source: client
});
});
</script>
Where $clname is an array of 'lastname, firstname' entries from my client table.
Use autocomplete provided by jQuery UI
I am assuming you have an Array of names in PHP then you can do it this way
<script>
var username= $.parseJSON('<?php echo json_encode($username); ?>'); // Convert PHP Array to JS Array
// DOM Ready
$(function() {
$( "#tags" ).autocomplete({
source: username
});
});
</script>
Or you can also make an AJAX call to fetch array from PHP.
Dont forget to include jquery-ui.js
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I am new to Javascript.So please excuse me if I am asking anything silly. I have a sample Shiny application Statistics Dashboard which can be used to find some basic statistical measures such as Mean, Median etc. for any metric. Users have to upload a csv file based on which the dashboard selects all the numeric variables within the file and provides an option to select any numeric variable to analyze as a dropdown. I want to add a javascript code in the application which will capture the updated measures (e.g. mean) after a user has selected a particular dimension from the dropdown. For example, suppose the default selected dimension in the dropdown window is "sales" and the corresponding mean is 325. If I select another dimension (suppose) "profit" then the mean changes to 37. Now I want to add a javascript/jquery code which will capture the mean value of 37 when I select "profit" (from "sales") from the dropdown. I have tried the .change event to check for the change in the dropdown selection and when there is a change, capture the mean value inside the h3 tag. However, I am getting the previous mean value instead of the updated one i.e. I am getting 325 instead of 37 when I select "profit" (from "sales"). Hope I am clear on this.
Am I using the wrong event? How can I capture anything after a certain action occurs and the values are updated?
Feel free to let me know if you need any more details on my query. Looking forward to the help from the community.
I think this is Exactly what you are looking for
Here is a code which will detect any changes in a certain element.
HTML:
<input type="text" id="Profit"></input>
<h3 id="MeanLabel">100</h3>
Javascript/Jquery:
$(document).ready(function() {
$("#Profit").on("change", function()
{
$("#MeanLabel").text(this.value);
});
initialValue = $("#MeanLabel").text();
CheckChanges();
})
function CheckChanges()
{
if($("#MeanLabel").text() != initialValue)
{
//The Label Changes!
initialValue = $("#MeanLabel").text();
alert("New Label is: " + initialValue)
}
setTimeout(CheckChanges, 200)
}
This is the working sample.
https://jsfiddle.net/h68nxu4h/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have got the following code:
<form method='POST' onsubmit='javascript:searchAndUpdateGrid(GET_THE_VALUE_OF_INPUT);return false;'
<input type="text" id="inputField" class="form-control" placeholder="Type something...">
</form>
I want to launch the function searchAndUpdateGrid with the value entered by the user in the input field. How can I do that ? (I would like to avoid to get it from Javascript)
Thanks !
Take it easy. You must write some javascript code for onkeyup event to doing that.
$(document).on('keyup','#inputField',function(){
searchAndUpdateGrid();
});
function searchAndUpdateGrid(){
var inputtxt = $('#inputField').val();
$.post('file.php',{text:inputtxt},function(data){
//type statement for after success the server request.
//Example you must put the result of destination file in to the
//HTML div that we assume it's id 'preview' then
//you should be type that code
$('#preview').append(data);
});
}
It will working fine.....
This is Jquery AJAX post method. But you can use GET method. If you using get method then you should change $.post to $.get. Another problum is what is inside the curly brackets?This is the parameter of you hoping to send textbox values to destination php or asp file.It might send your textbox values as text parameter.
$("#inputField").val() would give you the value of the input (with the help of jQuery). You are using javascript and looking for a javascript function - so there is no way to not get it from javascript. alternatively you can use PHP and get the value from the file that gets the form (the one specified in the 'action' attribute) with $_POST['inputName']
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I don't understand how to make and use forms. Can someone give me and example using external java script where there is an input text and a submit button and when it gets click it does a java script function. I also have some questions. If i'm not using a form to change pages do i need a method. What do i put for the action attribute. Are forms the best way to get input text data to java script. And why should i use a form and not just input tags.
Thanks.
No, you don't need a form to collect user input form fields.
Here is a really simple friendly example using MagJS:
HTML:
<div id="hello">
<label>Name:</label>
<input name="hello" placeholder="Enter a name here" />
<hr/>
<h1>Hello <name/></h1>
</div>
JS:
mag.module("hello", {
view: function(state) {
state.input = {
_oninput: function() {
state.name = this.value
}
}
}
})
Here is a link to the working example: http://jsbin.com/fivaqoliqe/1/edit?html,js,output
Hope that helps!
The short of it is that W3Schools lets you play around but they are scarce on explanation so I suggest you check out this resource instead (which also has a demo of a form): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
The action attribute is where it should go after it is done to further process the form (typically a route or backend server is where you will go after). Given what you have been talking about however, you only have one field and one button, so you should look into the onclick attribute and then look up the input field and read the value. You use a form when you have a lot of inputs that are related and should be sent at once. There's a lot out there though as this is very basic but if you have any questions just ask.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm making a site that lets people login, buy stuff from the store, etc, I am trying to make it where moderators can change and update their credits by clicking a link and make a popup alert box thing pop up saying to type in how many credits to give them in the popup box, then click "Ok" and update the mysql table with the new amount, how can I do this?
In order to create the popup effect that you wanted you could use prompt() which is described here.
Using:
function giveCredits(user) {
var amount = prompt('Please enter the amount of creidts you wish to give to ' + user,100);
SQLCreditfunction(user,amount);
}
You should be able to create the desired effect. SQLCreditfunction will be a function to insert the value into the database.
For this you have to use JavaScript's prompt function which provides a text box to enter value after getting the value from the user you can make an ajax request to sever to update the new amount in the database.
Something like this:-
First add jQuery file in your page.
Click here to update amount
<script>
function updateAmount(itemId){
amount = prompt('Enter new amount', 0);
$.ajax({
url: updateAmount.php,
data: {"amount": amount, "id": itemId},
success: function(data){
alert("Amount updated successfully.");
}
});
}
</script>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have a login form and when I login with admin account I want to put Home page editable. Home page have DIVs.
$sql = mysql_query("SELECT * FROM `test` WHERE `username` = '$username' AND `password` = '$password'");
if (mysql_num_rows($sql) > 0)
{
echo ("<SCRIPT LANGUAGE='JavaScript'>
window.alert('Welcome!')
window.location.href='Home.html'
</SCRIPT>");
}
Ok this code is working and I can login successfully but now I want to open Home page but editable and save online.
Too much to cover in one question ... you should read a little further about the subject since there are several ways to do it.
One thing is how you will edit the content ... you can use html5 content editable or some more elaborated solution like a WYSIWYG Editor (what you see is what you get) like CKeditor ... google about it and you will find lots of editors.
Another thing is how you will send the data to the server ... you can use a simple form, ajax, sockets ... as you see it is also a complex thing, but you can start with a jquery load since it's very simple to implement.
Lastly, how you will save the data ... I'm guessing you will use your SQL DB. How you will handle the data in the server is another deep subject. Worry about caching results and queries from the beginning will save you from a lot of trouble later.
Hope this info will help you start building your solution!
You can use the HTML5 attribute contentEditable which is supported by all modern browsers.
<div id="editme">
xyz
xyz
xyz
</div>
<?php
if(is_admin())
{
?>
<div id="edit"></div>
<div id="save"></div>
<script>
$(function(ev){
ev.preventDefault();
$("#edit").on('click', function(){
$("#editme").prop('contentEditable', TRUE);
});
$("#save").on('click', function(){
var url = "insert.php";
var data = $("#editme").html();
$.post(url, data);
});
})
</script>
<?php } ?>