按下提交时 div 消失答案

【问题标题】：The div disapears when submit is pressed按下提交时 div 消失
【发布时间】：2017-08-30 05:48:02
【问题描述】：

我有一个包含 7 个选项的选择表单。根据选择的选项，将显示其中一个 div（我已使用 jquery 完成此操作）。

    <select class="form-control" id="select-1" style="width: 70%;margin: 0 
    auto;">
                <option selected disabled>Choose a product..</option>
                <option value="img-upload">Pencil art</option>
                <option value="img-upload">Oil painting</option>
                <option value="img-upload">Digital painting</option>
                <option value="img-upload">Invert art</option>
                <option value="typography-select">Typography</option>
                <option value="photo-restoration-select">Photo Restoration</option>
            </select>

如果我选择前 4 个选项，则会显示一个带有 img-upload 类的 div。该 div 用于上传图片。

<div class="img-upload" style="margin-top: 20px;">
            <div class="row">
                <?php echo $image_view ?>      
                <form method="post" enctype="multipart/form-data" class="center-block">
                    <input type="file" name="fileToUpload" id="fileToUpload" style="margin: 10px auto;">
                    <input type="submit" value="Upload Image" name="submit" class="btn btn-default center-block img-upload-btn" style="margin-bottom: 10px;">
                    <?php echo $error_msg."".$success_msg ?>
                </form>
        </div>
    </div>

当点击按钮上传图片时，php脚本运行检查文件是否为图片。

<?php
$error_msg = "";
$success_msg = "";
$image_view = "";
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
    $uploadOk = 1;
} else {
    $error_msg .= '<p class="text-center" style="color:red;">File is not an image.Please upload a valid image format.</p>';
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
    if ($uploadOk == 0) {
        $error_msg .= "";
    // if everything is ok, try to upload file
    } else {
        if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        $success_msg .= '<p class="text-center" style="color:green;">Your photo has been uploaded.</p>';
        $image_view .= '<img src="'.$target_file.'" alt="Cover" class="img-responsive center-block" style="height: 250px;width: auto;">';
        } else {
          $success_msg .= '<p class="text-center" style="color:red;">Sorry, there was an error uploading your file.Please try again later.</p>';
        }
    }
}
?>

基于所选选项显示和隐藏 div 的 jquery：

$('.img-upload').hide();
        $('.typography-select').hide();
      $('.photo-restoration-select').hide();
        $(function() {
        $('#select-1').change(function(){
            if ($(this).val() == "img-upload") {
                $('.img-upload').show();
                $('.typography-select').hide();
                $('.photo-restoration-select').hide();
            }else if ($(this).val() == "typography-select") {
                $('.typography-select').show();
                $('.img-upload').hide();
                $('.photo-restoration-select').hide();
            }else if ($(this).val() == "photo-restoration-select") {
                $('.photo-restoration-select').show();
                $('.img-upload').hide();
                $('.typography-select').hide();
            }
        });
        });

问题是，当页面加载时，出现select。如果我选择前四个选项之一，应该显示.img-upload div。（当我选择前四个选项中的任何一个时显示，没有问题。）

但是当我尝试选择图片并按上传时，.img-upload div 消失了。

我已尝试解决此问题，但无法找到解决方案。任何帮助表示赞赏。

谢谢！

【问题讨论】：

标签： javascript php jquery html twitter-bootstrap

【解决方案1】：

如果您单击提交按钮，表单将发布到您的服务器 - 这很可能会导致页面刷新并且在页面加载时，您的 jQuery 将隐藏 .img-upload div。您确定这不是您希望的正确发布方式吗？

【讨论】：

【解决方案2】：

你得到的实现有点奇怪（为什么不捕获当前选择的选项并切换它的所有兄弟，反之亦然）.. 但无论如何，快速浏览一下我可以告诉你，你应该使用 ajax 处理这个提交，以防万一您不希望再次渲染 DOM 并加载 jQuery 的第一行，上面写着 $('.img-upload').hide(); ，实际上每次刷新时都会隐藏 div .

【讨论】：