Tried a few different ways but can't get it right and now as you can see it's all mixed up! This JavaScript business is not the same as it was 15 years ago! Thank you.
#section scripts
{
<script>
$(function () {
$("#cut").click(function () {
if (m.Fixture.IsCut.checked = true)
{
m.Fixture.BackOdds.readOnly == false;
}
else
{
m.Fixture.BackOdds.readOnly == true;
}
});
});
</script>
}
<div class="form-group">
#Html.LabelFor(m => m.Fixture.BackOdds)
#Html.TextBoxFor(m => m.Fixture.BackOdds, new { #id = "BackOdds", #class = "form-control", #readonly = "readonly" })
</div>
<div class="checkbox">
<label>
#Html.CheckBoxFor(m => m.Fixture.IsCut, new { #id = "cut", #onchange = "AutoCalculateMandateOnChange(this)"}) Odds Cut?
</label>
</div>
You need to refer to your element (m.Fixture.IsCut and m.Fixture.BackOdds are not elements in your DOM)
$("#cut").click(function () {
$('#BackOdds').prop('readonly', !$(this).is(':checked'));
});
Related
I have read many tutorials and many answers on stack overflow as well but it still does not work for me.Upon selecting an option (Yes)from drop down -> it should show the <div> tag otherwise <div> should be hidden.
Below is my code:
<h4>1. Does your school participate in the sponsored CAT4 scoring initiative?</h4>
#{
List<SelectListItem> listItems = new List<SelectListItem>();
listItems.Add(new SelectListItem
{
Text = "Yes",
Value = "True"
});
listItems.Add(new SelectListItem
{
Text = "No",
Value = "False"
});
}
<div class="form-group" id="PickOption">
<div class="col-md-10">
#Html.DropDownListFor(model => model.ParticipateInCAT4Scoring, listItems, "<----Select Yes or No---->", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.ParticipateInCAT4Scoring, "", new { #class = "text-danger" })
</div>
</div>
<div id="OnYes" class="form-group" style="display:none">
#Html.Label("For what Grade levels?", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(m => m.GradeLevelsCAT4, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(m => m.GradeLevelsCAT4, "", new { #class = "text-danger" })
</div>
</div>
Below is the Script file which I am placing at bottom of View page:
#section Scripts{
<script type="text/javascript">
$(document).ready(function () {
$('#PickOption').on('change', function () {
if ($(this).val() == 'True') {
document.getElementById('OnYes').style.display = "";
}
else {
document.getElementById('OnYes').style.display = "none";
}
});
});
</script>
}
Your selector is not right, please make sure that you bind event on dropdown so add a class on dropdown
#Html.DropDownListFor(model => model.ParticipateInCAT4Scoring, listItems, "<----Select Yes or No---->", new { #class = "form-control pickerDropdown" })
Now bind the event on added class like this:
$('.pickerDropdown').on('change', function () {
PickOption is the ID of the wrapping div.
Replace #PickOption on this line with the ID or selector of the select box (usually auto-generated but you can specify.
$('#PickOption').on('change', function () {
Also since you're using jQuery, you can just do $('#OnYes').show();
https://api.jquery.com/show/
I am trying to clear a multi-select dropdown using javascript as shown by the image below
Class
[MultiSelect("GetLookUps", 6)]
public int[] HoldItemsArr { get; set; }
Chtlm
<div class="row form-group">
#Html.RequiredLabelFor(model => model.HoldItemsArr, new { #class = "control-label col-md-5" })
<div class="col-md-7">
#Html.EditorFor(model => model.HoldItemsArr, new { htmlAttributes = new { #class = "form-control", multiple = "multiple" } })
#Html.ValidationMessageFor(model => model.HoldItemsArr, "", new { #class = "text-danger" })
</div>
</div>
JavaScript
if (($("#ReasonForLeaving").val() == 15)) {
$("#ResignationInfo").show();
}
else {
// I tried all the option below
$('#HoldItemsArr').length = 0;
$("#HoldItemsArr option:selected").prop("selected", false);
$("#HoldItemsArr").val('')
$("#HoldItemsArr").multiSelect("clearSelection");
}
The link below help with what I was looking for
How do I reset a jquery-chosen select option with jQuery?
I needed to add the code below to my JavaScript
$('#HoldItemsArr').val('').trigger('chosen:updated');
Option 1:
$("#HoldItemsArr").multiselect("clearSelection");
Option 2:
$("#HoldItemsArr option:selected").removeAttr("selected");
$("#HoldItemsArr").multiselect('refresh');
Please take a look at the link: https://www.py4u.net/discuss/911129
I would like to pass the values of the multiple textboxes from view to the controller with respect to the item id selected in the dropdown box.
NOTE:-Multiple textboxes are produced because user can select multiple items from dropdown.
This is a part of my Controller:-
foreach(var data in propertyViewModel.PropertyInvestors)
{
FounderInvestment founderInvestment = new FounderInvestment
{
Id = propertyViewModel.FounderInvestmentViewModel.Id ?? 0,
InstallmentPeriod = propertyViewModel.FounderInvestmentViewModel.InstallmentPeriod,
InvestorId = Convert.ToInt32(data),
PropertyId = property.Id,
Investment = propertyViewModel.FounderInvestmentViewModel.Investment
};
_founderInvestmentQueryProcessor.Create(founderInvestment);
}
This is my dropdown:-
<div class="form-group">
#Html.LabelFor(model => model.PropertyInvestors, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.PropertyInvestors, (IEnumerable<SelectListItem>)#ViewBag.Investors, "Select", htmlAttributes: new {#id="dropdown", #class = "form-control",#multiple="multiple" })
#Html.ValidationMessageFor(model => model.PropertyInvestors, "", new { #class = "text-danger" })
</div>
</div>
These are the textboxes:-
<div id="showInvestmentForm" style="display:none">
<div class="form-group">
#Html.LabelFor(model => model.FounderInvestmentViewModel.Investment, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FounderInvestmentViewModel.Investment, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FounderInvestmentViewModel.Investment, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.FounderInvestmentViewModel.InstallmentPeriod, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FounderInvestmentViewModel.InstallmentPeriod, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FounderInvestmentViewModel.Investment, "", new { #class = "text-danger" })
</div>
</div>
</div>
This is the JS that produces the textboxes with respect to the number of dropdown items selected:-
<script type="text/javascript">
$(function () {
$("#dropdown").change(function () {
var value = $(this).val();
var form1 = $('#showInvestmentForm').html();
if (value.length == 1) {
$('#showInvestmentForm').show();
}
else if (value.length > 1) {
for (var i = value.length; i <= value.length ; i++) {
$(form1).appendTo('#field1');
}
}
else {
$('#showInvestmentForm').hide();
}
});
});
</script>
PROBLEM:---- The problem that I am getting here is that the value of the first 'form-group' textboxes is being repeated for all the textboxes.i.e first entry is being repeated and passed to the controller.How do I solve this issue?
This is how it gets saved in Founder Investment Database Table because of repeat
In order to Post back the values of those textboxes,You need indexing. In order to do that, first create a 'Dummy' code for those two input text boxes like this:--->
<div id="showInvestmentForm" style="display:none">
<div class="form-group">
<label for="FounderInvestments.Investment" class="control-label col-md-2">Investment</label>
<div class="col-md-10">
<input type="number" name="FounderInvestments[#].Investment" value="" class="form-control" />
<input type="hidden" name="FounderInvestments[#].Index" value="" />
</div>
</div>
<div class="form-group">
<label for="FounderInvestments.InstallmentPeriod" class="control-label col-md-2">Installment Period</label>
<div class="col-md-10">
<input type="number" name="FounderInvestments[#].InstallmentPeriod" value="" class="form-control" />
</div>
</div>
</div>
The hidden input is also necessary.
Now the JS code has to look something like this:-
$(function () {
$('#dropdown').change(function () {
var value = $('#dropdown').val();
alert(value.length);
var index = (new Date()).getTime();
var clone = $('#showInvestmentForm').clone();
clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
$('#field1').append(clone.html());
});
DateTime is for producing random index numbers. The [#] is replaced by those randomly generated DateTime values.
Unfortunately I cannot comment yet, so I'll post this as an answer (which it might actually be).
The problem you described occurs when "value.length" of the dropdown selection is greater than 1 (thus multiple textboxes were being created).
Taking this snippet out of your code:
else if (value.length > 1) {
for (var i = value.length; i <= value.length ; i++) {
$(form1).appendTo('#field1');
}
}
..we can see that there's an unwanted behavior regarding DOM manipulation - essentially, creating multiple elements with the same ID.
I am guessing since you are probably listening to those textboxes changes using an ID, you will experience exactly the problem you described.
A little snippet that might help:
else if (value.length > 1) {
for (var i = value.length; i <= value.length ; i++) {
var newTextBox = document.createElement('div');
newTextBox.innerHTML = form1.innerHTML;
newTextBox.setAttribute('id', 'textbox'+i);
$(newTextBox).appendTo('#field1');
}
}
(Not sure this will actually work since I don't have enough info, but the idea should fix the problem)
I am learning asp.net mvc 5.
My dropdownlistfor is working perfect and shows right field based on its value.
But the problem is when the page loaded first time it shows all field..
Problem is: I want default is showing nothing when the page first time loaded.
my cshtml:
<div class="form-group">
<div class="col-md-10">
#Html.DropDownListFor(m => m.PaymentMethod, ViewBag.PayTypeList as List<SelectListItem>, new { #class = "btn btn-primary btn-lg dropdown-toggle", #id = "PaymentId" })
<div id="PaypalButton">
<br/>
<script src="https://www.paypalobjects.com/api/button.js?"
data-merchant="braintree"
data-id="paypal-button"
data-button="checkout"
data-color="gold"
data-size="medium"
data-shape="pill"
data-button_disabled="true">
</script>
<!--data-button_type="paypal_submit"-->
</div>
<div id="EcheckForm">
<div class="form-group">
<div class="col-md-10">
#Html.TextBoxFor(m => m.VecInsNum, new { #class = "form-control input-lg", placeholder = "Vehicle Isurance Number", required = "required", tabindex = 18 })
#Html.ValidationMessageFor(m => m.VecInsNum, null, new { #class = "text-danger" })
</div>
</div>
</div>
</div>
And Js:
#section Scripts {
<script type="text/javascript">
$(document).ready(function () {
$('#PaymentId').change(function () {
var value = $(this).val();
if (value == '1') {
$('#PaypalButton').show();
$('#EcheckForm').hide();
} else if (value == '2') {
$('#PaypalButton').hide();
$('#EcheckForm').show();
} else {
$('#PaypalButton').hide();
$('#EcheckForm').hide();
}
});
});
When the page first time loaded:
When I select Paypal:
when I select E-check:
When I go back to Default:
First, create a function which contains hide methods inside it:
// hide all div options
function hideOnLoad() {
$('#PaypalButton').hide();
$('#EcheckForm').hide();
}
Then, call function above to hide all option div elements when page has loaded at first time and when default value being selected as given below:
$(document).ready(function () {
hideOnLoad(); // add this line
$('#PaymentId').change(function () {
var value = $(this).val();
if (value == '1') {
$('#PaypalButton').show();
$('#EcheckForm').hide();
} else if (value == '2') {
$('#PaypalButton').hide();
$('#EcheckForm').show();
} else {
hideOnLoad();
}
});
});
Simplified example: JSFiddle Demonstration
When I use the JS code below in create view in MVC it works perfect. However I've tried to alter it so that when in edit view it should still only display the textbox when "OtherSpecifyFormGroup" is selected from the create screen. Any help would be great!!
<script>
$(document).ready(function () {
//this line fires no matter what
$("#OtherSpecifyFormGroup").hide();
$("#SelectType").change(function () {
//alert("in function");
var value = document.getElementById("SelectType").value;
if (value == "4") {
$("#OtherSpecifyFormGroup").show("highlight", { color: "#7FAAFF" }, 1000);
}
else {
$("#OtherSpecifyFormGroup").hide();
}
});
})
</script>
HTML code
<div class="form-group">
#Html.LabelFor(model => model.SelectType, "Select Type", new { #class = "control-label col-md-5" })
<div class="col-md-1">
#Html.DropDownList("SelectType", String.Empty)
#Html.ValidationMessageFor(model => model.SelectType)
</div>
</div>
<div class="form-group" id="OtherSpecifyFormGroup">
#Html.LabelFor(model => model.OtherSpecify, new { #class = "control-label col-md-5" })
<div class="col-md-4 sbchanged">
#Html.TextBoxFor(model => model.OtherSpecify)
#Html.ValidationMessageFor(model => model.OtherSpecify)
</div>
</div>
Through working around with the the JS code I finally got it working!
<script>
$(document).ready(function () {
if (document.getElementById("SelectType").value != "4") {
$("#OtherSpecifyFormGroup").hide();
}
$("#SelectType").change(function () {
//alert("in function");
var value = document.getElementById("SelectType").value;
if (value != "4") {
$("#OtherSpecifyFormGroup").hide();
}
else {
$("#OtherSpecifyFormGroup").show("highlight", { color: "#7FAAFF" }, 1000);
}
});
})
</script>
By changing the inital if statement I was able to hide any value which wasn't "4", this meant that if a user selects any other value on the create screen and go into edit that "OtherSpecifyFormGroup" is hidden. The show and hide in the second part of the change was swapped around so that if any value other than "4" was selected while in edit view the textbox remained hidden but when "4" was selected then it appeared.