...

View Full Version : indexOf to recognize part of user input



iChick
07-29-2009, 01:13 AM
Hi there!

OK I need a little help as I'm not sure how to integrate this function into my form. First of all I should explain that my form doubles as a Google Search box. If you select the Google Search radio button it submits the input text to Google. It also defaults to Google if anything else other than "red", "green" or "blue" are entered. Now what I'd like to do is add a function so that if someone enters "purple is my favorite color" it recognizes the "purple" part of the string using something like .indexOf('purple'); and calls something like if(function==-1) { theForm.action = "Other choice "+ q.value;. How can I add this to my form? Thank you for any help.

My form code:


<script>
function convert(theForm){
var els = theForm.getElementsByTagName('input');// store inputs
var q = els[0], color = els[1];

if(els[4].checked){// submit to google
theForm.action = 'http://www.google.com/search';
return true;
};

color.value = "Chosen "+ q.value +" color";
switch(q.value){// check the query
case 'red':
case 'green':
case 'blue':
location.href = color.value;
return false;
break;
default:
theForm.action="http://www.google.com/search";
break;
};
return true;
};
</script>

<form name= "myform" onsubmit='return convert(this)'> <input name='q' type='text' />
<input name='color' type='hidden' /> <input type='submit' value=" Enter " />
<br />
<input name="searchType" type="radio" value="" checked="checked" > <label for="all"> My Form </label>
<input name="searchType" type="radio" value="google" onclick="document.myform.action='http://www.google.com/search';" />
<label for="google"> Google Search </label></form>

Old Pedant
07-29-2009, 04:34 AM
Ummm...just exactly as you stated it.


var text = q.value; // ??? is this where it comes from?
if ( text.toLowerCase().indexOf('purple') >= 0 ) {
theForm.action = "Other choice "+ text;
} else ...

You could also use the .match() function or use a regular expression. But indexOf seems adequate for this simple check.

jmrker
07-29-2009, 04:36 AM
Assuming I understand the problem, see if this modification is of any use to you.


<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=173081

function convert(theForm){
var els = theForm.getElementsByTagName('input');// store inputs
var q = els[0], color = els[1];

if(els[4].checked){// submit to google
theForm.action = 'http://www.google.com/search';
return true;
};

// replace following alerts with 'theForm.action' code desired, after testing
var t = q.value.toLowerCase();
if (t.indexOf('purple') != -1) { alert('Found: Other choice '+q.value); return false; }
if (t.indexOf('yellow') != -1) { alert('Found: Other choice '+q.value); return false; }
if (t.indexOf('orange') != -1) { alert('Found: Other choice '+q.value); return false; }

color.value = "Chosen "+ q.value +" color";
switch(q.value){// check the query
case 'red':
case 'green':
case 'blue':
// location.href = color.value;
alert(color.value); // for testing purposes
return false;
break;
default:
theForm.action="http://www.google.com/search";
break;
};
return true;
}
</script>

Remove the testing code and replace with your own actions.
Good Luck!
:)

iChick
07-29-2009, 11:28 AM
Works perfectly! Thanks! Is it possible to modify it slightly so that only the text after "purple" is submit? So for instance in your example jmrker if someone entered "purple is my favorite color" the alert would show "Found: Other choice is my favorite color". Not sure if this would mean using something other than indexOf.

jmrker
07-29-2009, 02:33 PM
Like this?


if (t.indexOf('purple') != -1) {
alert('Found: Other choice '+q.value.substring(t.indexOf('purple')+6));
return false;
}

Untested code.

Note, message displayed may be somewhat cryptic if input
is not: 'Purple is my favorite color'
where output would be --> 'Found: Other choice is my favorite color'
but is: 'My favorite color is purple'
where output would be --> 'Found: Other choice '

But it is your code to change how you want.
:)

iChick
07-29-2009, 05:04 PM
Works for me! Thanks again jmrker! :)

jmrker
07-29-2009, 07:09 PM
You're most welcome.
Glad I was able to help.
Good Luck!
:)

iChick
07-29-2010, 09:08 PM
Hello again!

I've tried to add a little script to take out any spaces but it's acting a little stange (code below). If you type in 'purpl e' (i.e. with a space in it) the letters after the space appear in the alert?? Any ideas how I can stop that happening? Thanks.


<script type="text/javascript">

function convert(theForm){
var els = theForm.getElementsByTagName('input');// store inputs
var q = els[0], color = els[1];

if(els[4].checked){// submit to google
theForm.action = 'http://www.google.com/search';
return true;
};

// replace following alerts with 'theForm.action' code desired, after testing
var t = q.value.toLowerCase(); t = q.value.replace( /\s/g, "");
if (t.indexOf('purple') != -1) {
alert('Found: Other choice '+q.value.substring(t.indexOf('purple')+6));
return false;
}

color.value = "Chosen "+ q.value +" color";
switch(q.value){// check the query
case 'red':
case 'green':
case 'blue':
// location.href = color.value;
alert(color.value); // for testing purposes
return false;
break;
default:
theForm.action="http://www.google.com/search";
break;
};
return true;
}
</script>


<form name= "myform" onsubmit='return convert(this)'> <input name='q' type='text' />
<input name='color' type='hidden' /> <input type='submit' value=" Enter " />
<br />
<input name="searchType" type="radio" value="" checked="checked" > <label for="all"> My Form </label>
<input name="searchType" type="radio" value="google" onclick="document.myform.action='http://www.google.com/search';" />
<label for="google"> Google Search </label></form>

Philip M
07-29-2010, 09:23 PM
Are you saying that you wish to delete anything in the text string after a space?


str = "purpl e";
str = str.replace(/(.*?\s).*/i, "$1");
alert (str);

iChick
07-29-2010, 10:51 PM
Right now if you type 'Purpl e is my favorite color' the alert shows 'Found: Other choice e is my favorite color'. Notice the 'e' showing in the alert. I only want what is typed after 'purple' to show in the alert, even if the user types 'purpl e', 'pu rple or any other spaces in purple. Is this even possible?

Philip M
07-30-2010, 09:57 AM
t = q.value.replace( /\s/g, ""); // strip spaces
t = t.replace(/purple/,""); // delete "purple"

I have to say that I do not really understand your objective. What is the user types "violet" or "mauve" or "purrple"? Why not simple have four radio buttons, Red, Green, Blue, Other Colour?

iChick
08-02-2010, 12:44 PM
OK I've added that but now it submits to Google (the default) if the user types in 'Purple is my favorite color'?? How do I add the t.replace(/purple/,"") just to the 'if' condition for 'purple'?


<script type="text/javascript">

function convert(theForm){
var els = theForm.getElementsByTagName('input');// store inputs
var q = els[0], color = els[1];

if(els[4].checked){// submit to google
theForm.action = 'http://www.google.com/search';
return true;
};

// replace following alerts with 'theForm.action' code desired, after testing
var t = q.value.toLowerCase(); t = q.value.replace( /\s/g, ""); t = t.replace(/purple/,"");
if (t.indexOf('purple') != -1) {
alert('Found: Other choice '+q.value.substring(t.indexOf('purple')+6));
return false;
}

color.value = "Chosen "+ q.value +" color";
switch(q.value){// check the query
case 'red':
case 'green':
case 'blue':
// location.href = color.value;
alert(color.value); // for testing purposes
return false;
break;
default:
theForm.action="http://www.google.com/search";
break;
};
return true;
}
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum