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
Simple JS fiddle containing my code in working state
I have a jQuery UI Autocomplete field, with a Dropdown button attached. It works floorlessly, however - its kinda annoying you have to manually delete the words inside the field for a search.
I am unsure if jQuery UI has a feature for it, unless i'd love to know.
I've tried to use onClick functions with JS, however since my field is not exactly an "form field" I've got kinda lost here.
My goal is to: reset the text field when a user presses it.It has prewritten text in it "Please select (Or Type)"
my cshtml file looks as following
cshtml
And it looks like this on the browser browser
Code for Image 1:
<select asp-for="Dinosaur" class="combobox" id="dinoType" asp-items="Html.GetEnumSelectList<Dinosaurs>()">
<option selected="selected" type="text" onclick="resetText()" value="0">Please select (Or Type)</option>
</select>
<span asp-validation-for="Dinosaur" class="text-dark" />
As you can see it has the text in, which i have to CTRL + A, DELETE before i can search in my field.
A function to clear this text when a user presses it will easen the pressure.
I might just be stupid to see the simple solution, i just feel like I've tried some of the things that I'd believe would work. (As the onclick="ResetText()" with a JS code attached to it)
When I click on drop down this is what showing.
Best Regards,
You don't want to wire an onclick listener on your option element, you want an onchange event listener on your select element. onclick is not supported on option elements.
use onchange instead of using onclick and this action should be on the select tag. not on the options. Try this example.
$('select').on('change', function() {
if (this.value === 'disabled') {
this.value = '';
}
console.log(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select asp-for="Dinosaur" class="combobox" id="dinoType" asp-items="Html.GetEnumSelectList<Dinosaurs>()">
<option selected="selected" type="text" value="disabled">Please select (Or Type)</option>
<option type="text" value="One">One</option>
<option type="text" value="two">two</option>
</select>
<span asp-validation-for="Dinosaur" class="text-dark" />
I have a form on my page that uses multiselect. Here is the relevant part of the form
<select required id="reqs2" name="reqs2[]" multiple="multiple" class="form-control">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>
and at the bottom of the page I have
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#reqs2').multiselect();
});
</script>
It all works fine if the user makes at least one selection, but if they don't make a selection, the form doesn't submit and no validation error message is displayed. Validation messages show for other required input fields, but not this one.
Any ideas what changes I need to make?
Thanks in advance
Thanks for your help, but I managed to solve it by removing the "required" element from the field on the form and adding a line to my php file as follows
Instead of
$try2 = implode(', ', $_POST['reqs']);
I add this before so it now becomes
if(isset($_POST['reqs']))
$try2 = implode(', ', $_POST['reqs']);
Now client can skip the field without an error showing
This seems to check if there is an entry in the field - if there is it implodes it; if not, it ignores it.
I'm trying to add a HTML link to an input box using the following jQuery:
var E = "<a class='tagged_person' contenteditable='false' href='http://www.google.com'>Click This</a>";
$("input[name='newComment']").val(E);
Which is working, but its literally displaying the <a href..., which is what I wanted backend wise, but on the frontend, I'd like the user to see it as rendered as a HTML <a> link. Just like on Facebook/Twitter you can tag users and then there's a link.
I think you're looking for the JQuery method .append. That lets you pass a string of HTML and have it parsed into the DOM. Check it out here
For example:
$('#myDiv').append('Search for it!');
There's also .appendTo() if it suits your aesthetic better.
Edit: If you're trying to literally stick html as the value of a text input, you can't do that. <input type="text"> carry text, and that's it. You'd have to make your own input form, or use a JQuery plugin. Why would you want to have a link in a form input anyway though? Sure, you could have the user redirected when clicking the form through different event handlers, but input is for inputting. If it redirects, then you didn't really want an input in the first place.
You can use the following code, which when select it will open the link in a new window.
<form action="../">
<select name="myDestination">
<option value="http://www.website1.com/">Website 1</option>
<option value="http://www.google.com/">GOOGLE</option>
</select>
<input type="button"
value="Open in New Window!"
onclick="ob=this.form.myDestination;window.open(ob.options[ob.selectedIndex].value)">
</form>
Or without the need to press a button:
<form action="../">
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="">Choose a destination...</option>
<option value="http://www.website1.com/">Website 1</option>
<option value="http://www.google.com/">GOOGLE</option>
</select>
</form>
Also created a jsfiddle to demonstrate: jsFiddle
I have a select form field that I want to mark as "readonly", as in the user cannot modify the value, but the value is still submitted with the form. Using the disabled attribute prevents the user from changing the value, but does not submit the value with the form.
The readonly attribute is only available for input and textarea fields, but that's basically what I want. Is there any way to get that working?
Two possibilities I'm considering include:
Instead of disabling the select, disable all of the options and use CSS to gray out the select so it looks like its disabled.
Add a click event handler to the submit button so that it enables all of the disabled dropdown menus before submitting the form.
Disable the fields and then enable them before the form is submitted:
jQuery code:
jQuery(function ($) {
$('form').bind('submit', function () {
$(this).find(':input').prop('disabled', false);
});
});
<select disabled="disabled">
....
</select>
<input type="hidden" name="select_name" value="selected value" />
Where select_name is the name that you would normally give the <select>.
Another option.
<select name="myselect" disabled="disabled">
<option value="myselectedvalue" selected="selected">My Value</option>
....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />
Now with this one, I have noticed that depending on what webserver you are using, you may have to put the hidden input either before, or after the <select>.
If my memory serves me correctly, with IIS, you put it before, with Apache you put it after. As always, testing is key.
I`ve been looking for a solution for this, and since i didnt find a solution in this thread i did my own.
// With jQuery
$('#selectbox').focus(function(e) {
$(this).blur();
});
Simple, you just blur the field when you focus on it, something like disabling it, but you actually send its data.
I faced a slightly different scenario, in which I only wanted to not allow the user to change the selected value based on an earlier selectbox. What I ended up doing was just disabling all the other non-selected options in the selectbox using
$('#toSelect').find(':not(:selected)').prop('disabled',true);
it dows not work with the :input selector for select fields, use this:
jQuery(function() {
jQuery('form').bind('submit', function() {
jQuery(this).find(':disabled').removeAttr('disabled');
});
});
Same solution suggested by Tres without using jQuery
<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">
<select id="mysel" disabled="disabled">....</select>
<input name="submit" id="submit" type="submit" value="SEND FORM">
</form>
This might help someone understand more, but obviously is less flexible than the jQuery one.
The easiest way i found was to create a tiny javascript function tied to your form :
function enablePath() {
document.getElementById('select_name').disabled= "";
}
and you call it in your form here :
<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">
Or you can call it in the function you use to check your form :)
I use next code for disable options in selections
<select class="sel big" id="form_code" name="code" readonly="readonly">
<option value="user_played_game" selected="true">1 Game</option>
<option value="coins" disabled="">2 Object</option>
<option value="event" disabled="">3 Object</option>
<option value="level" disabled="">4 Object</option>
<option value="game" disabled="">5 Object</option>
</select>
// Disable selection for options
$('select option:not(:selected)').each(function(){
$(this).attr('disabled', 'disabled');
});
Just add a line before submit.
$("#XYZ").removeAttr("disabled");
Or use some JavaScript to change the name of the select and set it to disabled. This way the select is still submitted, but using a name you aren't checking.
I whipped up a quick (Jquery only) plugin, that saves the value in a data field while an input is disabled.
This just means as long as the field is being disabled programmaticly through jquery using .prop() or .attr()... then accessing the value by .val(), .serialize() or .serializeArra() will always return the value even if disabled :)
Shameless plug: https://github.com/Jezternz/jq-disabled-inputs
Based on the solution of the Jordan, I created a function that automatically creates a hidden input with the same name and same value of the select you want to become invalid. The first parameter can be an id or a jquery element; the second is a Boolean optional parameter where "true" disables and "false" enables the input. If omitted, the second parameter switches the select between "enabled" and "disabled".
function changeSelectUserManipulation(obj, disable){
var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
disable = disable? !!disable : !$obj.is(':disabled');
if(disable){
$obj.prop('disabled', true)
.after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
}else{
$obj.prop('disabled', false)
.next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
}
}
changeSelectUserManipulation("select_id");
I found a workable solution: remove all the elements except the selected one. You can then change the style to something that looks disabled as well.
Using jQuery:
jQuery(function($) {
$('form').submit(function(){
$('select option:not(:selected)', this).remove();
});
});
<select id="example">
<option value="">please select</option>
<option value="0" >one</option>
<option value="1">two</option>
</select>
if (condition){
//you can't select
$("#example").find("option").css("display","none");
}else{
//you can select
$("#example").find("option").css("display","block");
}
Another option is to use the readonly attribute.
<select readonly="readonly">
....
</select>
With readonly the value is still submitted, the input field is grayed out and the user cannot edit it.
Edit:
Quoted from http://www.w3.org/TR/html401/interact/forms.html#adef-readonly:
Read-only elements receive focus but cannot be modified by the user.
Read-only elements are included in tabbing navigation.
Read-only elements may be successful.
When it says the element may be succesful, it means it may be submitted, as stated here: http://www.w3.org/TR/html401/interact/forms.html#successful-controls