javascript - Need single code to work on multiple inputs


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>
<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="" />
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];
        $fid = $_POST['fid'];
        $sid = $_POST['sid'];   
        echo "You have selected : " .$fid. " to move to " .$sid; // Displaying Selected Value

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.

// 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) && 

            <div >
              <!-- Image -->
              <a href="<?php echo $image_path; ?>">
                <img src="<?php echo $image_path; ?>" alt="" title="" height="auto" width="auto" />
              <!-- --- -->
              <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>
              <input type="hidden" name="image_name[]" value="<?php echo $file; ?>" />

              // Break
              if( $count%3 == 0){
  </div><div >




  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?


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.