Using jquery to set a value to every input if checkbox is enabled

Question

I'm really bad a t jquery, I wish to make my coworkers happy by adding a feature to a internal webpage.

The HTML output of the webpage is (similar) to this:

<script>
if($('.checkTimeStart').prop('checked', true)) {
    var setThisValue = $('input[placeholder=TimeStart]').val();
    $('form').find("input[placeholder=TimeStart]").each(function(ev) {
        if(!$(this).val()) { 
        $(this).attr(setThisValue);
        }
    });
}
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form_id" method="POST" action="">
<div id="insertPanel">
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div class="form-group">
                    <label class="control-label col-md-4" for="Type">Type:</label>
                    <div class="col-md-4">
                        <input type="name" class="form-control input-sm" name="Type" id="Type" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="control-label col-md-4" for="Sender">Sender:</label>
                    <div class="col-md-4">
                        <input type="name" class="form-control input-sm" name="Sender" id="Sender" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="control-label col-md-4" for="Receiver">Receiver:</label>
                    <div class="col-md-4">
                        <input type="name" class="form-control input-sm" name="Receiver" id="Receiver" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <button type="submit" name="submit" class="btn btn-danger pull-right">Send</button>
        </div>
    </div>
    <div class="row">&nbsp;
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-bordered table-hover" id="tab_logic_fields">
                <thead>
                    <tr>
                        <th class="text-center">Account</th>
                        <th class="text-center">Time Start</th>
                        <th class="text-center">Time End</th>
                        <th class="text-center">Vendor</th>
                        <th class="text-center">Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr_fields_100'>
                        <td><input type="text" name='prefs[0][Account]'  placeholder='Account' class="form-control"/></td>
                        <td><input type="text" name='prefs[0][TimeStart]' placeholder='TimeStart' class="form-control" id='datetimepicker3'/></td>
                        <td><input type="text" name='prefs[0][TimeEnd]' placeholder='TimeEnd' class="form-control" id='datetimepicker4'/></td>
                        <td><input type="text" name='prefs[0][Vendor]'  placeholder='Vendor' class="form-control"/></td>
                        <td><input type="text" name='prefs[0][Quantity]' placeholder='Quantity' class="form-control"/></td>
                    </tr>
                    <tr id='addr_fields_101'>
                        <td><input type="text" name='prefs[1][Account]'  placeholder='Account' class="form-control"/></td>
                        <td><input type="text" name='prefs[1][TimeStart]' placeholder='TimeStart' class="form-control" id='datetimepicker5'/></td>
                        <td><input type="text" name='prefs[1][TimeEnd]' placeholder='TimeEnd' class="form-control" id='datetimepicker6'/></td>
                        <td><input type="text" name='prefs[1][Vendor]'  placeholder='Vendor' class="form-control"/></td>
                        <td><input type="text" name='prefs[1][Quantity]' placeholder='Quantity' class="form-control"/></td>
                    </tr>
                    <tr id='addr_fields_102'>
                        <td><input type="text" name='prefs[2][Account]'  placeholder='Account' class="form-control"/></td>
                        <td><input type="text" name='prefs[2][TimeStart]' placeholder='TimeStart' class="form-control" id='datetimepicker7'/></td>
                        <td><input type="text" name='prefs[2][TimeEnd]' placeholder='TimeEnd' class="form-control" id='datetimepicker8'/></td>
                        <td><input type="text" name='prefs[2][Vendor]'  placeholder='Vendor' class="form-control"/></td>
                        <td><input type="text" name='prefs[2][Quantity]' placeholder='Quantity' class="form-control"/></td>
                    </tr>
                    <tr id='fields_is_for_all'>
                        <td colspan=1>&nbsp;</td>
                        <td><input type="checkbox" class="form-check-input" id="checkTimeStart"></td>
                        <td><input type="checkbox" class="form-check-input" id="checkTimeEnds"></td>
                        <td colspan=1>&nbsp;</td>
                        <td colspan=1>&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-5">
            <a id="add_row_fields" class="btn btn-default">Add Row</a>&nbsp;
            <a id="delete_row_fields" class="btn btn-default">Delete Row</a>
        </div>
    </div>

    <div class="row">&nbsp;
    </div>
</div>
</form>

The goal is to allow them to click the checkbox (TimeStart AND/OR TimeEnd ) for enabling it, and from this moment on, any new value that datetimepicker will set to any of the input, will be set to all of the other inputs.

This saves time when there are many rows. The 2 buttons Add Row and Delete Row have a jquery behind and they add or remove a row. In this example, I added 2 rows already: addr_fields_101 addr_fields_102

I tried writing the jquery but obviously it does not work..

@Huangism started already from there: https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery — aPugLife, Mar 08 '18 at 14:33
Yes but you should read the documentation for prop so you can use it properly, `$('.checkTimeStart').prop('checked', true)` sets check to true but it doesn't return a boolean although if you check for true or false then it will return true all the time. `$( elem ).prop( "checked" )` returns a boolean based on if it is checked or not — Huangism, Mar 08 '18 at 14:37
Oh I see, thanks! I missed this. But I don't think the rest of the code is that good :/ — aPugLife, Mar 08 '18 at 14:42
@plonknimbuzz as soon as the checkbox for "timeStart" gets enabled, when user type text in any of the timeStart inputs, this value must be copied in all of them. Same goes for timeEnd. And should work also when both are enabled. — aPugLife, Mar 09 '18 at 10:33

score 1 · Accepted Answer · answered Mar 09 '18 at 13:02

1

DEMO: http://jsbin.com/zoxubihexa/2/edit?html,js,output

function copyVal(selector){
    $.each($(selector), function(i,e){
      if($(this).val() != '') 
        $(selector).val($(this).val());
    });
  }

i really not recommended you to do this because you will overridden/replace existing value, especially clicked checkbox by accident. there is a better way to do this

answered Mar 09 '18 at 13:02

plonknimbuzz

2,594
2
19
31

Nice! I just saw your reply, have to test on my system. Haven't had much time lately but I saw the DEMO and it is exactly what I wanted to achieve (well, I thought something more fancy, like, when they write, the other fields write at the same time for as long as the checkbox is enabled - in your case, the user check the check box and the value on the first row is used for all the others - It is still great!! have my upvote, let me test it better and will accept the answer! ) – aPugLife Mar 09 '18 at 15:12
`i really not recommended you to do this because you will overridden/replace existing value` It is exactly what I want, and what my workmates want ;) – aPugLife Mar 09 '18 at 15:13
I'm still working on it, or better, just started.. since it is Monday. Can't get it working with Bootstrap, yet. Thanks for your code, it is really helpful to me! – aPugLife Mar 12 '18 at 09:25

Using jquery to set a value to every input if checkbox is enabled

1 Answers1