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">
</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> </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> </td>
<td colspan=1> </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>
<a id="delete_row_fields" class="btn btn-default">Delete Row</a>
</div>
</div>
<div class="row">
</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..
Aucun commentaire:
Enregistrer un commentaire