form - show a specific thing if another specific thing is entered

**asdfqwerty** · 10-11-2010, 09:02 PM

I have a form script that validates for "value must be one of". If someone enters potatoes in the field, and if potatoes is one of the acceptable values, the form goes through. That's all the form does.

I need the form to produce a different result for each matching entry. For instance, potatoes and tomatoes are acceptable options. If someone enters potatoes, I need the result to be a popup window that says potatos are brown. If they enter tomatoes, the result should say tomatoes are red. How do I create different resulting text based on their acceptable entry?

Thank you so much in advance.

**asdfqwerty** · 10-11-2010, 09:04 PM

Here is the form I want to use:



<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
<SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY>
<SCRIPT>

var formItems = [
{
name:"isOneOf",
title:"isOneOf ['a','b','c']",
validators:[
{
type:"isOneOf",
errorMessage:"Value must be one of ['a','b','c'].",
list:['a','b','c']
}
]
},

{
type:"rowSpacer"},
// Submit button for form - will perform automatic client side validation before submission
// Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
// {title:"Submit Form", type:"submit", align:"center"}
// Button to call validation demonstration function
{title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
],

formValues = {
isOneOf:"x",
};

DynamicForm.create({
ID:"simpleForm",
left:20,
top:40,
items:formItems,
values:formValues,
width:600,
titleWidth:200
});

// A function to demonstrate form validation, and alert on success
// Note: Validation is performed automatically on form submission -
// no explicit call to the form.validate() function usually required.
function validateForm(){
if(simpleForm.validate()){
alert ("Form validation was successful!");
simpleForm.redraw();
};
};

</SCRIPT>
</BODY>
</HTML>

**asdfqwerty** · 10-11-2010, 09:09 PM

Actually what is the simplest way to do this? I would rather just go through formmail. I have had forms through them before that did similar things but I don't remember what would do this. I need something that validates for "value must be one of" and then produces a different result for each valid value.

**bluewalrus** · 10-11-2010, 11:01 PM

Are you looking for this to occur on the page the user is on? Do you have access to a server side script? Are the acceptable values coming from a database or any of the data?

**asdfqwerty** · 10-12-2010, 11:21 PM

Thanks for you response. I think the script I posted at the beginning of this thread is too complicated for me. I made a totally different script to do the same thing. It is much shorter and more simple. It works except that it shows the wrong answers. Do you know why it is showing the answer for b when it should show the answer for a? Or why it shows the answer for a when anything else is entered?

<script type="text/javascript">
function lookupitem(){
var itemField = document.getElementById('item');
if (itemField.value != "a")
{
document.write("goes with a");
}
else if (itemField.value != "b")
{
document.write("goes with b");
}
else if (itemField.value != "")
{
document.write("Please enter some text.");
}
else
{
document.write("Item not found");
}}
</script>
<input type='text' id='item' />
<input type='button' onclick='lookupitem()' value='Look It Up' />

**bluewalrus** · 10-12-2010, 11:42 PM

The != means not equal to you want to use == or ===.

Code:

<script type="text/javascript">
function lookupitem(){
	var itemField = document.getElementById('item');
	if (itemField.value == "a") {
		document.write("goes with a");
	} else if (itemField.value == "b") {
		document.write("goes with b");
	} else if (itemField.value == "") {
		document.write("Please enter some text.");
	} else {
		document.write("Item not found");
	}
}
</script>

**asdfqwerty** · 10-13-2010, 07:46 AM

Thanks!! I have combined that script with another script. It works unless I change these parts

document.write("goes with a");

to these

document.getElementById("a");

even though I have the id's set up. How can I fix this?

<script type="text/javascript">
function youentered(){
var item = document.getElementById('item').value;
document.getElementById('entereditem').innerHTML = item;
document.getElementById('explanation').innerHTML = 'Your search entry: ';
}
function itemresults(){
var itemField = document.getElementById('item');
if (itemField.value == "a") {
document.getElementById("a");
} else if (itemField.value == "b") {
document.getElementById("b");
} else if (itemField.value == "") {
document.getElementById("c");
} else {
document.getElementById("d");
}
}

</script>
<table id='a' bgcolor="ccffff">
<tr><td>goes with a</td></tr>
</table>
<table id='b' bgcolor="ccffff">
<tr><td>goes with b</td></tr></table>
<table id='c' bgcolor="ccffff">
<tr><td>Please enter some text.</td></tr></table>
<table id='d' bgcolor="ccffff">
<tr><td>Item not found.</td></tr></table>
<p>Enter something<p />
<p><i id='explanation'>Your search entry: </i><b id='entereditem'>none</b></p>
<input type='text' id='item' onkeyup='youentered()' />
<input type='button' onclick='itemresults()' value='Look It Up'/>

**bluewalrus** · 10-13-2010, 01:24 PM

I think this should work...

Code:

<script type="text/javascript">
function youentered(){
var item = document.getElementById('item').value;
document.getElementById('entereditem').innerHTML = item;
document.getElementById('explanation').innerHTML = 'Your search entry: ';
}
function itemresults(){
var itemField = document.getElementById('item');
if (itemField.value == "a") {
document.getElementById("show").innerHTML = "goes with a";
} else if (itemField.value == "b") {
document.getElementById("show").innerHTML = "goes with b";
} else if (itemField.value == "") {
document.getElementById("show").innerhtml = "goes with c";
} else {
document.getElementById("show").innerhtml = "<p>Enter something<p />\n<p><i id='explanation'>Your search entry:</i>\n<b id='entereditem'>none</b>\n</p> ";
youentered();
}
}
</script>
<table bgcolor="ccffff">
<tr>
<td id="show"></td>
</tr>
</table>
<input type='text' id='item' onkeyup='youentered()' />
<input type='button' onclick='itemresults()' value='Look It Up'/>

**asdfqwerty** · 10-14-2010, 03:30 AM

That is working! I would rather do it with Div's if that is possible. Instead of "goes with a" it would show the content of div 1, div 2, and div 3. "goes with b" could show the content of div 4 and div 5. I have looked all over online. Is that even possible? And if it isn't thanks for your help anyway because it looks great!

**bluewalrus** · 10-14-2010, 03:43 AM

Umm not sure what you mean, so you don't want the table and you want 4 divs? Create the html for the page you want and a description of the functional you want and I'll attempt to create it the functional via javascript.