javascript - Need single code to work on multiple inputs

933

I am creating a gallery by scraping a folder of images, each image also has a dropdown. I can get the code to work for a single split value dropdown, but when i add the code to my image array, it only pulls the first selection and is not splitting the value correctly on submit. How do I make it work on multiple image/dropdowns?

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

here is a sample of what the multiple selector currently looks like: this code scraps the folder for images and outputs them into a gallery on a page, I have added a dropdown select to each image, but it is not passing the value chosen for each image into the form correctly. here is a url eaxmple. 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 >
              <!-- Image -->
              <a href="<?php echo $image_path; ?>">
                <img src="<?php echo $image_path; ?>" alt="" title="" height="auto" width="auto" />
              </a>
              <!-- --- -->
              <div >

               <div >      
              <label for="exampleFormControlSelect1">Brightsign Image Name - <strong><?php echo $file; ?></strong></label>
              <select 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 >
              <?php  
              }
              $count++;
            }
          }

        }
        closedir($dh);
      }
    }
    ?>
973

Answer

Solution:

  1. javascript isn't updating your hidden inputs before the form is submitted
  2. the hidden inputs aren't in a form

Maybe have two forms, where the first [email protected] you preventDefault pull the data out that you want, shove it in the other form and submit that one.

People are also looking for solutions to the problem: php - $file->move() function not showing moved file in the new folder?

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.