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
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();
});
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.
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();
}
}
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
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();
}