php 需要输入字段进行切换

zc0qhyus  于 2023-06-04  发布在  PHP
关注(0)|答案(1)|浏览(127)

我完成了一个在线电影库，我有一个“添加到列表”按钮，工程没有页面刷新。它工作得很好，但它不切换，最终我需要它这样做。我需要能够添加，然后删除没有页面刷新。现在if/else针对两个独立的函数。我对JavaScript很糟糕，并尝试使用StackOverflow的各种示例将其组合在一起，但我没有成功。我的Javascript不够强大，无法解决这个问题，也无法修改其他人的代码来让它工作。任何帮助得到这个切换将不胜感激。

主编码

<div id="content-new">
    <?php   
    $sql_action = "SELECT movies.img, movies.title, movies.title_full, movies.new, my_list.title, my_list.username FROM movies LEFT JOIN my_list ON movies.title_full = my_list.title WHERE new != '' ORDER BY movies.id DESC LIMIT 16";
    $result_action = mysqli_query( $db_connect, $sql_action )or die( mysqli_error( $db_connect ) );
    while ( $row_action = mysqli_fetch_assoc( $result_action ) ) {
      $img = $row_action[ 'img' ];
      $title = $row_action[ 'title' ];
      $title_full = $row_action[ 'title_full' ];
      $new = $row_action [ 'new' ];
      $mylist = $row_action[ 'username' ];
        
      // CHECK IF FAV EXISTS MORE THAN ONCE IN DB
      $stmt_count_fav = $db_connect->prepare("SELECT title FROM my_list WHERE title = ?"); 
      $stmt_count_fav->bind_param("s", $title_full);
      $stmt_count_fav -> execute();
      $stmt_count_fav -> store_result();
      $stmt_count_fav -> fetch();
      $count_fav = $stmt_count_fav->num_rows;
      $stmt_count_fav->close();
      ?>
    
<div id="div_fav_hover">
<form id="form-new" style="padding: 20px 0px 20px 0px;" method="post" action="movie.php">
    <input id="btn_top" style="display: none" type="text" name="latest" id="latest" value="<?php if ($title_full == '') {echo $title;} else {echo $title_full;} ?>" />
    <?php if ($mylist == $username) { ?>      
    <input id="new_releases" type="image" name="image" src="images/<?php echo $img ?>">
    <?php } else if ($count_fav <= 1) { ?>
    <input id="new_releases" type="image" name="image" src="images/<?php echo $img ?>">
    <?php } ?>
</form>

<?php if ( $mylist == $username) { // ON MY LIST ?> 
<div class="div_new_delete">
  <form id="form-new" class="class_new_delete">
    <input style="display: none" type="text" name="title_home" value="<?php echo $title_full; ?>" />
    <input style="display: none" name="favorite_delete_home" value="favorite_delete_home" />
    <input id="btn_mylist_on_home" type="submit" name="btn_password" value="" class="class_fav_hover_on">
  </form>
</div>
<?php } else if ($count_fav <= 1) { // ON NO ONE'S LIST ?>
<div class="div_new_add">
  <form id="form-new" class="class_new_add">
    <input style="display: none" type="text" name="title_home" value="<?php echo $title_full; ?>" />
    <input style="display: none" name="favorite_home" value="favorite_home" />
    <input id="btn_mylist_off_home" type="submit" name="btn_password" value="" class="class_fav_hover_off">
  </form>
</div>
<?php } ?>
</div>

<?php } // END LOOP ?>
        
<script>
$(function() {
  $('.class_new_add').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'ajax/mylist.php',
      context:$(this),
      data: $(this).serialize(),
      success: function(data) {
        $(this).closest("div").html("<div class=\"div_new_delete\"><form id=\"form-new\" class=\"class_new_delete\"><input style=\"display: none\" type=\"text\" name=\"title_home\" value=\"<?php echo $title_full; ?>\" /><input style=\"display: none\" name=\"favorite_delete_home\" value=\"favorite_delete_home\" /><input id=\"btn_mylist_off_home\" type=\"submit\" name=\"btn_password\" value=\"\" class=\"class_fav_hover_on\"></form></div>")
      }
    });
  });
});
$(function() {
  $('.class_new_delete').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'ajax/mylist.php',
      context:$(this),
      data: $(this).serialize(),
      success: function(data) {
        $(this).closest("div").html("<div class=\"div_new_add\"><form id=\"form-new\" class=\"class_new_add\"><input style=\"display: none\" type=\"text\" name=\"title_home\" value=\"<?php echo $title_full; ?>\" /><input style=\"display: none\" name=\"favorite_home\" value=\"favorite_home\" /><input id=\"btn_mylist_on_home\" type=\"submit\" name=\"btn_password\" value=\"\" class=\"class_fav_hover_off\"></form></div>")
      }
    });
  });
});
</script>
</div>
  • AJAX /mylist.php**
<?php

include "../includes/db_connector.php"; ?>

<?php if ( isset( $_POST[ 'favorite_home' ] )) { // HOMEPAGE AJAX ATTEMPT       
$stmt_favorites = $db_connect->prepare("INSERT INTO my_list (title, username) VALUES (?, ?)");
$stmt_favorites->bind_param("ss", $title_home, $username);
$title_home = $_POST['title_home'];
$result=$stmt_favorites->execute();
$stmt_favorites->close();  
} ?>

