If I create two radio buttons for example:
#Html.RadioButtonFor(model => model.IsFemale, "false") Male
#Html.RadioButtonFor(model => model.IsFemale, "true") Female
How can I show one div when true is pressed, hide it and show another one if false is pressed?
I created pretty simple web site to test this:
#model WebApplication1.Models.Testi
<div>
#Html.RadioButtonFor(model => model.isTest, "false", new { id = "male" })
#Html.RadioButtonFor(model => model.isTest, "true", new { id = "female" })
if (Model.isTest)
{
<div>
Testdiv
</div>
}
</div>
Simple model:
public class Testi
{
public bool isTest { get; set; }
}
You need to use JavaScript. Add an onclick event to the two radio buttons and call a JavaScript function passing the value of the radio button:
#Html.RadioButtonFor(model => model.IsFemale, "false", new { onclick = "showNote(this.value);" }) Male
#Html.RadioButtonFor(model => model.IsFemale, "true", new { onclick = "showNote(this.value);" }) Female
Then add those two divs that you want to show/hide:
<div id="male">Notes for men</div>
<div id="female">Notes for women</div>
And finally add the JavaScript function that will do the job:
<script>
function showNote(isFemale) {
var male = document.getElementById("male");
var female = document.getElementById("female");
if (isFemale == "true") {
female.style.display = "block";
male.style.display = "none";
} else {
male.style.display = "block";
female.style.display = "none";
}
}
</script>
Related
I have a simple form with 2 dropdown fields and a submit button in my MVC application. I have enabled client side validation and it works fine. I have now added a javascript to disable the submit button to prevent the form being submitted twice. For some unknown reason the client validation message does not display when I add this script.
This is my form:
#using (Html.BeginForm("Recycle", "GetList", FormMethod.Post, new { id = "myForm" }))
{
<!-- Server list -->
<div>
<span>Site type: </span>
#Html.DropDownListFor(m => m.uInputS, new List<SelectListItem>
{
new SelectListItem {Text = "text", Value = "value" },
new SelectListItem {Text = "text", Value = "value" }
}, "Select site type")
#Html.ValidationMessageFor(m => m.uInputS, "", new { #class = "error" })
</div>
<!-- Application list -->
<br />
<div>
<span>Application: </span>
#Html.DropDownListFor(m => m.uInputA, new SelectList(string.Empty, "Value"))
#Html.ValidationMessageFor(m => m.uInputA, "", new { #class = "error" })
</div>
<br />
<!-- Submit-->
<div>
<input id="Submit1" type="submit" value="Submit" onclick="return FreezeSubmit();" />
</div>
}
Below is the jquery I used to disable the submit button.
<script>
function FreezeSubmit() {
var s = $("#uInputS").val();
var a = $("#uInputA").val();
if ((s && a)) {
$('#myForm').submit();
$('#Submit1').prop('disabled', true);
return true;
}
else {
$('#Submit1').prop('disabled', false);
return false;
}
}
</script>
This is my Model:
public class GetList
{
[Required(ErrorMessage = "Please select site type")]
public string uInputS { get; set; }
[Required(ErrorMessage = "Please select application name")]
public string uInputA { get; set; }
}
I am very new to programming and I am not able to figure out why the client validation message fails to display because I added some javascript. Any help is appreciated. Thanks!
Remove onclick in
<input id="Submit1" type="submit" value="Submit" onclick="return FreezeSubmit();" />
change to
<input id="Submit1" type="submit" value="Submit" />
and you need change your script to
<script>
$(document).ready(function(){
checkEmpty()
})
$('input').change(function() {
checkEmpty();
});
function checkEmpty(){
var s = $("#uInputS").val();
var a = $("#uInputA").val();
if ((s && a)) {
$('#Submit1').prop('disabled', true);
}
else {
$('#Submit1').prop('disabled', false);
}
}
</script>
disable the button when submit handler is called, see jquery api here
$( "#your_form_id" ).submit(function(event) { // Handler for .submit() called.
$('#Submit1').prop('disabled', true);
});
Is there a way how can I trigger the submit if the confirm variable which is value is true? I have a two radio button that has onclick event on it that will show the confirm dialog for each radio button. I just wanted to trigger the submit if the user choose the "Ok" button on confirm dialog.
<script>
function showApprove()
{
value = confirm("Approve this document?");
if (value == true)
{
}
else
{
return false;
}
}
function showReject()
{
value = confirm("Reject this document?");
if (value == true)
{
}
else
{
return false;
}
}
</script>
<form class = "form-inline" method = "post" action = "{{ url('documents/pending') }}">
<input type="hidden" name = "id" value = "{{$list->id}}">
<div class = "radio">
<label><input type = "radio" onclick = "showApprove()" name = "status" value="1"> Approve</label>
</div>
<div class = "radio">
<label><input type = "radio" onclick = "showReject()" name = "status" value="0"> Reject</label>
</div>
</form>
function showApprove()
{
value = confirm("Approve this document?");
if (value == true)
{
document.getElementById("myForm").submit();
}
else
{
return false;
}
}
function showReject()
{
value = confirm("Reject this document?");
if (value == true)
{
document.getElementById("myForm").submit();
}
else
{
return false;
}
}
</script>
add id in form
<form id="myForm" class = "form-inline" method = "post"....
I have this view:
<div class="editor-field">Best</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.Best, new List<SelectListItem>
{
new SelectListItem { Value = "Best3", Text = "Best 3"},
new SelectListItem { Value = "Best5", Text = "Best 5"},
new SelectListItem { Value = "Best10", Text = "Best 10"},
new SelectListItem { Value = "XBest", Text = "X Best"}
},
new { #class = "myselect" })
#Html.ValidationMessageFor(model => model.Best)
</div>
<div class="editor-label">X</div>
<div class="editor-field">
#Html.EditorFor(model => model.X)
#Html.ValidationMessageFor(model => model.X)
</div>
And I have this jquery:
$('#Best').on('change', function () {
if ($(this).val() != "XBest") {
$('#X').hide(); //invisible
$('#X').attr('disabled', 'disabled'); // disable
} else {
$('#X').show(); //visible
$('#X').removeAttr('disabled'); // enable
}
});
And it works, but when i go to this view the EditorFor X is always visible, only changes when i start clicking on the values of the dropdownlist. My question is how can it stays hidden when accessing to the view and only shows on click.
You need to execute the change() event immediately after binding the event like following.
$('#Best').on('change', function () {
if ($(this).val() != "XBest") {
$('#X').hide(); //invisible
$('#X').attr('disabled', 'disabled'); // disable
} else {
$('#X').show(); //visible
$('#X').removeAttr('disabled'); // enable
}
}).change(); // auto execute
I am developing an Quiz Application in MVC 5. I have added two tables in database. One for marks and other for Questions and Answers. I have entered data in database for question, answers and have entered bool value as true or false for correct answer and vice versa. I am able to view Question and Answers from database.But I got stuck whenever user checks the checkboxes i want to give him points based on correct or wrong answer. I am not able to write javascript function in order to check whether the checkbox is checked or not.
Javascript:
function scorecheck(id) {
if (document.getElementById(id).checked) {
document.getElementById(id).value = "false";
}
else {
document.getElementById(id).value = "true";
}
}
Razor view:
#using(Html.BeginForm("Score", "Home", FormMethod.Post))
{
foreach (var item in Model) {
#Html.DisplayFor(modelItem => item.Question)
#Html.CheckBox("ans1", new { onchange = "scorecheck()" })
#Html.DisplayFor(modelItem => item.ans1)<br />
#Html.CheckBox("ans2", new { onchange = "scorecheck()" })
#Html.DisplayFor(modelItem => item.ans2)<br />
#Html.CheckBox("ans3", new { onchange = "scorecheck()" })
#Html.DisplayFor(modelItem => item.ans3)<br />
#Html.CheckBox("ans4", new { onchange = "scorecheck()" })
#Html.DisplayFor(modelItem => item.ans4)<br />
}
<input type="Submit" value="Submit" />
}
Also I have written logic for giving points for correct and wrong answer but it is not working.
C#:
int s = 0;
string ans1 = c["ans1"];
if (ans1 == "true")
{
s = s + 20;
}
string ans2 = c["ans2"];
if (ans2 == "false")
{
s = s - 20;
}
string ans3 = c["ans3"];
if (ans3 == "false")
{
s = s - 20;
}
string ans4 = c["ans4"];
if (ans4 == "false")
{
s = s - 20;
}
Here is how you can check the value of checkbox on click:
<input type="checkbox" value="yourvalue" onclick="MyFunc(this)">
and the javascript function:
function MyFunc(control)
{
if(control.checked==true)
//your logic
}
I have used following to get id from checkboxes:
`<input id="#(item.ans1)" type="checkbox" name="ans1" value="#item.ans1" onchange="scorecheck('#(item.ans1)')" /> `
Then I am using Javascript Function to check if its value is true or false like this:
if (document.getElementById(id).checked) {
document.getElementById(id).value = "True";
}
else {
document.getElementById(id).value = "False";
}
I am making an MVC 5 web application and I am looking to pass a value from my ViewModel to a function in my JavaScript
The aim is hide a Label/Div when the user selects the option "No" and make it reappear when the user changes the option back to "Yes"
Here is what I have so far:
ViewModel:
public enum BasicAnswer
{
[Display(Name= "Yes")]
Yes,
[Display(Name= "No")]
No
}
public BasicAnswer userDiscomfortResponse { get; set; }
View:
<div id="UserDiscomfortAnswerLabel">
<label id="somelabel">Did you have any discomfort with an exercise?</label>
<div class="Answer1" onclick=feedback data-id='#Model.userDiscomfortResponse'>
#Html.EnumDropDownListFor(m => m.userDiscomfortResponse, new { #class = "form-control" })
</div>
</div>
<div class="Question2">
<label id="UserDiscomfortExerciseLabel">What exercise was the issue?</label>
<div class="Answer2">
#Html.DropDownListFor(m => m.discomfortExercise, Model.UsersSelectedExcerises, new { #class = "form-control" })
</div>
</div>
JavaScript:
function feedback() {
var feedback = $(this).attr('data-id');
if (feedback == "Yes") {
document.getElementById("UserDiscomfortExerciseLabel").style.display = "block"
}
else {
document.getElementById("UserDiscomfortExerciseLabel").style.display = "none"
}
}
The issue I am having is var feedback = $(this).attr('data-id') results as undefined and so the label hides on click but never shows again.
Is there something I've missed?
Thank you in advance.
Ok, try removing the onclick on the div and add:
$(document).ready(function()
{
function feedback() {
var feedback = $('#userDiscomfortResponse').val()
if (feedback == "Yes") {
document.getElementById("UserDiscomfortExerciseLabel").style.display = "block"
}
else {
document.getElementById("UserDiscomfortExerciseLabel").style.display = "none"
}
}
$("#userDiscomfortResponse").change(feedback);
feedback();
}