I have a a script that provides suggestions for an input field based on a user typing a character in the input field. It uses a function to make suggestions in a comma delimited using this html:
<body>
<form>
First name:
<input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
Now I want to use a drop down box instead of a suggestion string. I think I need to put the input field and the selectable options in a div, but I can't figure out how to get a option into the input field after it's been selected. How do I do that?
You could get value attribute (or text node) of the selected option and populate it to input box.
$(<input>).value(
originalValue +", " + $(<select>).val()
);
JQuery Autocomplete as #DemianBrecht suggested would be the other way to go, if you are looking to create more feature-complete interface.
Related
i have 2 input of type text (Id and name). I want to search id in my database and find name related to this id and set it in input of name and also disable this input. For this mean i write a function(with java language) that get name related to id input. But i test it with a submit button that is not what i want.1) I want to call function when id input is fill
2)also the name input disable option set to true, when id input is empty it change to false
This is my jsp code:
<input type="text" id="id">
<input type="text" id="name">
<input type="submit" formaction="myFunc">
You should use onChange event, that is described here: https://www.w3schools.com/jsref/event_onchange.asp
As #Marek said, use the onchange event to call a JavaScript function. Then see this post for how to disable an input with JavaScript:
How to disable an input type=text?
Is it possible to add the value of a checkbox if checked into a text field?
I have this form...
http://xotio.com/photos/download/turk.html
I'm trying to add the value of a checkbox into a textbox if the checkbox has been clicked.
In my form there is one text box and three checkboxes per image (one of the checkboxes opens up more checkbox options and i'm not concerned about those color choices as much). I'm trying to add the 'value' of the three main checkboxes into the text field above. Is that possible?
the values of the checkboxes i would like are the ' lost' and ' none' and ' blurry' options and add their values to the textbox above if they get checked.
In the end I'm trying to use parsley to validate each of the textboxes for data before it submits my form. There are occasionally instances when no data is entered in the textbox, but the user has checked the right boxes and I want it to validate and can't come up with any ideas except this... any help or ideas would be great. thanks in advance and sorry for the long winded complex question.
I give you an example for your reference:
<html>
<body>
<input type="checkbox" value="lost" onclick="sendValueToTextBox(this)">lost
<br>
<input type="checkbox" value="none" onclick="sendValueToTextBox(this)">none
<br>
<input type="checkbox" value="blurry" onclick="sendValueToTextBox(this)">blurry
<br>
<input type="text" id="fg">
<script language=javascript>
function sendValueToTextBox(checkbox) {
var textbox=document.getElementById("fg");
if (checkbox.checked)
textbox.value=checkbox.value;
else
textbox.value="";
}
</script>
</body>
</html>
I have MySQL table templates, which looks like:
template_id|template_subject|template_text
------------------------------------------
1 |some subject |very long text with html
These are displayed in <select> dropdown and complete form looks like:
<form method="post" action="">
<select name="template_id"><option></option><option value="1">some subject</option></select>
<input type="text" name="template_subject">
<textarea name="template_text"></textarea>
<input type="submit" name="submit_me" value="go">
</form>
When user submits form, I need to get all 3 values - id, subject, and text. Furthermore, when user selects an option I need to auto populate <input type="text" name="template_subject"> field with some subject and populate <textarea name="template_text"></textarea> with very long text with html
Found many examples on this site how to populate input field with option text, and textarea with option value, but here's the problem: formatting dropdown as <select name="template_id"><option></option><option value="very long text with html">some subject</option></select> won't work, because template_id value would be missing, and writing very long text with html as option's value would be a very bad practice, I believe.
Looking at example,s I create a JSfiddle which seems to work partially, but once again, I don't think it's a good idea to write a long text (especially with HTML into option's value) - https://jsfiddle.net/ss050535/
How should I proceed? Using jquery, bootstrap and select2 if that matters.
I am working with MachForm and in it when using pricing features it adds this to an li tag:
<li id="li_273" data-pricefield="text" data-pricevalue="8.48" >
The form also has this field as well:
<input type="text" class="element text medium" id="element_273" name="element_273" size="30" value="" />
Now what happens is, the form has been converted to an ajax auto complete which is fine and works. But the problem is that the first reference:
<li id="li_273" data-pricefield="text" data-pricevalue="8.48" >
Isn't going to be the right price for the item selected. So what I need is to be able to re-write that data-pricevalue based on an onclick function. In the autocomplete you are able to execute an onclick javascript command like so:
'onclick' => 'alert(\'You clicked on the '.$name.' fruit!\');',
Now I have the rest of the javascript that should allow me to take the data-pricevalue from the id (ex: id="li_273") and then multiple it by the value entered into the text box. The ultimate goal is to get data-pricevalue * input text to update the on-screen total value. But I am not sure how to get that data-pricevalue to re-write the proper price.
I have this code
<input type="hidden" value="[{"value":1,"label":"Emmoia Boently"},{"value":6,"label":"John Smith"}]" name="group[users][]" id="users">
<input type="text" value="Emmoia--Boently, John--Smith, " name="autocompleter_group[users][]" id="autocompleter_userss" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
Now my problem is the current javascript is adding the values from textbox to the hidden feilds.
But when i delete the text then it don't deletes from the hidden input fields.
So i want to do in jquery that when i start deleting the text in main textbox then the value gets deleted in the hidden input field as well.
just like we do in SO when we delete the tag characters in ask question page
$("#autocompleter_userss").on("keyup", function() {
$("#users").val($(this).val());
});
Fiddle
UPDATE: Seems like you're looking for a tag editor. See this post for exhaustive links :)
$('input#1').change(function(){
$('input#hidden').val($(this).val());
});
Additionally, you could try some data-binidng libaries like knockout.js among others.