unable to run php function to update db value using document.write

Question

In the code given below, I am using a repeater field to store the image links and ranks. In the front-end I am trying to implement something like this: when I select a different rank for an image and click on update rank button the page should update the rank in the database and reload the page with new rank. However, the code removes the rank totally when any button is clicked. On troubleshooting, I found that the document.write is not passing the values to the function. Given below, is my code:

<form id="myform" name="myform" action="" method="POST" >
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">

<?php   
global $post;

$bookid=get_the_title($post->ID);;
$args = get_posts(array('post_type' => 'bookgallery' ,'post_title' =>$bookid, 'posts_per_page' => -1
));
?>

<?php
foreach ( $args as $post ) :  setup_postdata($post);

if (!empty($post))
    {  
    $allimg=$allrank=array();

    while( have_rows('imgs') ): the_row();
    $temprank=get_sub_field('rank',$post->ID);  
    $tempimg=get_sub_field('imglink',$post->ID);

    $allimg[]=$tempimg;
    $allrank[]=$temprank;

    if ($temprank=='1st') {
    $rank1img= $tempimg;
    $rank1='1st';
    } 
    if ($temprank=='2nd') {
    $rank2img= $tempimg;
    $rank2='2nd';
    } 
    if ($temprank=='3rd') {
    $rank3img=$tempimg;
    $rank3='3rd'
    } 



    endwhile;

    if (!empty($rank1img)){
    ?>
    <div >

    <img src="<?php echo $rank1img; ?>" alt="" >

    <div >1st
        <select name="rank1">
            <option value="0"> </option>
            <option value="1">1st</option>
            <option value="2">2nd</option>
            <option value="3">3rd</option>
            <option value="4">act</option>           
                </select>
    </div>   

    <div ><input type="submit" name="rank1btn" value="update rank" id="rank1btn" onclick="document.write('<?php updatemypage($rank1img,$_POST['rank1']); ?>')" ></div>   
    </div>   
    <?php } 
    if (!empty($rank2img)){
    ?>
    <div >2nd

    <img src="<?php echo $rank2img; ?>" alt="" > 

    <div >
        <select name="rank2">
            <option value="0"> </option>
            <option value="1">1st</option>
            <option value="2">2nd</option>
            <option value="3">3rd</option>
            <option value="4">act</option>
                </select>
    </div>   

    <div ><input type="submit" name="rank2btn" value="update rank" id="rank2btn" onclick="document.write('<?php updatemypage($rank2img,$_POST['rank2']); ?>')" ></div>     
    </div>
     <?php } 
    if (!empty($rank3img)){
    ?>   

     <div>3rd  

    <img src="<?php echo $rank3img; ?>" alt="" >   
    <div>
        <select name="rank3">
            <option value="0"> </option>
            <option value="1">1st</option>
            <option value="2">2nd</option>
            <option value="3">3rd</option>
            <option value="4">act</option>
                </select>
    </div>   

    <div><input type="submit" name="rank3btn" value="update rank" id="rank3btn" onclick="document.write('<?php updatemypage($rank3img,$_POST['rank3']); ?>')"  ></div>     
    </div>
     <?php }    

?>


    }

}     

 endforeach; ?>

</article> 
</form>
<?php

function update_ranks($newimgurl,$newrank){

switch ($newrank)
{
case "1":
      $rank="1st";
      break;
case "2":
      $rank="2nd";
      break;
case "3":
      $rank="3rd";
      break;


}


        $field_key = "field_582fdg46";  
        $value=array();
        $count=0;
        global $totalimgs;
        global $allimgurl;          
                global $allimgranks;               

        while ($count < $totalimgs){

        if ($allimgurl[$count]==$newimgurl){
        $value[] = array("imglink" => $newimgurl,"rank" => $rank );

        }
        else{
        $value[] = array("imglink" => $allimgurl[$count],"rank" => $allimgranks[$count] );      
        }
        $count=$count+1;        
        update_field( $field_key, $value, $post->ID);


        }
        unset($newrank,$newimgurl,$currentnewrank,$rank,$count);    
        unset($allimgurl,$allimgranks,$totalimgs,$value);   


}
?>

Answer 1

The comments say it all but I'll sum up. PHP as a server side language is evaluated before the code reaches your browser - on the other hand javascript as a client side language executes only after your browser has received the information from the server. To use javascript to call a php function you'll need to make an asynchronous request (if you don't want your page to reload at least). An example Ajax request (from http://www.w3schools.com/php/php_ajax_php.asp):

var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET", "gethint.php?q=" + str, true);
    xmlhttp.send();

Also in your php code you'll need a function that returns the needed information called like if($_GET['q'] ==...){//your function here}