根据mysql中的id更改图像

时间:2016-06-20 07:17:41

标签: javascript php mysql

美好的一天,我正在开发一个简单的项目,以便我可以习惯php,mysql, 这是我的代码

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';  
 }  
 ?>  

我的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>

问题是当我点击cand1cand2时,图片只会显示一秒钟。一旦URL改变,中间将再次为空。

这有什么工作吗?任何帮助将不胜感激。

3 个答案:

答案 0 :(得分:2)

更改: -

<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>

id不应该相同,id应该是唯一的

答案 1 :(得分:1)

因为您使用以下代码进行即时更新,并且如果您不想重定向则将页面重定向到更新= 1,那么请使用ajax

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

答案 2 :(得分:1)

如果您只想更改图片,则需要阻止链接的默认操作:

                <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>

如果这不是您想要的,那么您需要在加载新闻页面时通过index.php更改图像。其他选项是使用event.preventDefault():