Change Hidden field in form

Question

I have two Hidden fields inside a form they must store the values of a radio button and the selected checkboxes (150 checkboxes), I was able to make the first Hidden field load the value of the selected radio button but I was unable to make the 2nd Hidden store the various checkboxes marked

<form class="navbar-form span7 text-center" role="search" id="search-form" action="../PHP/ValidateForm.php" method="get">
                    <div class="form-group">
                        <label class="radio-inline"><input type="radio" name="result_type" value="videos" checked="">Videos</label>
                        <label class="radio-inline"><input type="radio" name="result_type" value="photos">Photos</label>
                        <label class="radio-inline"><input type="radio" name="result_type" value="tumblr">Tumblr</label>
                    </div>
                    <div class="input-group">
                        <input class="form-control" type="text" id="search_input" name="search_input" placeholder="Search" />
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit" name="search_form_submit" value="search">Search</button>
                        </div>
                    </div>
                    <input type="hidden" name="upload-date" value="up-0" />
                    <input type="hidden" name="from" value="" />
                </form>

Radio code Buttons and checkboxes:

<div id="right_sidebar" class="col-md-2"><!-- START Right Sidebar -->
<div class="row">
    <h4>Upload Date</h4>
    <div class="radio">
        <label><input type="radio" name="upload-date" value="up-0" checked="checked">ANYTIME</label>
    </div>
    <div class="radio">
        <label><input type="radio" name="upload-date" value="up-1">Today</label>
    </div>
    <div class="radio">
        <label><input type="radio" name="upload-date" value="up-2">This Week</label>
    </div>
    <div class="radio">
        <label><input type="radio" name="upload-date" value="up-3">This Month</label>
    </div>
    <h4>From</h4>
    <div id="sites-list">
        <div class="checkbox">
            <label><input type="checkbox" name="site[]" value="site-0" checked="checked">ANYONE</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" name="site[]" value="site-1">Site</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" name="site[]" value="site-2">Site</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" name="site[]" value="site-3">Site</label>
        </div>
    </div>
</div>

Code that works only for insertion of the value of the radio button to the 1º Hidden

$('input[name=upload-date]').change(function(){
    $('#search-form > input[name=upload-date]').val($(this).val());
});

Answer 1

This query returns the first input below search-form:

$('#search-form > input[name=upload-date]')

I’d need something like:

$('#search-form input[name=upload-date]')

Answer 2

Here’s the thing, you’re duplicating the input’s through the attribute name. You must have the two input’s of type hidden with radios and checkboxes different numbers.

<!-- veja que alterei o campo name do upload-date -->
<input type="hidden" name="uploadDate" value="up-0" />
<input type="hidden" name="from" value="" />

I also suggest putting a id in these two input’s for easy selection in the script.

<input type="hidden" name="uploadDate" id="uploadDate" value="up-0" />
<input type="hidden" name="from" id="from" value="" />

---

$('input[name=upload-date]').change(function() {
    // apenas modifiquei o seletor
    $('#search-form #uploadDate').val($(this).val());
});

// não sou muito inclinado a usar seletores para campos com
// name indicando um array, por isso deixo uma alternativa
$('#sites-list :checkbox').change(function() {
    // array para os checkboxes selecionados
    var arrSel = [];
    $('#sites-list :checkbox').each(function() {
        if ($(this).is(':checked')) {
            // adiciona ao array
            arrSel.push($(this).val());
        }
    });
    // junta tudo no input desejado
    $('#from').val(arrSel.join(','));
    // o input ficará com os valores separados por vírgula
    // ex: site-1, site-2
}