Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    26
    Thanks
    11
    Thanked 0 Times in 0 Posts

    indexOf to recognize part of user input

    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:

    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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    Ummm...just exactly as you stated it.
    Code:
    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.

  • Users who have thanked Old Pedant for this post:

    iChick (07-29-2009)

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Try this ...

    Assuming I understand the problem, see if this modification is of any use to you.
    Code:
    <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!

  • Users who have thanked jmrker for this post:

    iChick (07-29-2009)

  • #4
    New Coder
    Join Date
    Apr 2008
    Posts
    26
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Like this?
    Code:
      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.

  • Users who have thanked jmrker for this post:

    iChick (07-29-2009)

  • #6
    New Coder
    Join Date
    Apr 2008
    Posts
    26
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Works for me! Thanks again jmrker!

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    You're most welcome.
    Glad I was able to help.
    Good Luck!

  • #8
    New Coder
    Join Date
    Apr 2008
    Posts
    26
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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>

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Are you saying that you wish to delete anything in the text string after a space?

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

  • #10
    New Coder
    Join Date
    Apr 2008
    Posts
    26
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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?

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Code:
    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?
    Last edited by Philip M; 07-30-2010 at 09:04 AM.

  • #12
    New Coder
    Join Date
    Apr 2008
    Posts
    26
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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'?

    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •