getting a value from database on the bases of javascript

Question

I have got a file in which we have a web form to submit. There are 4 to 5 dropdows are in this form. Three of them are dependent on one another. When a value from the first dropdown is selected there is function which triggers a function "document.formName.submit()" it refreshes the whole page and the query of mySql executes and we get a new value for the next field and so on. I don't want the refresh to happen. Can I do this process without a page refresh and get the a value from database.

Here is the portion of that code

    <div class="ca-box">
    <div class="bold child1">Country<span class="validation"> *</span></div>
    <div class="child2">
      <select id="cid" name="cid" onchange="javascript:submit_form() ;">
        <?
        $query = "SELECT * FROM country"; 
        $result = $DB->DB_Query($query); 
        ?>
        <option value="">- Select Country -</option>
        <?
        for($i = 0; $i < count($result); $i++){
            if ($cid == $result[$i]['cid']) {
                echo "<option value=\"".$result[$i]['cid']."\" selected=\"selected\">".$result[$i]['country']."</option>"; 
            } else {
                echo "<option value=\"".$result[$i]['cid']."\" >".$result[$i]['country']."</option>"; 
            }
        } ?>
      </select>
    </div>
  </div>
  <div class="ca-box">
    <div class="bold child1">Region<span class="validation"> *</span></div>
    <div class="child2">
    <? echo $_POST['cid']." ==="?>
      <select id="rid" name="rid" onchange="javascript:submit_form2();">
        <?
        $query = "SELECT * FROM region where cid=".$cid; 
        $result = $DB->DB_Query($query); 
        ?>
        <option value="">- Select Region -</option>
        <?
        for($i = 0; $i < count($result); $i++){
            if ($rid == $result[$i]['rid']) {
                echo "<option value=\"".$result[$i]['rid']."\" selected=\"selected\">".$result[$i]['region']."</option>"; 
            } else {
                echo "<option value=\"".$result[$i]['rid']."\" >".$result[$i]['region']."</option>"; 
            }
        } ?>
        <option value="Other">Other</option>
      </select>
    </div>
  </div>
  <div class="ca-box">
    <div class="bold child1">City<span class="validation"> *</span></div>
    <div class="child2">
      <select id="ccid" name="ccid">
        <?
        $query = "SELECT * FROM city where rid =".$rid; 
        $result = $DB->DB_Query($query); 
        ?>
        <option value="">- Select City -</option>
        <?
        for($i = 0; $i < count($result); $i++){
            if ($ccid == $result[$i]['ccid']) {
                echo "<option value=\"".$result[$i]['ccid']."\" selected=\"selected\">".$result[$i]['city']."</option>"; 
            } else {
                echo "<option value=\"".$result[$i]['ccid']."\" >".$result[$i]['city']."</option>"; 
            }
        } ?>
        <option value="Other">Other</option>
      </select>
    </div>
  </div>

  <script type="text/javascript">
  function submit_form(location) {
    //document.formName.type.value="location";
    //document.formName.action = document.formName.action + "#" + location
    document.formName.ccid.value = "";
    document.formName.rid.value = "";
    document.formName.submit();
    return true;
}
function submit_form2(location) {
    //document.formName.type.value="location";
    //document.formName.action = document.formName.action + "#" + location
    document.formName.ccid.value = "";
    document.formName.submit();
    return true;
}
  </script>

USe Jquery Ajax and fill your drop down as per the selection. You can use `onchange` event of the dropdown to call your ajax function and bind the new drop down. — Murtaza, Jan 11 '14 at 07:43
yes, return false on the `submit()` and use an ajax request to get the data. — manta, Jan 11 '14 at 07:44
I have tried but when I use the submit() method it refreshes the whole page. — safeer008, Jan 11 '14 at 07:45
As you posted no code it is impossible to tell. I suppose those lists are static so why not write a bit more complex JS keeping everything on the client side? — Ed Heal, Jan 11 '14 at 07:46
I have tried ajax but it is not working on the onchange event. — safeer008, Jan 11 '14 at 07:46

score 0 · Answer 1 · edited May 23 '17 at 12:29

I recommend using jQuery for AJAX calls since the jQuery team simplified the process for you.

I suggest doing a search on "JQuery AJAX and php to fetch data from a mysql database". You'll find many resources that demonstrate how to obtain those values that you're trying to fetch.

Also, do not use document.formName.submit() for retrieving values. Javascript is a client-side language that should be able to use AJAX to retrieve the info without having to "submit" or refresh the page.

For related StackOverflow question: jQuery Ajax POST example with PHP

For further documentation on jQuery AJAX call: http://api.jquery.com/jquery.ajax/

Good luck.

getting a value from database on the bases of javascript

1 Answers1