<?php if ( isset( $_POST[ 'favorite_delete_home' ] )) { // HOMEPAGE AJAX ATTEMPT
$stmt_favorites = $db_connect->prepare("DELETE FROM my_list WHERE title = ? AND username = ?");
$stmt_favorites->bind_param("ss", $title_home, $username);
$title_home = $_POST['title_home'];
$result=$stmt_favorites->execute();
$stmt_favorites->close();
} ?>

更新if/else输入字段

<?php if ( $mylist == $username) { // ON MY LIST ?> 
  <form id="form-new" class="class_new_delete">
    <input style="display: none" type="text" name="title_home" value="<?php echo $title_full; ?>" />
    <input style="display: none" name="favorite_delete_home" value="favorite_delete_home" />
    <input id="btn_mylist_on_home" type="submit" name="btn_mylist_on_home" value="" class="class_fav_hover_on">
  </form>
<?php } else if ($count_fav <= 1) { // ON NO ONE'S LIST ?>
  <form id="form-new" class="class_new_add">
    <input style="display: none" type="text" name="title_home" value="<?php echo $title_full; ?>" />
    <input style="display: none" name="favorite_home" value="favorite_home" />
    <input id="btn_mylist_off_home" type="submit" name="btn_mylist_off_home" value="" class="class_fav_hover_off">
  </form>
<?php } ?>

更新JavaScript

<script>
$(function() {
  $(this).find('.class_new_add').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'ajax/mylist.php',
      context:$(this),
      data: $(this).serialize(),
      success: function(data) {
        $(this).closest('.class_new_add').html("<input id=\"btn_mylist_off_home\" type=\"submit\" name=\"btn_password\" value=\"\" class=\"class_fav_hover_on\">")
      }
    });
  });
});
$(function() {
  $(this).find('.class_new_delete').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'ajax/mylist.php',
      context:$(this),
      data: $(this).serialize(),
      success: function(data) {
        $(this).closest('.class_new_delete').html("<input id=\"btn_mylist_on_home\" type=\"submit\" name=\"btn_password\" value=\"\" class=\"class_fav_hover_off\">")
      }
    });
  });
});
</script>
php

1条答案

按热度按时间
wr98u20j

wr98u20j1#

我知道我已经回答了关于这个项目的一个问题。所以我将从那里复制我的答案，并在这里修改它，因为这是一个不同的问题。
有几种方法可以做你正在寻找的事情。
对于我的回答，我问你是否改变了你的CSS类有点不同。这也将有助于未来的项目，因为这是实现这一概念的常见方法。
与使用class_fav_hover_off和class_fav_hover_on不同，为按钮设置一个类，class_fav_hover这将等效于class_fav_hover_off。然后使用class_fav_hover_on，而不是使用class_fav_hover，并添加一个类active。
对于on按钮：

<input type="submit" name="btn_mylist_on_home" value="" class="class_fav_hover active">

对于关闭按钮：

<input type="submit" name="btn_mylist_on_home" value="" class="class_fav_hover">

这样做的好处是，你可以很容易地切换一个类。在这种情况下，类将被称为“活动”。
然后在你 AJAX 成功，只是使用$(this).find("[type='submit']").toggleClass("active")搜索一个按钮，有类型提交。
切换活动类。
这种方法的美妙之处在于，您可以使用相同的代码来成功删除和添加。这是因为如果按钮处于活动状态，切换将删除它。如果按钮没有它，切换将添加它。

$(function() {
  $('.class_new_add').on('submit', function(event) {
    event.preventDefault();
    console.log("Adding please wait");
    $.ajax({
      type: 'POST',
      url: 'https://httpbin.org/post',
      context:$(this),
      data: {"key": "value"},
      success: function(data) {
        console.log("Added");
        $(this).find("[type='submit']").toggleClass("active")
      }
    });
  });
  
$('.class_new_delete').on('submit', function(event) {
    event.preventDefault();
    console.log("Deleting please wait");
    $.ajax({
      type: 'POST',
      url: 'https://httpbin.org/post',
      context:$(this),
      data: {"key": "value"},
      success: function(data) {
        console.log("Deleted");
        $(this).find("[type='submit']").toggleClass("active")
      }
    });
  });
});
.class_fav_hover{
  background:#fffaaa;
}

.class_fav_hover.active{
  background:#000AAA;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div_new_add" style="display: inline-block;">
  <form id="form-new" style="display: inline-block;" class="class_new_add">
    <input style="display: none" type="text" name="title_home" value="<?php echo $title_full; ?>" />
    <input style="display: none" name="favorite_home" value="favorite_home" />
    <input type="submit" name="btn_password" value="ADD" class="class_fav_hover active">
  </form>
</div>

<div class="div_new_add" style="display: inline-block;">
  <form id="form-new" style="display: inline-block;" class="class_new_delete">
    <input style="display: none" type="text" name="title_home" value="<?php echo $title_full; ?>" />
    <input style="display: none" name="favorite_home" value="favorite_home" />
    <input type="submit" name="btn_password" value="DELETE" class="class_fav_hover">
  </form>
</div>
赞(0）分享  回复(0）举报  2023-06-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com