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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Location
    California
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Checking Text based on Option Selected

    I'm taking a beginning javascript class and have been trying to figure out one last part of a homework assignment and am just not seeing how to work it out. Any help is greatly appreciated!

    What I'm having trouble with is doing the text verification. When a user selects an option from the select list they then need to type in the text area given. If the user doesn't type the word selected in the list then an error message should appear under the text area. If you look at my code you'll see that I have the text_check() function doing the verification. I can get it to work when there is only one option but once I add the other two it stops working. I've tried if... else and other variations, but can't seem to nail it down. Thanks!

    Code:
    function select_function()
    {
     var medical=document.getElementById("medical_list")
     var selected_item=medical.selectedIndex
     if (selected_item==0)
     {
     	document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Medication" + "</span>"+ " Information"
    	var comments=document.getElementById("comments");
    	comments.focus();
    	
     }
     if (selected_item==1)
     {
     	document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Hospitalization" + "</span>"+ " Information"
    	var comments=document.getElementById("comments");
    	comments.focus();
     }
     if (selected_item==2)
     {
     	document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Physician" + "</span>"+ " Information"
    	var comments=document.getElementById("comments");
    	comments.focus();
     }
     
    }
    
    function text_check()
    {
      var user_comments=document.getElementById("comments").value.toLowerCase(); 
    	var med_comment=user_comments.indexOf('medication');
    	var hosp_comment=user_comments.indexOf('hospitalization');
    	var phys_comment=user_comments.indexOf('physician');	
    
     	mySelectList = document.getElementById("medical_list");
     
     	if (mySelectList.value='Medication' && med_comment==-1) 
    	{
    	 document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Medication"+"</span>"+" somewhere in the text"; 
    	}
    	
    	if (mySelectList.value='Hospitalization' && hosp_comment==-1)
     	{
     		document.getElementById("word_error").innerHTML="You need to  have the word,"+"<span style='color:red'>"+" Hospitalization"+"</span>"+" somewhere in the text";
    	}	
    	
    	if (mySelectList.value= 'Physician' && phys_comment==-1)
    	{
     	 document.getElementById("word_error").innerHTML="You need to have   the word,"+"<span style='color:red'>"+" Physician"+"</span>"+" somewhere in the text";
    	}
    }
    	
    function submit_alert()
    {
     alert("You submitted the form")
    }
    
    function clear_error()
    {
     document.getElementById("word_error").innerHTML=""; 
    }
    
    function changeDR()
    {
     var my_textarea=document.getElementById("comments");
     
     var comment_string=my_textarea.value;
     
     var doctor=comment_string.indexOf('Dr.');
    
     var comment_string2='';
     
     if (comment_string < 0)
     {
     	comment_string2=comment_string
     } else {
     	 			comment_string2=comment_string.replace('Dr.','Doctor')
     }
     my_textarea.value=comment_string2;
     
    }
    </script>
    </head>
    <body style="background-color: silver">
    <h2>Medical History</h2>
    
    Select Category: <br>
    <select id="medical_list" onChange="select_function();">
    <option>Medication</option>
    <option>Hospitalization</option>
    <option>Physician</option>
    </select>
    <br><br><br>
    
    <div id="enter_info">Enter Your <font color="blue">Medication</font> Information:</div>
    <br>
    
    <form method="post" action="">
    <textarea id="comments" cols="60" rows="15" onBlur="text_check();" onFocus="clear_error();" onkeyup="changeDR();">
    </textarea><br>
    <div id="word_error"></div><br>
    <input type="submit" value="Submit Information" onClick="submit_alert();"/>
    </form>
    
    
    </body>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,913
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Two principal errors:-

    if (mySelectList.value== 'Medication' && med_comment==-1); // and elsewhere

    <select id="medical_list" onChange="select_function();">
    <option>Select .....</option>
    <option>Medication</option>
    <option>Hospitalization</option>
    <option>Physician</option>
    </select>
    Otherwise for Medication there is no onchange event to trigger the function.

    and change to if (selected_item==1), (selected_item == 2) etc. And block submission of the form if selected_item == 0 or if the textarea has not been filled in.

    "In the beginner's mind there are many possibilities, but in the expert's mind there are few” - Shunryu Suzuki (Japanese Zen priest, ?-1971)
    Last edited by Philip M; 12-06-2010 at 05:02 PM.

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Location
    California
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much for your help!


  •  

    Posting Permissions

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