Customize html datalist dropdown - javascript

I want to customize the way datalist drop down shows. I have the following datalist right now
<input type="text" id="employee" list="employee">
<datalist id="employee">
<option value="John Doe">John Doe (ID: 1)</option>
<option value="Jane Doe">Jane Doe (ID: 2)</option>
<option value="John Jane">John Jane (ID: 3)</option>
</datalist>
When I type on the input box, I see the output like this
But my requirement is to make it look like below and
When the drop down is selected, only the name should be selected (without the id). Something like this:
How can I do this? Basically I want to show more details in the dropdown but select only the Name and not the Id for submitting the form. Also, I dont want 2 columns (darker and lighter) in the dropdown. I just want the value with more information.
Here is the JSFiddle which I used for this question.
P.S. - I am generating this datalist dynamically from Ajax Call based on the user input in text field. Also, I cannot use jquery to manipulate anything. It has to be native javascript.

The second column is appearing because you are putting content between the opening and closing tags. Change:
<option value="John Doe">John Doe (ID: 1)</option>
to:
<option value="John Doe"></option>
to remove the second column.
This can be done on receiving the data via the AJAX call, simply, create the option in JavaScript:
var option = document.createElement("option");
option.value = name + " (ID: " + id + ")";
document.getElementById("my-datalist").appendChild(option);
The above code will make one column, however, it contains the ID in the value field. You would have to remove that before submitting if you didn't want it submitted with the form. Or you can have two columns one for the name (value attribute) and one for the ID (text content).
For more information, refer to this link.

Related

click specific option using javascript or jquery

I tried googling this but I am getting only on event trigger searches instead of what I am looking for.
I want to dynamically click on any of the options in the select dropdown by using the value or the text if possible.
HTML
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
I am not sure if I need to use something with $("#certainspamselectid").click..... but I am not sure what to use after click. I would have tried more things but my google searches keep pinpointing me for on event triggers when I just want to click on one of these options using either JS or jQuery.
I have read your problem and honestly, I can't understand what you want exactly.
However, it looks like you want to select some certain option of the select dropdown.
If that's right, you don't need to call some kind of click function.
You can do it easily with jQuery.
For example, imagine that you are going to select third option - "moved to junk email folder". Then you can select it by code like below.
$("#certainspamselectid").val(1);
If my answer is not enough for you, let me know detail of your problem.
With <select> what you need is .change instead of .click
Here is a quick example .. change the $value and check again
$("#certainspamselectid").on('change' , function(){
console.log("Value Changed To: "+$(this).val());
if($(this).val() == 5){
console.log("value 5 is selected");
}
});
let $value = 4;
$("#certainspamselectid").val($value).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
why don't you simply change the value of the select like this
$("#certainspamselectid").val(4)
It will automatically show the text from the selected option
I don't think that clicking on an option would help you

jQuery Fetch/Display data to dropdown when an id or data is selected on edit

I'm trying to fetch the data into my dropdown when I edit an id or data, right now the value that is being fetched is null or none of the options that I have in my dropdown. Kindly help on how can I fetch the data using jquery / javascript.
So my final output should be, when I choose an ID, the value of the dropdown should be displayed
here is my html code below, I have the dropdown input
<select id="position" name="position" class="form-control">
<option>Select Role</option>
<option value="Admin" data-id="1">Admin</option>
<option value="Staff" data-id="2">Staff</option>
</select>
here is my script code below,which I use to choose an id to edit or view
variable I declare
var position = $('input[name=position]');
my ajax code
success: function(data){
$('input[name=position]').val(data.position); // here is the value from the dropdown
}
You aren't selecting the <select> element, your selector should be
$('select[name=position]').val(data.position);
Your original selector was looking for an <input> tag, while you might consider a <select> as an input control the selectors operate on the tag name which is select

jquery not changing value of text input

I'm trying to create a "How did you find us form element" and I'm having some jQuery trouble. The user selects from a list of options, one of which is "other". When selected other a text box that allows them to be more specific. In an effort to make this more user friendly that input is hidden when another option is displayed. I've got the jQuery working to show and hide the text input as the user changes the option but I would like it to clear any text in the text box in the event the user selects other, fills something in, then selects another option.
<label for="pcFindUs">How did you hear about us?</label>
<select name="pcFindUs" id="pcFindUs" onChange="getval();">
<option value="No Answer">Select One</option>
<option value="Internet Search">Internet search</option>
<option value="Internet Advertisement">Internet ad</option>
<option value="Soclail Media">Social media </option>
<option value="Unknown">I don't remember</option>
<option value="other">Other</option>
</select><br/>
<div id="pcHiddenOtherSpecify" style="display:none;">
<label for="pcFindUsSpecify">(Please Specify): </label><input type="text" value="" id="pcFindUsSpecify" name="pcFindUsSpecify" maxlength="50">
</div>
<script>
function getval(){
var values = $('#pcFindUs :selected').val();
if (values == "other"){
$("#pcHiddenOtherSpecify").css("display","block");
}else{
$("#pcHiddenOtherSpecify").attr("value","");
$("#pcHiddenOtherSpecify").css("display","none");
}
}
</script>
The pcHiddenOtherSpecify div containing the additional input appears and disappears just fine, but the value of #pcHiddenOtherSpecify still has whatever the user entered.
I've also tried
$("#pcHiddenOtherSpecify").val("");
With no luck. Any ideas what I may be doing wrong here?
You are trying to change the value of a div element, not an input. Try this:
$("#pcFindUsSpecify").val("");
Wrong ID
$("#pcFindUsSpecify").val("");
try
$("#pcFindUsSpecify").val("");
check it out
http://codepen.io/JcBurleson/pen/MKBBWq

