Соберите все выбранные элементы в форме и их скрытые входные данные для представления.

Question

Соберите все выбранные элементы в форме и их скрытые входные данные для представления.

0

Подумайте, поляроиды на столе, и вас попросят пройти через них и решить да или нет для каждого. Да, держи, не бросай.

Мне нужен элемент для каждой фотографии, который будет отображаться на странице, в виде какой-то плитки с двумя флажками (keep/discard). Если элемент имеет свои дочерние флажки, отмеченные да, тогда какой-то javascript где-то собирает указанные поля и помещает информацию в массив, когда пользователь нажимает кнопку submit.

Каждый элемент будет иметь скрытую информацию о выбранной фотографии, например имя файла, location и galleryID. Если javascript обнаруживает, что выбран родительский элемент div, как это указано в поле "Yes", также включает эту информацию в массив.

Конечный результат массива будет передан в php файл, который в конечном итоге распечатает результаты в файле csv.

Могу ли я помочь в указании в правильном направлении? Вот моя скрипка http://jsfiddle.net/9uZX7/3/

Вот мой html:

<form onsubmit="">         
    <div class="imageTile" id="$filename-1">
        <img src="http://tinyurl.com/krawyh9"/><br>
       <input type="hidden" name="imageFilename" value="$filename-1">
       <input type="hidden" name="imageGalleryID" value="$galleryID-1">
        <label for="$filename-1">Keep</label>
       <input type="checkbox" value="1" id="$filename-1">
    </div>
 <br>
</form>
  <form onsubmit="">         
    <div class="imageTile" id="$filename-2">
        <img src="http://tinyurl.com/krawyh9"/><br>
       <input type="hidden" name="imageFilename" value="$filename-2">
       <input type="hidden" name="imageGalleryID" value="$galleryID-2">
        <label for="$filename-2">Keep</label>
       <input type="checkbox" value="1" id="$filename-2">
    </div>
 <br>
</form>
<div id="submit_buttons">
            <button type="reset">Reset</button>
            <button class="submit" type="submit" onclick="return false">Submit</button>
</div>

Вот мой Javascript:

$(".submit").click(function(event){
    event.preventDefault();
    var checkedBoxes = $(".imageTile input:checkbox:checked")
    var resultSet = $(".imageTile input:hidden")
    for (var i=0; i<checkedBoxes.length; i++) {
        if (checkedBoxes[i].checked) {
            $(resultSet).map(function(){
                   return $(this).val();
            }).get();
        }
    }// <----
    console.log(resultSet);
});

user3159411 04 янв. 2014, в 10:31

Источник

Теги:

php

javascript

jquery

html

2 ответа

0

Я не уверен, что вы ищете, но следующий JSFiddle должен помочь вам в селекторах по крайней мере: http://jsfiddle.net/9uZX7/4/

$(".submit").click(function(event){
    event.preventDefault();
    var divs = $(".imageTile:has(input:checkbox:checked) input:hidden");

    console.log(divs);
});

Вам нужны гиды, чтобы сгруппировать их?

cubitouch 04 янв. 2014, в 08:27

Ещё вопросы

Juan Garcia · Accepted Answer · 2014-01-04T08-00-00.000Z

Я внес некоторые изменения в вашу разметку и исходный код JavaScript:

HTML:

<form onsubmit="">         
  <div class="imageTile">
    <img src="http://tinyurl.com/krawyh9"/><br>
    <input class="data" type="hidden" name="imageFilename" value="$filename-1">
    <input class="data" type="hidden" name="imageGalleryID" value="$galleryID-1">
    <label for="$filename-1">Keep</label>
    <input class="checkbox" type="checkbox">
  </div>
  <div class="imageTile">
     <img src="http://tinyurl.com/krawyh9"/><br>
     <input class="data" type="hidden" name="imageFilename" value="$filename-2">
     <input class="data" type="hidden" name="imageGalleryID" value="$galleryID-2">
     <label for="$filename-2">Keep</label>
     <input class="checkbox" type="checkbox">
  </div>
  <div id="submit_buttons">
   <button type="reset">Reset</button>
   <input class="submit" type="submit" onclick="return false" value="Submit">
  </div>
</form>

JavaScript:

$(".submit").click(function(event){
    event.preventDefault();
    var imageTile = this.parentElement.parentElement.getElementsByClassName('imageTile') ;
    var l = imageTile.length ;
    var data = [] ;
    for(var i = 0 ; i < l ; i++){
        if(imageTile[i].getElementsByClassName('checkbox')[0].checked){
            var dat = imageTile[i].getElementsByClassName('data') ;
            console.log(dat) ;
            var ll = dat.length ;
            var datArr = [] ;
            for(var j = 0 ; j < ll ; j++){
              datArr.push([dat[j].attributes['name'].value, dat[j].attributes['value'].value]) ;
            }
            data.push(datArr) ;
        }
    }
    // Now 'data' is the array

    // dataString is a JSON representation of the array to send to the server
    var dataString = JSON.stringify(data) ;

    // Test
    console.log(data) ;
    console.log(dataString) ;

    /*
      Do something with your data here
    */
});

Я не использовал jQuery больше, чем $(".submit").click(function(event){ который вы использовали.

Нет ограничений на количество скрытых входов, если у вас есть имя класса, заданное как "данные".

Спасибо, это был ключ к тому, чего мне не хватало !!