Change hidden field in form

Question

Change hidden field in form

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

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 could not make the that the 2nd hidden store the various checked checkboxes

<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 buttons and checkboxes code:

<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 to enter the value of the radio button to the 1st hidden

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

javascript html

asked by anonymous 15.01.2015 / 16:40

2 answers

1

This query returns the first input below search-form:

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

I would need something like:

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

15.01.2015 / 17:02

Problems with else if in servlet How to use the "response" of an XMLHTTPREQUEST in CakePHP (2.5)

score 1 · Accepted Answer

It is as follows, you are duplicating the input's through the name attribute. You should have the two input's of type hidden with names other than radios and checkboxes.

<!-- 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 to make it easier to select 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
}