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!)
Related
I'm trying to use JSTL, so that if a user enters a code, it is looked up in the database, if it equals the value, then the following discount is applied.
I kind of have an idea/pseudocode of what i want to write but i cant get it working or where i should go from here
In my purchase page i have:
form action="promo.jsp" method="GET">
Promotional Code: <input type="text" name="promo">
<input type = "submit" id="promo" value = "Apply Code" />
</form>
<form action="complete_purchase.jsp" method="POST">
<input type="submit" value="Complete Purchase" />
</form>
And in my "promo.jsp"
I have something a long the lines of:
<sql:query var="item">
select item_price from inventory;
</sql:query>
<sql:query var="pro">
select code,discount from promotion_code;
</sql:query>
<c:if test="${pro.promo eq 'spring01'}">
<c:set var="user" value="${(item_price-(item_price*discount))}" scope="session" />
</c:if>
<c:out value="${sessionScope.user}" />
So basically, when i click apply code, it stores the new value of the price in a variable, that i want to call on the "final purchase page"
I'm developing a form and need to enable or disable a field depending on the answer given.
Attached screen. When choosing whether to enable the field below, NO disables it.
Thanks for the reply.
You can try this (using jquery hide and show):
You have to include jquery first in you file to make it work;
HTML:
<script src="jquery-2.1.4.js" type="text/javascript"></script>
<input type="radio" class="radiobutton" name="select" value="yes" /> yes
<input type="radio" class="radiobutton" name="select" value="no" />no
<input type="text" name="name" id="name" value="" />
Working example https://jsfiddle.net/prohit0/zfjsmn59/22/
SCRIPT:
<script>
$(document).ready(function(e) {
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="yes"){
//id is the id of the elemnt to hide
$('input[id="name"]').show();
}else {
$('input[id="name"]').hide();
}
});
});
</script>
http://www.tutorialrepublic.com/faq/show-hide-divs-based-on-radio-button-selection-in-jquery.php
I am a beginner to ajax, jQuery and json. I want to sort five numbers and for that I need to insert data through an user form and send it through ajax and retrieve the result as json on the same page. Can you please help me out here?
(UPDATE)
The HTML code is like this:
<td><input type="number" name="array[]" />
<td><input type="number" name="array[]" />
<td><input type="number" name="array[]" />
<td><input type="number" name="array[]" />
<td><input type="submit" name="submit" value="SUBMIT" id="submit" />
And PHP in another file sort.php goes like this:
$a=$_POST['array'];
sort($a);
$b=count($a);
for($i=0;$i<$b;$i++)
{
echo "$a[$i] <br>";
}
<script type="text/javascript">
var array=[];
function addElement() //this function take the value from the text box and assign the value to an array
{
var number=$("#addvalue").val();
array.push(number);
$("#addvalue").val(' ');
$("#addvalue").focus();
}
function Sort() //this function display the number in desending order
{
for(i=0;i<array.length;i++) {
for(j=i+1;j<array.length;j++) {
if(parseInt(array[j]) > parseInt(array[i])) {
var temp=array[i];
array[i]=array[j];
array[j]=temp;
}}}
$.each(array,function(index) //and this function display the number.
{
var span=document.createElement("span");
span.appendChild(document.createTextNode(array[index]));
var i =document.getElementById("array");
i.appendChild(span);
var br=document.createElement("br");
i.appendChild(br);
});
$("div#array span:first").css("color","green");
};<script>
<body>
<input type="text" id="addvalue"/>
<br/><input type="button" onclick="addElement()" value="Add Number"/> <input type="button" onclick="Greater()" value="Sort">
<div id="array"></div>
</body>
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.
I have a CFINPUT tag in a CFFORM. I want to set the range dynamically without posting the page. I have several AJAX calls throughout the page to dynamically load form fields on the fly:
<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})" />
<cfdiv
id="maxQty"
bind="cfc:Data.getMaxQty({itemId})" />
<cfinput
type="text"
id="qty"
name="qty" />
<cfdiv
id="itemId"
bind="cfc:Data.getItemId({this}, {that}, {theOther})" />
In the above CFFORM, I basically want to set the minValue of the range to "1" and the maxValue of the range to the value of cfc:Data.getMaxQty({itemId}).
Is this possible? How can I do it?
The quick answer is "No". But there is a very easy workaround. Simply load the value that you want to be the maximum into a CFDIV or a CFINPUT hidden field using binding, then access that value in a JavaScript function that validates the min/max values when you submit the form:
<script type="text/javascript">
<!--
function validateForm() {
var maxQty = document.getElementById("maxQty").innerHTML;
if (document.myForm.add_item_1.value < 1 || document.myForm.add_item_1.value > maxQty) {
alert("Quantity must be an integer value between 1 and " + maxQty);
return false;
}
return true;
}
//-->
</script>
<cfform name="myForm" method="post" action="myFormAction.csm" onsubmit="return validateForm();">
<cfdiv
id="maxQty"
bind="cfc:Data.getMaxQty({itemId})" />