需要单个代码即可处理多个输入

时间:2018-08-24 14:32:10

标签: javascript php arrays forms

我正在通过抓取图像文件夹来创建画廊,每个图像还具有一个下拉菜单。我可以使代码适用于单个拆分值下拉列表,但是当我将代码添加到图像数组时,它只会拉出第一个选择,而不会在提交时正确拆分值。如何在多个图像/下拉菜单中使用它?

<form action="test2.php" method="post">
<select name="location" id="location">
<option value = '' selected> None </option>
<option value = 'bsimage1:folder1'> folder1 </option>
<option value = 'bsimage2:folder2'> folder2 </option>
<option value = 'bsimage3:folder3'> folder3 </option>
</select>
<input type="submit" name="submit" class="btn btn-primary" 
onclick='brochure_select()' value="Submit">
<input type="hidden" id="fid" name="fid" value="" />
<input type="hidden" id="sid" name="sid" value="" />
<script>
function brochure_select() {
    var option_result = document.getElementById("location").value;
    var option_array=option_result.split(":");
     document.getElementById('fid').value = option_array[0];
    document.getElementById('sid').value = option_array[1];
}
</script>
<div>
<?php
if(isset($_POST['submit'])){
        $fid = $_POST['fid'];
        $sid = $_POST['sid'];   
        echo "You have selected : " .$fid. " to move to " .$sid; // Displaying Selected Value
print_r($_POST);        
};
?>
</div>

这是一个多重选择器当前外观的示例:此代码将图像的文件夹抓取并输出到页面上的图库中,我为每个图像添加了一个下拉选择,但未传递值为每个图像选择正确的表格。这是一个网址示例。 http://mangamike.com/demo/index-split.php

  <?php 
// Image extensions
        $image_extensions = array("png","jpg","jpeg","gif");

        // Target directory
        $dir = 'images/';
        if (is_dir($dir)){

            if ($dh = opendir($dir)){
                $count = 1;

                // Read files
                while (($file = readdir($dh)) !== false){

                    if($file != '' && $file != '.' && $file != '..'){

                        // Image path
                        $image_path = "images/".$file;
                        $image_ext = pathinfo($image_path, PATHINFO_EXTENSION);

                        // Check its not folder and it is image file
                        if(!is_dir($image_path) && 

                            in_array($image_ext,$image_extensions)){
                            ?>
                        <div class="col-lg-4 col-md-2 col-sm-3 col-xs-4">
                            <!-- Image -->
                            <a href="<?php echo $image_path; ?>">
                                <img src="<?php echo $image_path; ?>" alt="" title="" height="auto" width="auto" style="max-width:350px;min-height:250px;"/>
                            </a>
                            <!-- --- -->
                            <div style="float:left;padding:5px;">

                             <div class="form-group">           
                            <label for="exampleFormControlSelect1">Brightsign Image Name - <strong><?php echo $file; ?></strong></label>
                            <select class="form-control" id="location" name="location[]" >
                                        <option selected disabled value="">Choose Location</option>
                                        <option value="closing">Closing Station</option>
                                        <option value="device">Device/ROF</option>
                                        <option value="merch1">General Merch 1</option>
                                        <option value="merch2">General Merch 2</option>
                            </select>
                            <input type="hidden" name="image_name[]" value="<?php echo $file; ?>" />
                        </div>          
                        </div>
                        </div>
                            <?php

                            // Break
                            if( $count%3 == 0){
                            ?>
    </div><div class="row">
                            <?php    
                            }
                            $count++;
                        }
                    }

                }
                closedir($dh);
            }
        }
        ?>

1 个答案:

答案 0 :(得分:0)

  1. javascript不会在提交表单之前更新您的隐藏输入
  2. 隐藏的输入格式不正确

也许有两种形式,其中第一种是您防止默认的@onsubmit,它会提取所需的数据,将其推入另一种形式并提交。