Значение кнопки радио добавлено в массив?

Question

Я создаю мастер как учебный проект, и я хочу получить сводку всех переключателей, проверенных во всем мастере на последней странице ... Я делаю это через массив? Если да, как добавить каждое значение переключателя в массив, а затем занести его на итоговую страницу? Есть ли другой способ сделать это? Пожалуйста помоги.

Answer 1

Существует несколько способов, я бы предложил одну страницу веб-страницы архитектуры и сохранить все данные формы (радио кнопки/или любые другие данные) на уровне области применения, чтобы вы могли получить к нему доступ на странице резюме.

Answer 2

Вот пример, надеюсь, что это более или менее то, что вам нужно:

HTML

//First HTML DIV 
<div> 
    <input type="radio" name="image_size" value="100x100"> 100x100<br> 
    <input type="radio" name="image_size" value="200x200"> 200x200<br> 
    <input type="radio" name="image_size" value="500x500"> 500x500<br> 
    <input type="button" value="Next" id="Next_ImageSize" /> 
</div> 
//Second HTML DIV 
<div> 
    <input type="radio" name="image_color" value="blue"> blue<br> 
    <input type="radio" name="image_color" value="green"> green<br> 
    <input type="radio" name="image_color" value="yellow"> yellow<br> 
    <input type="button" value="Next" id="Next_ImageColor" /> 
</div> 
//Summary HTML DIV 
<div> 
    <h1>Summary</h1> 
    <p id="values"><p> 
</div> 

JAVASCRIPT: (Использование Jquery библиотека)

var _SummaryArr = []; //empty array 
var _SummaryObj = []; //empty array (used for array of objects) 

//Add the selected radio button to the array 
$("[name='image_size']").change(function() { 
    _SummaryArr[0] = $(this).val(); //Index 0 for the first div 
    console.log(_SummaryArr[0]); //log to see the result 
}); 
//Add the selected radio button to the array 
$("[name='image_color']").change(function() { 
    _SummaryArr[1] = $(this).val(); //Index 1 for the second div 
    console.log(_SummaryArr[1]); //log to see the result 
}); 



//Add the selected radio button to the array 
$("[name='image_size']").change(function() { 
    _SummaryObj[0] = { "image_size" : $(this).val() }; //Index 0 for the first div 
    console.log(_SummaryObj[0]); //log to see the result 
}); 

//Adding the values to the summary using array 
for (var i = 0; i < _SummaryArr.length; i++) { 
    if (i == 0) 
     $("#values").html("<span>Image size: " + _SummaryArr[i] + "</span>"); 

    if (i == 1) 
     $("#values").html("<span>Image color: " + _SummaryArr[i] + "</span>"); 
} 
//Adding the values to the summary using object array 
for (var i = 0; i < _SummaryObj.length; i++) { 
    if (i == 0) 
     $("#values").html("<span>Image size: " + _SummaryObj[i].image_size + "</span>"); 

} 

JAVASCRIPT: (Родной)

//Get all the radio button elements by name 
var rad = document.getElementsByName('image_size'); 

//Iterate through all the buttons and assign click event listener 
for(var i = 0; i < rad.length; i++) { 
    rad[i].onclick = function() { 
     _SummaryObj[0] = {"image_size":this.value}; //for the first div 
     //or 
     //_SummaryObj.push({"image_size":this.value}); 
    }; 
} 

for (var i = 0; i < _SummaryObj.length; i++) { 
    if (i == 0) //simple check to assign the name (this can easily be replaced by some dynamic function) 
     document.getElementById("values").innerHTML = "Image size:" + _SummaryObj[i].image_size; 
}