Is this even possible? Maybe i am stupid but i cannot apply any of the answers here or elsewhere to my specific situation.
What i want to do is pass a strongly typed model of Quiz to my view. Quiz has a collections of questions. Question has a collection of possibleanswers.
Questions look like:
Question.Text
Question.Id
Question.PossibleAnswers
PossibleAnswers look like:
PossibleAnswer.Id
PossibleAnswer.Value
PossibleAnswer.Label
PossibleAnswer.Selected
I want to pass the Quiz to the view, the view should setup the form where each Question has a radiobuttonlist(group) of PossibleAnswers.
Question1 text blah blah blah:
<input id="1_1" type="radio" name="question1" value="1" />
<input id="1_2" type="radio" name="question1" value="2" />
<input id="1_3" type="radio" name="question1" value="3" />
Now i don't care exactly the format for the id's of the radio buttons in the group.. clearly MVC must care.. so whatever way works i want to do that. But i would expect when i submit the form to the action i should be able to loop through the Questions and get the possibleAnswer in each Question's possibleAnswer collections with the .isAnswer marked as true:
foreach(var item in model.Questions)
{
foreach(var aitem in item.PossibleAnswers)
{
if(aitem.Selected)
//do some stuff
}
}
so i don't get it.. this:
#foreach (var item in Model.Questions)
{
#foreach (var jitem in item.PossibleAnswers)
{
#Html.RadioButtonFor(x => item.QuestionId, jitem.Value)
}
}
is not even close.. can someone please explain what i am doing wrong? Is my model wrong? Can MVC do this? Do i need to change the PossibleAnswer model type to RadioButtonListItems or something? help!
------------------------------------ ** UPDATE ** ----------------
#for (int i = 0; i < Model.Questions.Count(); i++)
{
<p>#Model.Questions.ElementAt(i).QuestionText</p>
#Html.RadioButtonListFor(m => m.Questions.ElementAt(i).AnswerRadios,
"Question" + i);
}
This code seems to work! At least it will output some radiobuttons.. BUT it is outputting the html as special entities..
<td id="Question0_Container">
<input id="Question0_1" name="Question0_value" type="radio" value="17" />
<label for="Question0_1">1</label>
<input id="Question0_2" name="Question0_value" type="radio" value="18" />
<label for="Question0_2">2</label>
<input id="Question0_3" name="Question0_value" type="radio" value="19" />
<label for="Question0_3">3</label>
<input id="Question0_4" name="Question0_value" type="radio" value="20" />
<label for="Question0_4">4</label>
<input id="Question0_5" name="Question0_value" type="radio" value="21" />
<label for="Question0_5">5</label>
</td>
Here is what I use. I have made some minor modifications but it works great.
Related
I have a form and I want to set default value in the field below but it's not working.
<span>ID User:</span>
<input type="text" th:value="${session.name}" th:field="*{userid}" th:errorclass="field-error" />
</div>
<div>
<span class="name-in">ID Room:</span>
<input type="text" th:value="${id}" th:field="*{room}" th:errorclass="field-error" />
</div>
I read some topic about this problem and I try to change as given below
th:attr="value = ${session.name}"
But It's still not working. Field ID User is empty. I don't know how to solve this problem.
Although your question contain less information, but i think you want to put default value for all field. If you like to do so change
`<input type="text" th:value="${session.name}" th:field="*{userid}" th:errorclass="field-error" />`
to
<input type="text" name="userid" value="as your wish" th:errorclass="field-error" />
Instead of changing the html, you should instead set the value of *{userid} in your controller. That way you can keep your html the same:
// Controller
modelObject.setUserId(session.name);
// HTML
<input type="text" th:field="*{userid}" th:errorclass="field-error" />
I need some help with the following issue. I am pretty new to JavaScript so this one is pretty tough for me. Any help would be greatly appreciated!
We have a form for registration that is already in use and I need to make some amends to it to enhance its usability. The form itself already contains several validation scripts and I need to add in a new one - an error message to appear next to the mobile field. I am unable to amend the form HTML itself so I have to do everything by javascript – I need to bind the new function to the submit button so that it fires AFTER all the other validations (field highlight, pop ups), but before the page turns over.
Here is the form (I have just left in the feild i need to amend) :
<form method="post" action="#" id="register_form" class="validate">
<input type="hidden" name="page" value="" />
<input type="hidden" name="unregistered" value="false" />
<fieldset>
<legend>I am a new online customer</legend>
<div class="element">
<label for="mobile_number">Mobile:**</label>
<input name="mobileNumber" type="text" id="mobile_number" title="Please enter at least one number" class="text validate {validate:{minLength:10, eitherOr:'#telephone_number', messages:{minLength:'Please enter a valid phone number (at least #NUM digits long)', eitherOr:'Please enter either your Telephone or Mobile number'}}}" />
</div>
<div class="element continue_shopping_cont submit">
<button type="submit" class="submit button small_button"><span>Register</span></button>
</div>
<input type="hidden" name="secure_from" value="" />
</fieldset>
</form>
Could someone help show me how i am supposed to do this and how is best to target this field?
I have 3 radio buttons that are rendered in an mvc3 View. I'm using a view model and the following is View.aspx page where the radioButtonFor is rendered:
<%= Html.RadioButtonFor(model => model.Input.YesNoMaybe, item.Value, new { id = String.Format("Input_YesNoMaybe_{0}", item.Value) })%>
Can someone please help me figure out how to simply access and select the 2nd of the 3 radio buttons to checked using jQuery?
So far I've tried multiple variations of the following:
$("input[name='Input.YesNoMaybe_1']").attr('checked', 'checked');
This is HTML being rendered:
<div id="divEscrowFeeSplit">
<input type="radio" value="1" name="Input.YesNoMaybe" id="Input_YesNoMaybe_1" data-val-required="required." data-val-range-min="1" data-val-range-max="2147483647" data-val-range="select a valid option" data-val-number="Must be a number." data-val="true">
<label for="Input_YesNoMaybe_1">Yes</label>
<input type="radio" value="2" name="Input.YesNoMaybe" id="Input_YesNoMaybe_2">
<label for="Input_YesNoMaybe_2">No</label>
<input type="radio" value="3" name="Input.YesNoMaybe" id="Input_YesNoMaybe_3" checked="checked">
<label for="Input_YesNoMaybe_3">Maybe</label>
Try this:
$("#Input_YesNoMaybe_1").attr('checked', 'checked');
I am using ASP.net for a program with a number of check boxes and a submit button which initiates an action depending on the selected check boxes.
However, one of my check boxes should behave as this submit button, i.e, upon selecting/deselecting this check box, the same action as the button must be triggered. Can someone please help me in doing this (or perhaps direct me to a tutorial)
I have a controller class and model.
Thanks you
EDIT
The program look like:
#using(Html.BeginForm("controllername", FormMethod.Get)) {
#html.CheckBox("check1");
#HTMl.Checkbos("check2");
<input type="submit" value="Submit" />
}
Everything else is pretty much handled in the controller.
You can use javascript to listen to the check event of your check box and then invoke the form submit.
Assuming your markup of view is like this
<form id="yourFormId" action="user/post">
<input type="checkbox" class="optionChk" value="1" /> One
<input type="checkbox" class="optionChk" value="2" /> Two
<input type="checkbox" class="optionChk" value="3" /> Three
</form>
<script type="text/javascript">
$(function(){
$(".optionChk").click(function(){
var item=$(this);
if(item.val()=="2") //check your condition here
{
item.closest("form").submit();
}
});
});
</script>
EDIT : As per the question edit.
Change the CheckBox Helper method usage like the below to add a css class to the checkbox so that we can use that for the jQuery selection.
#Html.CheckBox("check1",new { #class="optionChk"})
imagining you have something like this:
#using(Html.BeginForm()) {
<label class="checkbox">
<input type="checkbox" name="chb_a" id="chb_a"> Option A
</label>
<label class="checkbox">
<input type="checkbox" name="chb_b" id="chb_b"> Option B
</label>
<label class="checkbox">
<input type="checkbox" name="chb_c" id="chb_c"> Option C
</label>
<label class="checkbox">
<input type="checkbox" name="chb_d" id="chb_d"> Option D
</label>
<button type="submit" class="btn">Submit</button>
}
you can write a simple jQuery to complement:
$(".submit").click(function() {
// find the <form> the element belongs and submit it
$(this).closest('form').submit();
});
and with this, all you need is to add a class named submit to any checkbox or more buttons if you want them to submit
for example:
<label class="checkbox">
<input type="checkbox" name="chb_e" id="chb_e" class="submit"> Option E
</label>
You can bind the click events on the checkboxes.
$( '.myCheckboxes' ).click(function () {
var clickedBox = $( this );
// now do something based on the clicked box...
});
If you need to know which checkboxes are checked, that's just another selector.
$( '.myCheckboxes:checked' ).each(function () {
// Now you have access to each checked box.
// Maybe you want to grab their values.
});
Just bind the checkbox to a click event. Assuming you have a way of uniquely identifying the checkbox that submits the form.
$( '#formSubmitCheckbox' ).click(function() {
$( '#myForm' ).submit();
});
I have the following CFSELECT tags that are used to populate a text input:
<cfselect id="this" name="this" bind="cfc:Data.getThis()" bindonload="true" />
<cfselect id="that" name="that" bind="cfc:Data.getThat({p1})" />
<cfselect id="theOther" name="theOther" bind="cfc:Data.getTheOther({p1}, {p2})" />
The text input is the only value that needs to be submitted in a form:
<cfform name="addItem" method="post" action="somepage.cfm">
<cfinput
type="text"
id="item"
name="item"
bind="cfc:Data.getResult({this}, {that}, {theOther})" /><br />
<cfinput
type="submit"
name="addButton"
value="Add Item" />
</cfform>
I want the form and it's contents to be visible only when all three selections have been made, and there is a value for the text input. What is the best way to do this? I'm assuming some use of CFDIV is the best way, but I'm not sure how to load the dynamic content (the CFINPUTs) this way.
<cfselect id="this" name="this" bind="cfc:Data.getThis()" bindonload="true" onChange="toggleForm();" />
<cfselect id="that" name="that" bind="cfc:Data.getThat({p1})" onChange="toggleForm();" />
<cfselect id="theOther" name="theOther" bind="cfc:Data.getTheOther({p1}, {p2})" onChange="toggleForm();" />
<div id="theForm" style="display:none">
<cfform name="addItem" method="post" action="somepage.cfm">
<cfinput
type="text"
id="item"
name="item"
bind="cfc:Data.getResult({this}, {that}, {theOther})" /><br />
<cfinput
type="submit"
name="addButton"
value="Add Item" />
</cfform>
</div>
<script type="text/javascript">
function toggleForm(){
var a = document.getElementById("this").selectedIndex;
var b = document.getElementById("that").selectedIndex;
var c = document.getElementById("theOther").selectedIndex;
if (a > -1 && b > -1 && c > -1){
document.getElementById("theForm").style.display = "";
}
}
</script>
Personally I would simplify that JS a bit by using jQuery, but I don't know if you're already using jQuery on your site, and I don't want to be another "use jquery" empty answer; so this should work without jQuery, should you want/need to go without it. (But jQuery is awesome!)