validate textbox php value against mysql database using javascript

Question

rori 0 Newbie Poster

14 Years Ago

hi,
i posted this in the javascript forums but didn't get any replies, maybe this is a better place.

i have a website for properties (rent, sell, etc), using php and mysql. i allow the admin to manage existing properties by selecting the property id from a dropdown

that lists all properties ids from the database, or by directly entering the property id in a textbox and submitting a form to go to this property and edit or delete

it.

now when the admin decides to enter the property id in the textbox instead of selecting it from the dropdown, i need to validate the id they entered and it needs to

exist in the database or i dont submit the form and show them an alert msg that they should enter id for existing property. i would like to do this when they click the

submit button of the form using javascript, where the javascript will get the textbox value and compare it to the results i got from the mysql database using php.

Can you please tell me how to write the javascript function to validate the id? here is my part of the code that has the form:

<form name="form1" method="post" action="<? echo($target_page);?>">
            <table width="90%" height="37" border="0" align="center" cellpadding="5" cellspacing="5">
              <tr>
                <td width="40%">Select property id from the drop down list,</td>
                <td>
                  <select name="id2" style="font-family:Verdana; font-size: 8pt;">
                    <?
                    $reza=mysql_query("select id from $table order by id desc");
                    while ($row=mysql_fetch_array($reza)){
                      $id2=$row["id"];
                      echo " <option value=\"$id2\">$id2</option>";
                    }
                    ?>
                  </select>
									<script language="JavaScript">
                  function submit_form(target_page,this_property){
									var id_value=document.getElementById("id1").value;
                  if(id_value!=""){
                    for(loop php ids here){
	                    if(id_value==php id value here){
  	                  document.location = target_page;
                    }
                    else{
                      alert("id does not exist");
                    }
                  }
									</script>
                </td>
              </tr>
              <tr>
                <td>or type property id in the text box,</td>
                <td><input type="text" name="id1" value="" size="1" /></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td><input type="submit" name="Submit" value="Submit" /></td>
              </tr>
              <tr>
                <td colspan="2">
                  Or find property from the list below.
                </td>
              </tr>
            </table>
            </form>

javascript mysql php

3 Contributors
4 Replies
2K Views
2 Years Discussion Span
Latest Post 12 Years Ago Latest Post by marsystsm123

Atli 182 Posting Pro

14 Years Ago

Hey.

Consider this:
(I wrapped the code into a complete HTML structure just to demonstrate how it *should* be structured. I assume you will have to pull it apart and put it into your own page.)

<?php
// Its best to get most of the PHP stuff out of the way first,
// so it doesn't get lost in the HTML.


// Here we would store all the ID's, so we can use them later
// to populate an identical JavaScript ID array and the <select> box.
$property_ids = array();

$reza = mysql_query("select id from $table order by id desc");
if($reza) {
    while ($row=mysql_fetch_array($reza)){
        $property_ids[] = $row["id"];
    }
}
?>
<html>
    <head>
        <title>Page name</title>
        <script type="text/javascript">
        // A JavaScript array, populated with the propert IDs by PHP.
        var property_ids = [<?php echo implode(",", $property_ids); ?>];

        /**
         * This is thee "form1" onsubmit callback function.
         *  It is called when the form is submitted to verify that the
         *  ID that was selected is valid. It then returns either TRUE
         *  to allow the form to be submitted, or FALSE to prevent it.
         *  (The onsubmit event does that automatically base on what the
         *   function returns.)
         *  
         * @return bool
         */
        function submit_form(){
            var id_value=document.getElementById("id1").value;
            if(id_value!=""){
                var id_exists = false;
                for(var i = 0; i < property_ids.length; i++){
                    if(id_value == property_ids[i]){
                        id_exists = true;
                        break;
                    }
                }
                if(id_exists) {
                    return true;
                }
                else {
                    alert('That ID does not exists. Please try again.');
                    return false;
                }
            }
            return true;
        }
        </script>
    </head>
    <body>
        <form name="form1" method="post" action="<?php echo($target_page);?>" onsubmit="javascript: return submit_form();">
        <table width="90%" height="37" border="0" align="center" cellpadding="5" cellspacing="5">
          <tr>
            <td width="40%">Select property id from the drop down list,</td>
            <td>
              <select name="id2" style="font-family:Verdana; font-size: 8pt;">
              <?php
                // Instead of doing the SQL query here, like you did, I simply
                // use the ID list from the top of the page to fill this part in.
                foreach($property_ids as $_id) {
                    " <option value=\"{$_id}\">{$i_id}</option>"
                }
              ?>
              </select>
            </td>
          </tr>
          <tr>
            <td>or type property id in the text box,</td>
            <td><input type="text" name="id1" value="" size="1" /></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><input type="submit" name="Submit" value="Submit" /></td>
          </tr>
          <tr>
            <td colspan="2">
              Or find property from the list below.
            </td>
          </tr>
        </table>
        </form>
    </body>
</html>

There are a few things you should consider:

Using short-tags <? ... ?> is generally discouraged, because they make your code less portable, and make it *likely* that it will require extra maintainance in the future.
You should always try to use the full <?php ... ?> tags instead.

// This type of script tag is deprecated.
<script language="javascript">...</script>

// You should do 
<script type="text/javascript">...</script>

// Or at least include the "type" attribute
<script type="text/javascript" language="javascript">...</script>

You should check out CSS and try to put your styles in external .css files. It makes the HTML easier to read, makes it easier to change the styles later, and generally improves your page load performance. (Browsers can cache external .css files)
Using tables to set up the layout of you page is baaaad :P
They are slower to render and less dependable than normal block elements and CSS. (Certain browsers *cough*IE*cough* tend to render tables inconsistently, which can cause problems in your layout.)

Edited 14 Years Ago by Atli because: Minor copy/paste malfunction :P

rori commented: very useful, posted the solution and threw in some tips +4

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

rori 0 Newbie Poster · Answer 1 · 2010-01-12T06:59:40+00:00

hey Atli,

thanks a lot for your answer and coding tips.

I tried your solution and it worked perfectly! there is only one issue now, the onsubmit is not working on firefox, chrome or safari, but it's working fine on ie (strange ie is the good one in this!) i'm searching google now for this and it seems like a common problem, as i found many results for "form onsubmit firefox not working". i'm checking the results now and i'll post back the solution when i find it.

regarding the tips you mentioned, i do use a separate file for css usually, but the code i'm working on that i pasted here, is actually someone else's code and i'm just fixing some bugs for a friend because that other person who originally did the code for him disappeared. so after i finish the big bugs i will move all css together.

but the other tips you mentioned are good to know thanks. i'll take them in consideration especially not using tables that much. the problem is that i'm not very good with divs and positioning them so when i'm in a hurry i use tables because i can finish faster.

thanks again for your reply when no one else did!

rori 0 Newbie Poster · Answer 2 · 2010-01-12T07:14:54+00:00

ok i found the problem, i am using getElementById while i didn't specify id for the element! i added the id and now it's working fine. thanks Atli for your great help.

marsystsm123 0 Newbie Poster · Answer 3 · 2012-06-10T21:27:34+00:00

Hello,
I am facing problem to retrieve data from a mysql table according to the given value in a text box and to show the data in a web page.
Could you please help me in this regards,
it's my urgent need to submit my project.