<select> tag posting all data when style="display:none;"

I have main categories and Sub categories of products when I select any main category it shows related sub-categories. But When I post the form it posts last sub-category value instead of selected sub-category value.
JavaScript Code
$(function() {
$('#category').change(function(){
$('.sub-category').hide();
$('#' + $(this).val()).show();
});
});
HTML code
<Select id="category" name="product_category">
<option value="eco">Main Category 1</option>
<option value="organic">Main Category 2</option>
</Select>
<Select name="product_sub" id="eco" class="sub-category">
<option value="eco1">Sub Category 1</option>
<option value="eco2">Sub Category 2</option>
</Select>
<Select id="organic" name="product_sub" class="sub-category" style="display:none;width:270px;">
<option value="organic1">Sub Category 3</option>
<option value="organic2">Sub Category 4</option>
</Select>
For Example: When I am selecting sub category 1 , its posting value of sub category 3
All successful form fields are submitted to the server. CSS display does not impact whether or not a form field is considered successful. The HTML spec defines what makes a control successful.
A successful control is "valid" for submission. Every successful
control has its control name paired with its current value as part of
the submitted form data set. A successful control must be defined
within a FORM element and must have a control name.
However:
Controls that are disabled cannot be successful.
If a form contains more than one submit button, only the activated submit button is successful.
All "on" checkboxes may be successful.
For radio buttons that share the same value of the name attribute, only the "on" radio button may be successful.
For menus, the control name is provided by a SELECT element and values are provided by OPTION elements. Only selected options may be
successful. When no options are selected, the control is not
successful and neither the name nor any values are submitted to the
server when the form is submitted.
The current value of a file select is a list of one or more file names. Upon submission of the form, the contents of each file are
submitted with the rest of the form data. The file contents are
packaged according to the form's content type.
The current value of an object control is determined by the object's implementation.
If a control doesn't have a current value when the form is submitted,
user agents are not required to treat it as a successful control.
Furthermore, user agents should not consider the following controls
successful:
Reset buttons.
OBJECT elements whose declare attribute has been set.
Hidden controls and controls that are not rendered because of style
sheet settings may still be successful.
Disable the form fields you do not want submitted.
$('#category').change(function(){
$('.sub-category').hide().prop('disabled', true);
$('#' + $(this).val()).show().prop('disabled', false);
});

Creating multiple groups dynamically

On the form, a customer can create multiple groups. Every group has the same input fields. If customer clicks on '+ Additional Group' then an additional group will be created dynamically via jQuery (The html is downloaded via an AJAX call).
Below is the sample html. Each ul tag is a group. In the group ul, each input field includes a group number field. Like this: foo_1, foo_2
current_group is a hidden field which keeps track of the total number of groups.
If add_group button has been clicked, jQuery will get the total number of groups from current_group and then additional group dynamically.
Is this how it should be done?
Also if a customer click on Submit button when they have finish Form - it may return back to same page because of Error Validation via PHP. I don't want to loose dynamic html groups again. How can this be solved?
<h2> Group One </h2>
<ul class="Form">
<li>
<label>Foo</label>
<select name='foo_1'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</li>
<li>
<label>Bar</label>
<select name='bar_1'>
<option value='car'>Car</option>
<option value='bike'>Bike</option>
<option value='van'>Van</option>
</select>
</li>
<ul>
<h2> Group Two </h2>
<ul class="Form">
<li>
<label>Foo</label>
<select name='foo_2'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</li>
<li>
<label>Bar</label>
<select name='bar_2'>
<option value='car'>Car</option>
<option value='bike'>Bike</option>
<option value='van'>Van</option>
</select>
</li>
<ul>
<input type='hidden' id='current_group' value='2' />
<input type='button' id='add_group' value='+ Additional Group' />
Well if the first set of HTML elements is there already, you can always use jQuery's clone() to copy the elements instead of calling the server. You would need to find the elements and replace the names like you talked about.
jQuery(".Form").clone().find("select").eq(0).prop("name", "foo_" + count).end().eq(1).prop("name", "bar_" + count).end().end().appendTo("#someElem");
In a more readable format
var count = 1;
function addRow(){
count++;
var newFormElems = jQuery(".Form").clone(); //clone the form
var selects = newFormElems.find("select"); //find the selects
selects.eq(0).prop("name", "foo_" + count); //rename first
selects.eq(1).prop("name", "bar_" + count); //rename second
newFormElems.appendTo("#someElem"); //add to the page
}
Another way to redo the naming function which it increments the number:
newFormElems.find("select").each(
function(){
this.name = this.name.replace(/^([^_]+_)(\d+)/, function(match,str,num){ return str + (parseInt(num,10)+1)});
}
);
And what is the best way to deal with the dynamic forms? Well you can submit the data with Ajax or you have the php code write out form after the validation.
There are several way to do one thing. This is your logic. It should work if no mistakes made.
Whenever you are fetching displaying the new group keep a hidden field named group_ids[]
You will receive all the group ids in an array. You can access that array from $_REQUEST['group_ids'] (you can use $_POST or $_GET according to your code)
Now whenever you submit the page check what group ids are submitted by user. You can receive the drop down values also. If you need to display those groups again you can get it from database using $_REQUEST['group_ids'] and keep the correct option selected by comparing the current value from the user selected value.

Categories

Resources