Drop-down auto selection disabling - javascript

I have a form where I select a value in drop-down and submit it but when I try to access that form the value in the drop-down still remains selected, I want to deselect it on every new launch.

You can use the following to set the value of the dropdown to what you want.
document.querySelector('#idOfDropdown').value = desired_value;
// desired_value is the 'value' property of the option you want selected.
If the default option is written as
<option value=''>--select--</option>
...then, use this:
document.querySelector('#idOfDropdown').value = '';
I'm assuming that this line will be best placed at the end of the function that gets called when you submit the Form.

Related

Trying to navigate to page location when selecting option from select options dropdown

so I have a select box like this with more elements being loaded in of course.
<select class="cherry-dropdown">
<option class="cherryOption" value="#cherry_'.$rownum.'">'.$name.'</option>
</select>
And. I'm trying to use javascript to take me to the appropriate page location based off the value attribute in the option.
$('.cherry-dropdown').click(function(){
console.log("yes");
$('.cherryOption').click(function(){
console.log("maybe");
window.location=$(this).val();
});
});
I'm getting yes from the first console.log (opening the select box to reveal the options). But when I click an option I'm not getting the maybe console.log, and thus the window.location part isn't working as well.
What am I doing wrong here...
You only actually need one event listener here, if you target the select menu itself (.cherry-dropdown) and listen for a change event instead of click, and then by passing the event as a argument to access it's value.
$(".cherry-dropdown").change(function (e) {
console.log(e.target.value); //Returns the selected options value
window.location = $(this).val();
});

submit disabled dropdown mvc c#

I want to submit a dropdown value disabled:
View:
#Html.DropDownFor(model => model.Type_Id, Model.TypeDropDown)
#Html.HiddenFor(m => m.Type_Id)
Javascript:
$("#Type_Id").val("67").change();
document.getElementById("Type_Id").disabled = true;
$('#Type_Id').val(67);
But my value dont passed to c# controller.
Once you disable a dropdown it wont submit it's value, so you need to Store your value.
See : Disable Dropdown
use a hiddenfor with nameparameter to store the value.
use hidden field to store the value of the disabled dropdown . In your code you have to manually set the value of the hidden field which is inside the same form before posting it to controller like below . You have to add the "Type_id_hidden" property in your model to access the value in controller.
#Html.Hidden("Type_id_hidden") .
But in your code you used the same id both hidden field and dropdown. set the hidden field before posting to controller
var selectedVal = $("#Type_Id").val();
$("#Type_id_hidden").val(selectedVal);
Use an additional hidden field with the same value as drop-down to submit the value and let the dropdown just for showing the value.
You cannot submit the value of a disabled field.

How to post input fields conditionally

I have an MVC (Razor) web app. The form has 2 fields, one dropdown box (Kendo) and one input field for a date.
After the user makes a change on the dropdown, my 2nd input field is enabled or disabled based on the chosen type in the dropdown box. When the input field is disabled I fill the input with a default value.
When the user submits the form, I only get 2nd form field value posted in the viewmodel when the 2nd field is enabled, when disabled the value is not posted. I know this a common pattern in HTML, that disabled fields are not part of the POST.
My question: how can I solve this issue to get the value POSTed when the field is disabled ? It should be done in JS...
I had a similar requirement, what i did was, created a class , which would make the text box appear like disabled, by removing mouse events and styling a bit
[https://codepen.io/DawsonMediaD/pen/Dqrck][1]
or
Bit tricky, just before the post , enable all of them
Fixed it, in the onchange handler of the dropdown box attach this JS code:
var defaultDateValue = "2017-01-04"; //just for demo
var $effectiveToInput = $("##Html.IdFor(m => m.EffectiveToDate)");
$effectiveToInput.parent().append("<input type=\"hidden\" name=\"#Html.NameFor(m => m.EffectiveToDate)\" id=\"#Html.NameFor(m => m.EffectiveToDate)\" value=\"" + defaultDateValue +"\" />");
And for the other types, i clear the hidden fields with checks:
function removeHiddenEffectiveToDateField() {
var $effectiveToInput = $("##(Html.IdFor(m => m.EffectiveToDate))[type = hidden]");
if (null !== $effectiveToInput) {
$effectiveToInput.remove();
}
}

How to set selected value of a dropdownlist in JavaScript. Sharepoint List form

I want to set Selected value of a Dropdownlist in a Sharepoint List form
I am able to set value using
getField('select','County').selectedIndex = 1;
Here it sets the the default selected at index 1
But i want to set the value using Text i.e some "Abc"
i tried
getField('select','County').selectedValue = "Abc";
getField('select','County').selectedText = "Abc";
But both did not work for me. Is there any other property to set the value of a dropDownlist using JS
Hi please check this demo
http://jsfiddle.net/BbSLy/5/
you add value in droup down list also select value using javascript with passing text value

jquery get sender's form field value onClick

I have a page with lots of forms on it and every form has a dropdown and two buttons - ok and decline. I have an onclick that will trigger a function:
<input type="button" value="decline"
class="submit_button_wow"
onclick="submit_decision({{ x.id }},false,this)">
how do I figure the selected dropdown value from this form inside submit_decision?
{{x.id}}
is the id of decision that I fill out via template engine.
You're passing a reference to button to the submit_decision (the this). From it you can get parent form and, subsequently, the dropdown and its value.
Try something like this:
$(sender).parent("form").find("select").first().val()
Refrence the form from the button's form property. Then get the drop down list by its name.
function submit_decision(decision, myBool, button) {
var dropdown = button.form.myDropdown;
var selectedValue = $(dropdown).val();
}

Categories