CODEWITHSUNDEEP
javascriptphpmysql
Joshua
Joshua

Reputation: 45

Change image according to id in mysql

Good Day, I am working on a simple project so that I could get used to php,mysql, Here is my code

PHP
if(isset($_POST["edit"]))  
 {  
$update_data = array(  
   'crit_1'     =>     mysqli_real_escape_string($data->con, $_POST['crit_1']),  
   'crit_2'          =>     mysqli_real_escape_string($data->con, $_POST['crit_2']),  
   'crit_3'          =>     mysqli_real_escape_string($data->con, $_POST['crit_3']) , 
);  
$where_condition = array(  
   'id'     =>     $_POST["id"]  
);  
if($data->update("tbl_tabulation", $update_data, $where_condition))  
{  
   header("location:index.php?updated=1");  
}  
 }  
 if(isset($_GET["updated"]))  
 {  
    $success_message = 'Post Updated';  
 }  
 ?>

And my HTML:

<div id="pagewrap">

      <section id="content">
        <script type = "text/javascript">
                function pic1()
                {
                    document.getElementById("img").src = "img/new.jpg";
                }
                function pic2()
                {
                    document.getElementById("img").src ="img/new2.gif";
                } </script>
      <div class="table-responsive">  
               <div class="list-group">  

                    <a href="index.php?edit=1&id=1" class="list-group-item" onclick="pic1()">cand1</a>
                    <a href="index.php?edit=1&id=20" class="list-group-item" onclick="pic2()">cand2s</a>

               </table>  
            </div>  
      </section>

      <section id="middle">
            <img src="" id="img">
            <img src="" id="img">
      </section>

      <aside id="sidebar">
        <form method="post">  
               <?php  
               if(isset($_GET["edit"]))  
               {  
                  if(isset($_GET["id"]))  
                  {  
                     $where = array(  
                      'id'     =>     $_GET["id"]  
                     );  
                     $single_data = $data->select_where("tbl_tabulation", $where);  
                     foreach($single_data as $post)  
                     {  
               ?>  
                  <label width="20%"><?php echo $post["cand_name"]; ?></label> 
                  <br />  
                  <!--CRITERIA -->
                  <label>Poise & Bearing</label> 
                  <input type="text" name="crit_1" value="<?php echo $post["crit_1"]; ?>" class="form-control" width="20%" />
                  <br />  

                 <label>Modeling</label>  
                 <input type="text" name="crit_2" value="<?php echo $post["crit_2"]; ?>" class="form-control" width="20%"/>  
                  <br />  
                  <label>Overall Impact</label>  
                  <input type="text" name="crit_3" value="<?php echo $post["crit_3"]; ?>" class="form-control" width="20%"/>
                  <br /> 
                  <input type="hidden" name="id" value="<?php echo $post["id"]; ?>" />  
                  <input type="submit" name="edit" class="btn btn-info" value="Edit" />  
               <?php  
                     }  
                  }  
               }  
               else  
               {  

               }  
               ?>  
               <span class="text-success">  
               <?php  
               if(isset($success_message))  
               {  
                  echo $success_message;  
               }  
               ?>  
               </span>  
            </form>  
      </aside>

      <footer>
        <h4>Footer</h4>
        <p>Footer text</p>
      </footer>

    </div>

Problem is When I click cand1 or cand2the image will show only for a second. And the middle will be empty again as soon as the URL changes.

Is there any work around for this? any help would be appreciated.

Upvotes: 1

Views: 95

Answers (3)

Adder
Adder

Reputation: 5868

You need to prevent the default action of the link if you want just the image to change:

                <a href="javascript:void(0)" class="list-group-item" onclick="pic1()">cand1</a>
                <a href="javascript:void(0)" class="list-group-item" onclick="pic2()">cand2s</a>

If that isn't what you want, then you need to change the image by index.php when it loads the news page. Other options are to use event.preventDefault():

Upvotes: 1

Niketan Raval
Niketan Raval

Reputation: 479

Because you are using below code for immediate update and redirect page to updated=1 if you don't want to redirect then use ajax

if($data->update("tbl_tabulation", $update_data, $where_condition))  
{  
   header("location:index.php?updated=1");  
}

Upvotes: 1

MuthaFury
MuthaFury

Reputation: 815

Change this:-

<script type = "text/javascript">
                function pic1()
                {
                    document.getElementById("img").src = "img/new.jpg";
                }
                function pic2()
                {
                    document.getElementById("img1").src ="img/new2.gif";
                } </script>

<section id="middle">
            <img src="" id="img">
            <img src="" id="img1">
      </section>

The id shouldn't be the same, id should be unique

Upvotes: 2

Related Questions