title: input type="image" is not working in PHP using AJAX
body: <p>In my PHP application, I'm using AJAX so as to display the search results in the div, without refreshing the page.</p>
  
  <p>here's my search_profile.php</p>
  
  <pre><code>&lt;?php
  session_start();
  ob_start();
  include('connection.php');
  $query_religion="SELECT DISTINCT religion FROM religion_caste_table";
  $result_religion = mysql_query($query_religion, $con);
  ?&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;script type="text/javascript" src="AJAX/religion_caste.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="search"&gt;
  &lt;table width="650px" border="0" cellspacing="0" cellpadding="0" align="center"&gt;
  &lt;tr&gt;
  &lt;td width="460px"&gt;
  &lt;div id="search_box"&gt;
     &lt;h2&gt;Search With Filter&lt;/h2&gt;
      &lt;form method="post" action="javascript:search_profile(document.getElementById('search_form'));"
           id="search_form" name="search_form"&gt;  
       &lt;table cellpadding="0" width="460px" cellspacing="0" border="0" align="center"&gt; 
               &lt;tr&gt;
               &lt;td width="11px" height="5"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="12px"/&gt;
               &lt;/tr&gt;
  
               &lt;tr&gt;
               &lt;td align="center" width="11px"/&gt;
               &lt;td align="center" width="100px"&gt;
               &lt;label for="search"&gt;&amp;nbsp Searching:&lt;/label&gt;
               &lt;/td&gt;
               &lt;td align="center" width="11px"/&gt;
               &lt;td align="center" colspan="5" width="322" bgcolor=""&gt;
                  &lt;select name="search_gender" id="search_gender" style="width:322px;"&gt;
                      &lt;option value="Female"&gt;Bride&lt;/option&gt;
                      &lt;option value="Male"&gt;Groom&lt;/option&gt;
                  &lt;/select&gt;
               &lt;/td&gt;
               &lt;td align="center" width="12"/&gt;
               &lt;/tr&gt;
  
               &lt;tr&gt;
               &lt;td width="11px" height="5px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="12px"/&gt;
               &lt;/tr&gt;
  
               &lt;tr&gt;
               &lt;td align="center" width="11px"/&gt;
               &lt;td align="center" width="100px"&gt;
               &lt;label for="from_age"&gt;&amp;nbsp  From:&lt;/label&gt;
               &lt;/td&gt;
               &lt;td align="center" width="11px"/&gt;
               &lt;td align="center" width="100px"&gt;
                   &lt;select name="from_age" id="from_age" class="dropdown" style="width: 100px"&gt;
                      &lt;option value="18"&gt;18&lt;/option&gt;
                      &lt;option value="19"&gt;19&lt;/option&gt;
                      &lt;option value="20"&gt;20&lt;/option&gt;
                      &lt;option value="21"&gt;21&lt;/option&gt;
                      &lt;option value="22"&gt;22&lt;/option&gt;
                      &lt;option value="23"&gt;23&lt;/option&gt;
                      &lt;option value="24"&gt;24&lt;/option&gt;
                      &lt;option value="25"&gt;25&lt;/option&gt;
                      &lt;option value="26"&gt;26&lt;/option&gt;
                      &lt;option value="27"&gt;27&lt;/option&gt;
                      &lt;option value="28"&gt;28&lt;/option&gt;
                      &lt;option value="29"&gt;29&lt;/option&gt;
                      &lt;option value="30"&gt;30&lt;/option&gt;
                      &lt;option value="31"&gt;31&lt;/option&gt;
                      &lt;option value="32"&gt;32&lt;/option&gt;
                      &lt;option value="33"&gt;33&lt;/option&gt;
                      &lt;option value="34"&gt;34&lt;/option&gt;
                      &lt;option value="35"&gt;35&lt;/option&gt;
                      &lt;option value="36"&gt;36&lt;/option&gt;
                      &lt;option value="37"&gt;37&lt;/option&gt;
                  &lt;/select&gt;
               &lt;/td&gt;   
               &lt;td align="center" width="11px"/&gt;
               &lt;td align="center" width="100px"&gt;
               &lt;label for="to_age"&gt;&amp;nbsp  To:&lt;/label&gt;
               &lt;td align="center" width="11px"/&gt;
               &lt;td align="center" width="100px"&gt;
                   &lt;select name="to_age" id="to_age" class="dropdown" style="width: 100px"&gt;
                      &lt;option value="18"&gt;18&lt;/option&gt;
                      &lt;option value="19"&gt;19&lt;/option&gt;
                      &lt;option value="20"&gt;20&lt;/option&gt;
                      &lt;option value="21"&gt;21&lt;/option&gt;
                      &lt;option value="22"&gt;22&lt;/option&gt;
                      &lt;option value="23"&gt;23&lt;/option&gt;
                      &lt;option value="24"&gt;24&lt;/option&gt;
                      &lt;option value="25"&gt;25&lt;/option&gt;
                      &lt;option value="26"&gt;26&lt;/option&gt;
                      &lt;option value="27"&gt;27&lt;/option&gt;
                      &lt;option value="28"&gt;28&lt;/option&gt;
                      &lt;option value="29"&gt;29&lt;/option&gt;
                      &lt;option value="30"&gt;30&lt;/option&gt;
                      &lt;option value="31"&gt;31&lt;/option&gt;
                      &lt;option value="32"&gt;32&lt;/option&gt;
                      &lt;option value="33"&gt;33&lt;/option&gt;
                      &lt;option value="34"&gt;34&lt;/option&gt;
                      &lt;option value="35"&gt;35&lt;/option&gt;
                      &lt;option value="36"&gt;36&lt;/option&gt;
                      &lt;option value="37"&gt;37&lt;/option&gt;
                  &lt;/select&gt;
               &lt;td align="center" width="12px"/&gt;
               &lt;/tr&gt;
  
               &lt;tr&gt;
               &lt;td width="11px" height="5px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="12px"/&gt;
               &lt;/tr&gt;
  
               &lt;tr&gt;
               &lt;td align="center" width="11px"/&gt;
               &lt;td align="center" width="100px"&gt;
               &lt;label for="religion"&gt;&amp;nbsp  Religion:&lt;/label&gt;
               &lt;/td&gt;
               &lt;td align="center" width="11px"/&gt;
               &lt;td align="center" width="100px"&gt;
                   &lt;select name="religion" id="religion" class="dropdown" 
                   onChange="showcaste(this.value)" style="width: 100px"&gt;
                      &lt;?php
                            while($q_rel_data = mysql_fetch_array($result_religion))
                             {?&gt;
                              &lt;option value="&lt;?php echo $q_rel_data[0]; ?&gt;"&lt;?php if($row_social[religion] ==  $q_rel_data[0]) echo ' selected="selected"'; ?&gt;&gt;
                              &lt;?php echo $q_rel_data[0]; ?&gt;
                              &lt;/option&gt;
                              &lt;?php }?&gt;
                   &lt;/select&gt;
               &lt;/td&gt;   
               &lt;td align="center" width="11px"/&gt;
               &lt;td align="center" width="100px"&gt;
               &lt;label for="caste"&gt;&amp;nbsp  Caste:&lt;/label&gt;
               &lt;td align="center" width="11px"/&gt;
               &lt;td align="center" width="100px" &gt;
                  &lt;select name="caste" id="caste" class="dropdown" style="width: 100px"&gt;
                  &lt;/select&gt;
               &lt;td align="center" width="12px"/&gt;
               &lt;/tr&gt;
  
               &lt;tr&gt;
               &lt;td width="11px" height="4px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="12px"/&gt;
               &lt;/tr&gt;
  
               &lt;tr&gt;
               &lt;td align="center" width="11px"/&gt;
               &lt;td align="center" width="100px"&gt;
               &lt;label for="community"&gt;&amp;nbsp Comunity:&lt;/label&gt;
               &lt;/td&gt;
               &lt;td align="center" width="11px"/&gt;
               &lt;td align="center" width="100px"&gt;
                  &lt;select name="community" id="community" class="dropdown" style="width: 100px"&gt;
                            &lt;?php 
                            $community=array("Assami","Bengali","Bihari","Gujarati","Marwari","Rajasthani","Tamil","Telugu");
                            foreach ($community as $value)
                              {?&gt;
                            &lt;option value="&lt;?php echo $value; ?&gt;"&lt;?php if($row_social[community] ==  $value) echo ' selected="selected"'; ?&gt;&gt;&lt;?php echo $value; ?&gt;
                            &lt;/option&gt;
                            &lt;?php } ?&gt;
                         &lt;/select&gt;
               &lt;/td&gt;   
               &lt;td align="center" width="11px"/&gt;
               &lt;td align="center" width="100px"&gt;
               &lt;label for="occupation"&gt;&amp;nbsp  Occupation:&lt;/label&gt;
               &lt;td align="center" width="11px"/&gt;
               &lt;td align="center" width="100px"&gt;
                  &lt;select name="occupation" id="occupation" style="width: 100px"&gt;
                            &lt;?php 
                            $occupation=array("Doctor","Engineer","Dentist","Civil Service","Military","Police","Govt. Service","Judiciary","Business","Private Job", "IT Professional","Teacher","Faculty","Sportsperson");
                            foreach ($occupation as $value)
                              {?&gt;
                            &lt;option value="&lt;?php echo $value; ?&gt;"&lt;?php if($row_professional[occupation] ==  $value) echo ' selected="selected"'; ?&gt;&gt;&lt;?php echo $value; ?&gt;
                            &lt;/option&gt;
                            &lt;?php } ?&gt;
                         &lt;/select&gt;    
               &lt;td align="center" width="12px"/&gt;
               &lt;/tr&gt;
  
               &lt;tr&gt;
               &lt;td width="11px" height="4px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="12px"/&gt;
               &lt;/tr&gt;
  
               &lt;tr&gt;
                &lt;td align="center" colspan="9"&gt;
               &lt;input type="submit" name="Search" value="Search" class="button" style="width: 250px;"/&gt;
               &lt;/td&gt;
               &lt;/tr&gt;
  
               &lt;tr&gt;
               &lt;td width="11px" height="4px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="11px"/&gt;
               &lt;td width="100px"/&gt;
               &lt;td width="12px"/&gt;
               &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  &lt;td width="190px"&gt;
  &lt;div id="search_by_name"&gt;
   &lt;h2&gt;Search By Name&lt;/h2&gt;
       &lt;form method="post" action=""&gt;
       &lt;table width="190px" cellpadding="0" cellspacing="0" border="0" align="center"&gt;
           &lt;tr&gt;
           &lt;td align="center"&gt;Enter Name&lt;/td&gt;
           &lt;td align="center"&gt;
              &lt;input type="text" id="name_to_search" name="name_to_search" class="textfield"
              style="width: 100px;"/&gt;
           &lt;/td&gt;  
           &lt;/tr&gt;
           &lt;tr&gt;
           &lt;td colspan="2"&gt;&amp;nbsp
           &lt;/td&gt;
           &lt;tr&gt;
           &lt;td align="center" colspan="2"&gt;
              &lt;input type="submit" id="search_pro" name="search_pro" class="button" 
              style="width: 100px;" align="center" /&gt;
           &lt;/td&gt;    
           &lt;/tr&gt;
       &lt;/table&gt;
       &lt;/form&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td colspan="2"&gt;
  &lt;div id="search_profile_result"&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>now here's my ajax script AjaxSearchProfile.js</p>
  
  <pre><code>var http_request = false;
  function makePOSTRequestProfile(url, parameters) {
  http_request = false;
  if (window.XMLHttpRequest) { // Mozilla, Safari,...
  http_request = new XMLHttpRequest();
  if (http_request.overrideMimeType) {
  // set type accordingly to anticipated content type
  //http_request.overrideMimeType('text/xml');
  http_request.overrideMimeType('text/html');
  }
  } else if (window.ActiveXObject) { // IE
  try {
  http_request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  try {
  http_request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e) {}
  }
  }
  if (!http_request) {
  alert('Cannot create XMLHTTP instance');
  return false;
  }
  
  http_request.onreadystatechange = alertSearchContents;
  http_request.open('POST', url, true);
  http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", parameters.length);
  http_request.setRequestHeader("Connection", "close");
  http_request.send(parameters);
  }
  
  function alertSearchContents() {
  if (http_request.readyState == 4) {
  if (http_request.status == 200) {
  //alert(http_request.responseText);
  result = http_request.responseText;
  document.getElementById('search_profile_result').innerHTML = result;
  } else {
  alert(http_request.status);
  }
  }
  }
  
  function search_profile(obj) 
  {
  
  alert("huhu");
  var poststr = "gender=" + encodeURI( document.getElementById("search_gender").value ) +
  "&amp;from_age=" + encodeURI( document.getElementById("from_age").value ) +
  "&amp;to_age=" + encodeURI( document.getElementById("to_age").value ) +
  "&amp;religion=" + encodeURI( document.getElementById("religion").value ) +
  "&amp;caste=" + encodeURI( document.getElementById("caste").value ) +
  "&amp;community=" + encodeURI( document.getElementById("community").value ) +
  "&amp;occupation=" + encodeURI( document.getElementById("occupation").value );
  alert(poststr);
  makePOSTRequestProfile('search.php', poststr);
  }
  </code></pre>
  
  <p>and the ultimately the search.php where the query is worked on..</p>
  
  <pre><code>&lt;?php
  include('connection.php');
  $sex=$_POST['gender'];
  $from_age=$_POST['from_age'];
  $to_age=$_POST['to_age'];
  $religion=$_POST['religion'];
  $caste=$_POST['caste'];
  $community=$_POST['community'];
  $occupation=$_POST['occupation'];
  
  $sql_search="SELECT t1.username, t1.name, t1.age, t1.dob, t1.propic, t2.religion, t2.caste, t3.education, t3.occupation
  FROM candidate_register_table as t1
  LEFT JOIN candidate_social_table as t2 ON 
  t1.username = t2.username and t2.caste = '$caste' and t2.religion ='$religion' and t2.community ='$community'
  LEFT JOIN candidate_professional_table as t3 ON 
  t1.username = t3.username and t3.occupation = '$occupation' WHERE t1.sex = '$sex'";
  
  
  $result_search=mysql_query($sql_search,$con);
  if($result_search)
      {
         echo "&lt;table border='0' cellspacing='0' cellpadding='0' width='650px' align='center'&gt;";
         while($row=mysql_fetch_array($result_search))
            {
  
               echo "&lt;tr&gt;";
               echo "&lt;form method='post' action='profile/exp.php' name='showid' id='showid'&gt;";
               echo "&lt;td&gt;&lt;input type='hidden' name='pro_username' value='" . $row['username'] . "'/&gt;&lt;/td&gt;";
               echo "&lt;td&gt;&lt;input type='image' src='" . $row['propic'] ."' style='width:30px;'/&gt;&lt;/td&gt;";
               echo "&lt;td&gt;&lt;FONT COLOR=blue FACE='Geneva, Arial' SIZE=2&gt;" . $row['username'] . " ::" . "&lt;/font&gt;&lt;/td&gt;";
               echo "&lt;td&gt;&lt;FONT COLOR=blue FACE='Geneva, Arial' SIZE=2&gt;" . $row['name'] . " ::" . "&lt;/font&gt;&lt;/td&gt;"; 
               echo "&lt;td&gt;&lt;FONT COLOR=blue FACE='Geneva, Arial' SIZE=2&gt;" . $row['religion'] . " ::" . "&lt;/font&gt;&lt;/td&gt;"; 
               echo "&lt;td&gt;&lt;FONT COLOR=blue FACE='Geneva, Arial' SIZE=2&gt;" . $row['caste'] . " ::" . "&lt;/font&gt;&lt;/td&gt;";
               echo "&lt;td&gt;&lt;FONT COLOR=blue FACE='Geneva, Arial' SIZE=2&gt;" . $row['occupation'] . " ::" . "&lt;/font&gt;&lt;/td&gt;"; 
               echo "&lt;td&gt;&lt;input type='submit' name='submit' id='submit'/&gt;&lt;/td&gt;";
               echo "&lt;/form&gt;";
               echo"&lt;/tr&gt;";
  
  
          }
          echo "&lt;/table&gt;";
      }
  else
     die('Error: ' . mysql_error());
  
  
  
  ?&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now if you can see, the search results are displayed inside the <code>div id="search_profile result"</code> in the <code>search_profile.php</code>.</p>
  
  <p>The fact is, the search result are displayed as the desired way, but now
  as you can see, in the search.php I am printing the results as well as i'm using a <code>input type="image"</code> which ought to act like a submit button so that when it will be clicked, the username which is assigned to the <code>input type="hidden"</code> will be posted to the file <code>"profile/exp.php"</code>.</p>
  
  <p>But the result I mean value of the input type="hidden" is not getting posted or rather only blaNK value is posted.</p>
  
  <p>here's the profile/exp.php:</p>
  
  <pre><code>&lt;?php
  session_start();
  ob_start();
  $showpro=$_POST['pro_username'];
  echo $showpro;
  ?&gt;
  </code></pre>
  
  <p>It ought to display the result i.e username, but its not displaying. I can't find the answer why; I have used this method earlier in another album cretaing application but it worked. My search query and procedure is perfect, otherwise it won't have displayed the result, but don't know why the input type="image" not working. Similarly I experimented with a submit button also as you can see, but that submit button is also not working.</p>
  
  <p><strong>Update</strong></p>
  
  <p>This following lines are not working, i.e the input type="image" and input type="submit"</p>
  
  <pre><code>$result_search=mysql_query($sql_search,$con);
  if($result_search)
      {
         echo "&lt;table border='0' cellspacing='0' cellpadding='0' width='650px' align='center'&gt;";
         while($row=mysql_fetch_array($result_search))
            {
  
               echo "&lt;tr&gt;";
               echo "&lt;form method='post' action='profile/exp.php' name='showid' id='showid'&gt;";
               echo "&lt;td&gt;&lt;input type='hidden' name='pro_username' value='" . $row['username'] . "'/&gt;&lt;/td&gt;";
               echo "&lt;td&gt;&lt;input type='image' src='" . $row['propic'] ."' style='width:30px;'/&gt;&lt;/td&gt;";
               echo "&lt;td&gt;&lt;FONT COLOR=blue FACE='Geneva, Arial' SIZE=2&gt;" . $row['username'] . " ::" . "&lt;/font&gt;&lt;/td&gt;";
               echo "&lt;td&gt;&lt;FONT COLOR=blue FACE='Geneva, Arial' SIZE=2&gt;" . $row['name'] . " ::" . "&lt;/font&gt;&lt;/td&gt;"; 
               echo "&lt;td&gt;&lt;FONT COLOR=blue FACE='Geneva, Arial' SIZE=2&gt;" . $row['religion'] . " ::" . "&lt;/font&gt;&lt;/td&gt;"; 
               echo "&lt;td&gt;&lt;FONT COLOR=blue FACE='Geneva, Arial' SIZE=2&gt;" . $row['caste'] . " ::" . "&lt;/font&gt;&lt;/td&gt;";
               echo "&lt;td&gt;&lt;FONT COLOR=blue FACE='Geneva, Arial' SIZE=2&gt;" . $row['occupation'] . " ::" . "&lt;/font&gt;&lt;/td&gt;"; 
               echo "&lt;td&gt;&lt;input type='submit' name='submit' id='submit'/&gt;&lt;/td&gt;";
               echo "&lt;/form&gt;";
               echo"&lt;/tr&gt;";
  
  
          }
          echo "&lt;/table&gt;";
      }
  else
     die('Error: ' . mysql_error());
  </code></pre>