form - show a specific thing if another specific thing is entered [Archive]

View Full Version : 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 ===.

<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...

<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.

asdfqwerty

10-15-2010, 08:18 AM

I want the results text to be divs. I don't care if there is a table or not. If someone enters acceptable text, a set of div's could be called as the result. Then the same text would not have to be rewritten for each result that needs that text. In the stuff above if "goes with" "a" and "b" were text by themselves in 3 div's, those divs would be called if someone entered a or b.

Everything below is working and finished, except I tried to do div's and now it won't work again.

<html><head></head><body onload="document.notarealform.textfield.focus()">
<script type="text/javascript">
 <div 1, div 2, div 3">;
} else if (itemField.value == "b") {
document.getElementById("show").innerHTML = "put a combination of div's something like this with the words written elsewhere so they don't have to be rewritten ---> <div 2, div 1, div 4>";
} else if (itemField.value == "") {
document.getElementById("show").innerHTML = "Please enter some text.";
} else {
document.getElementById("show").innerHTML = "Not found.";
}
}
//-->
</script>
<div id="1" bgcolor="f0faf5">some text for div 1</div>
<div id="2" bgcolor="f0faf5">some text div 2</div>
<div id="3" bgcolor="f0faf5">other text div 3</div>
<div id="4" bgcolor="f0faf5">different text div 4</div>
<p><br /><br />Enter some text.<p />
<p><i id='explanation'>Your entry: </i><b id='entereditem'>none</b></p>
<form method="post" name="notarealform">
<input type='text' name="textfield" id='item' onkeyup='youentered()' />      <input type='button' onclick='itemresults()' value='Look It Up'/></form>
</body></html>

bluewalrus

10-15-2010, 01:04 PM

You just need to change these lines. These lines find the element by the id then put the text inside of that element. ID's also cant be just numerical values you could make them "one" or "id_1".

document.getElementById("show").innerHTML

So in your current example

document.getElementById("1").innerHTML

I dont know what you mean by

put a combination of div's something like this with the words written elsewhere so they don't have to be rewritten ---> <div 1, div 2, div 3

asdfqwerty

10-15-2010, 06:36 PM

Thanks blue walrus!!!