Need to keep visitor from selecting first choice in drop down

simcoweb · January 4, 2008

This is a PHP/Javascript form field validation issue so thought i'd post here.

I have a drop down menu that is created dynamically via PHP/MySQL. The first selection, however, is static and is basically --Select One-- or similar. I do not want them to ignore selecting so it needs to be made so it can't be selected and alert them. I haven't a clue since i'm more PHP than Javascript oriented. Here's my code for the menu:

function search_form2() {
  echo "<form method='POST' action='search.php'><select name='category'>\r";
  echo "<option>-- Select Category --</option>";
  $sql = "SELECT category FROM categories";
  if ($result = mysql_query($sql)) {
    if (mysql_num_rows($result)) {
      while($row = mysql_fetch_assoc($result)) {
        echo "<option value='{$row['category']}' name='{$row['category']}'>{$row['category']}</option>\n\r";
      }
    }
  }
  echo "</select>\n\r";
  
  // property type form
  echo "<select name='loan_type'>\r";
  $sql2 = "SELECT loantype FROM loan_type";
  if ($results2 = mysql_query($sql2)) {
if (mysql_num_rows($results2)) {
	while($row2 = mysql_fetch_assoc($results2)) {
		echo "<option value='{$row2['loantype']}' name='{$row2['loantype']}'>{$row2['loantype']} </option>\n\r";
	}
}
}
  echo "</select>";
  echo "<input type='submit' name='search' value='Search'>\n</form>";
  }

Somehow I need to 'validate' or 'disable' this choice: echo "<option>-- Select Category --</option>";

Anyone? Thanks in advance!

phpQuestioner · January 4, 2008

<script language="javascript">
function opt(val)
{
var po = document.getElementById('cat').value;
if (po == "ignore")
{
alert("Please Choose A Valid Category!");
}
}
</script>

<select id='cat' name='category' onchange='opt(this.value)'>
<option selected value='ignore'>Select One
<option value='1'>1
</select>

simcoweb · January 4, 2008

First, thanks for the post! Ok, I inserted your code as follows. The <script> items into the <head> tag and the other like so:

function search_form2() {
  echo "<form method='POST' action='search.php'><select id='cat' name='category' onchange='opt(this.value)'>\r";
  echo "<option selected value='ignore'>Select One</option>";
  $sql = "SELECT category FROM categories";
  if ($result = mysql_query($sql)) {
    if (mysql_num_rows($result)) {
      while($row = mysql_fetch_assoc($result)) {
        echo "<option value='{$row['category']}' name='{$row['category']}'>{$row['category']}</option>\n\r";
      }
    }
  }
  echo "</select>\n\r";

Now, when I leave the selection at Select One and the other drop down to whatever, the search still takes place. In other words it's not stopping the search from proceeding. As a result the search is breaking which displays a blank page.

You can see what I have here: http://www.lenderfish.com/search-test.php

There's two drop downs. I'll need to adapt the final code to the second one as well.

phpQuestioner · January 4, 2008

ok - try this instead:

<script langauge="javascript">
function mustValidate(what,alertmsg)
{
with (what)
{
if (value=="ignore")
  {alert(alertmsg);return false;}
else {return true}
}
}

function validateIt(thisform)
{
with (thisform)
{
if (mustValidate(category,"Select A Valid Category!")==false)
  {return false;}
}
}
</script>


<form action='search.php' method='post'onsubmit='return validateIt(this)'>
Category: <select name='category'>
<option select value='ignore'>Select One
<option value='1'>1
</select>
<input type='submit' value='Submit'> 
</form>

the code below will let you validate two select fields:

<script langauge="javascript">
function mustValidate(what,alertmsg)
{
with (what)
{
if (value=="ignore")
  {alert(alertmsg);return false;}
else {return true}
}
}

function validateIt(thisform)
{
with (thisform)
{
if (mustValidate(category,"Select A Valid Category!")==false)
  {return false;}
if (mustValidate(category2,"Select A Valid Category 2!")==false)
  {return false;}
}
}
</script>

<form action='search.php' method='post'onsubmit='return validateIt(this)'>
Category: <select name='category'>
<option select value='ignore'>Select One
<option value='1'>1
</select>

  

Category 2: <select name='category2'>
<option select value='ignore'>Select One
<option value='1'>1
</select>

  

<input type='submit' value='Submit'> 
</form>

emehrkay · January 4, 2008

phpQuestioner's code will alert the user whenever they switch the dropdown to the first value - I dont know if you mind that at all or not.

I would suggest checking on submission of the form, and when you do, you can easily write functionality to check for other fields.

Something like this would work:

//js stuff for the head
onload = function(){
   /**
     * listen for the form submission
     * give your form a unique id. we'll use "form_id"
     */
    var form = document.getElementById('form_id');
    
    /**
     * we'll do the validation here
     * i like to reference elements by their ids as i tend to move them around the dom from time to time
     * so give all of your elements unique ids
     */
    form.onsubumit = function(){
      var error   = false;
      var err_msg = ''; 
      var drop    = document.getElementById('drop_down_id');
      
      //check your drop down value
      if(drop.value === 'ignore'){
          error   = true;
          err_msg = 'Please choose an option from the dropdown \n';
      }
      
      //if there is an error, do not submit the form and alert the error message
      if(error){
          return false;
      }
    };    
};
[code]

[/code]

phpQuestioner · January 4, 2008

emehrkay I thought that was what simcoweb wanted; so I post a resolution to his question right here:

http://www.phpfreaks.com/forums/index.php/topic,175543.msg777708.html#msg777708

but - yeah, at first, I though simcoweb wanted a dom event to validate; but I was wrong.

emehrkay · January 4, 2008

I could be wrong as well. That type of thing is what the onchange event handler is used for

phpQuestioner · January 4, 2008

I could be wrong as well. That type of thing is what the onchange event handler is used for

yeah - your right; that is what I was thinking too

simcoweb · January 4, 2008

Actually, to clarify, what i'd like is for them to not be able to either accidentally OR on purpose try to submit the form without first making a selection. Since the 'default' is Select One and they should try to submit without first selecting an item it should stop them in their tracks. More like: You must select a category prior to submitting the form!

So, realistically it should work both ways.

1) IF they try to submit the form without first selecting an item from each menu, OR

2) IF they try to select the Select One as their selection and attempt to submit

Heh, I should probably do myself a favor and just omit those Select One placeholders But, the purpose is to make sure they make the two necessary selections in order for the search to work properly. Make sense?

phpQuestioner · January 4, 2008

ok - let's try this again - shall we

see if this does the trick:

<script langauge="javascript">
function mustValidate(what,alertmsg)
{
with (what)
{
if (value=="ignore")
  {alert(alertmsg);return false;}
else {return true}
}
}

function validateIt(thisform)
{
with (thisform)
{
if (mustValidate(category,"Select A Valid Category!")==false)
  {return false;}
if (mustValidate(category2,"Select A Valid Category 2!")==false)
  {return false;}
}
}

function opt(val,pick,msg)
{
var po = document.getElementById(pick).value;
if (po == "ignore")
{
alert(""+msg+"");
}
}

</script>

<form action='search.php' method='post'onsubmit='return validateIt(this)'>
Category: <select id='cat' name='category' onchange="opt(this.value,'cat','Select A Valid Category!')">
<option select value='ignore'>Select One
<option value='1'>1
</select>

  

Category 2: <select id="cat2" name='category2' onchange="opt(this.value,'cat2','Select A Valid Category 2!')">
<option select value='ignore'>Select One
<option value='1'>1
</select>

  

<input type='submit' value='Submit'> 
</form>

it's just a combination of both the original and the newest validation scripts. this should do exactly what you want it to do.

simcoweb · January 4, 2008

Bing-goooo! Works like a charm...you Javascript guys rock!

phpQuestioner · January 4, 2008

thanks - we try

Sign In

Need to keep visitor from selecting first choice in drop down

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information