纯JavaScript方式向阵列的动态输入字段的增值 [英] Pure Javascript Approach to adding Value of Dynamic Input Fields to Array
本文介绍了纯JavaScript方式向阵列的动态输入字段的增值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
修改
与下面的解决方案开始，我就能够打造出以下，这我可以用它来创建时间戳：
Starting with the solution below, I was able to build out the following, which I could use to create timestamps:
// Ready the Chunking Function so we can group entries
function array_chunk( input, size ) {
for(var x, i = 0, c = -1, l = input.length, n = []; i < l; i++){
(x = i % size) ? n[c][x] = input[i] : n[++c] = [input[i]];
}
return n;
}
// Ready the Zero Prepend-er so dates are always correct
function twoDigitFormat( num ) {
return ( num.toString().length < 2 ? "0"+num : num ).toString();
}
// Get the Elements, a Nodelist (NL) from the page
var entires = document.getElementsByName('input_252[]');
// Convert NL to Array and Chunk within the Array
for (k = 0; k < entires.length; k++) {
var entries = array_chunk(entires, 7);
}
// Loop through entries array to get each entry array
for ( i = 0; i < entries.length; i++ ) {
var entry = entries[i];
// Loop through each entry array to get the values
for ( j = 0; j < entry.length; j++ ) {
var value = entry[j];
// get all of the parts
var month = twoDigitFormat(entry[0].value);
var day = twoDigitFormat(entry[1].value);
var year = entry[2].value;
var stime = entry[3].value;
var stimeperiod = entry[4].value;
var etime = entry[5].value;
var etimeperiod = entry[6].value;
}
// Make Human Timestamps for each entry array
var sessionStartString = month + '-' + day + '-' + year + ' ' + stime + '' + stimeperiod;
var sessionEndString = month + '-' + day + '-' + year + ' ' + etime + '' + etimeperiod;
原始
我通过Javascript做的表单输入验证。例如，
I am doing validations on form inputs via Javascript. For example,
var varName = Form.input_46.value;
if (varName < '2' && varName != ''){
alert("There is a problem with your submission.");
return (false);
}
随着HTML：
<li id="field_5_91" class="gfield">
<label class="gfield_label" for="input_5_91">Label Text</label>
<div class="ginput_container ginput_container_number">
<input name="input_91" id="input_5_91" type="text" value="" class="small" tabindex="113">
</div>
</li>
......让我来检查，如果输入字段中的数字符合我的参数，点击提交按钮时。
... Allows me to check if the number entered into the field meets my parameters when the submit button is clicked.
我也有一个输入，允许用户点击添加其他行（动态）：
I also have a input that allows users to click to add additional rows (dynamic):
<li id="field_5_252" class="gfield field_sublabel_below field_description_above">
<label class="gfield_label" for="input_5_252_shim">Course Duration</label>
<div class="gfield_description">Enter the information for each class session. Use the only the numeric format for the month and day. Enter the entire year ( EG, 2015 ). Start and End time must use standard digital format ( EG, 1:00, 2:00, 3:00 ). The period - AM or PM - must be capitalized.</div>
<div class="ginput_container ginput_container_list ginput_list">
<input type="text" id="input_5_252_shim" style="position:absolute;left:-999em;" onfocus="jQuery( "#field_5_252 table tr td:first-child input" ).focus();">
<table class="gfield_list">
<colgroup>
<col id="gfield_list_252_col_1" class="gfield_list_col_odd">
<col id="gfield_list_252_col_2" class="gfield_list_col_even">
<col id="gfield_list_252_col_3" class="gfield_list_col_odd">
<col id="gfield_list_252_col_4" class="gfield_list_col_even">
<col id="gfield_list_252_col_5" class="gfield_list_col_odd">
<col id="gfield_list_252_col_6" class="gfield_list_col_even">
<col id="gfield_list_252_col_7" class="gfield_list_col_odd">
<col id="gfield_list_252_col_8" class="gfield_list_col_even">
</colgroup>
<thead>
<tr>
<th>Month</th>
<th>Day</th>
<th>Year</th>
<th>Start Time Hour</th>
<th>Start Time Period</th>
<th>End Time Hour</th>
<th>End Time Period</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr class="gfield_list_row_odd">
<td class="gfield_list_cell gfield_list_252_cell1">
<input type="text" name="input_252[]" value="" tabindex="51">
</td>
<td class="gfield_list_cell gfield_list_252_cell2">
<input type="text" name="input_252[]" value="" tabindex="52">
</td>
<td class="gfield_list_cell gfield_list_252_cell3">
<input type="text" name="input_252[]" value="" tabindex="53">
</td>
<td class="gfield_list_cell gfield_list_252_cell4">
<input type="text" name="input_252[]" value="" tabindex="54">
</td>
<td class="gfield_list_cell gfield_list_252_cell5">
<input type="text" name="input_252[]" value="" tabindex="55">
</td>
<td class="gfield_list_cell gfield_list_252_cell6">
<input type="text" name="input_252[]" value="" tabindex="56">
</td>
<td class="gfield_list_cell gfield_list_252_cell7">
<input type="text" name="input_252[]" value="" tabindex="57">
</td>
<td class="gfield_list_icons"> <img src="...blankspace.png" class="add_list_item" title="Add another row" alt="Add a row" onclick="gformAddListItem(this, 0)" onkeypress="gformAddListItem(this, 0)" style="cursor:pointer; margin:0 3px;" tabindex="58"> <img src="...blankspace.png" class="delete_list_item" title="Remove this row" alt="Remove this row" onclick="gformDeleteListItem(this, 0)" onkeypress="gformDeleteListItem(this, 0)" style="cursor: pointer; visibility: visible;" tabindex="59">
</td>
</tr>
<tr class="gfield_list_row_even">
<td class="gfield_list_cell gfield_list_252_cell1">
<input type="text" name="input_252[]" value="" tabindex="57">
</td>
<td class="gfield_list_cell gfield_list_252_cell2">
<input type="text" name="input_252[]" value="" tabindex="57">
</td>
<td class="gfield_list_cell gfield_list_252_cell3">
<input type="text" name="input_252[]" value="" tabindex="57">
</td>
<td class="gfield_list_cell gfield_list_252_cell4">
<input type="text" name="input_252[]" value="" tabindex="57">
</td>
<td class="gfield_list_cell gfield_list_252_cell5">
<input type="text" name="input_252[]" value="" tabindex="57">
</td>
<td class="gfield_list_cell gfield_list_252_cell6">
<input type="text" name="input_252[]" value="" tabindex="57">
</td>
<td class="gfield_list_cell gfield_list_252_cell7">
<input type="text" name="input_252[]" value="" tabindex="57">
</td>
<td class="gfield_list_icons"> <img src="...blankspace.png" class="add_list_item" title="Add another row" alt="Add a row" onclick="gformAddListItem(this, 0)" onkeypress="gformAddListItem(this, 0)" style="cursor:pointer; margin:0 3px;" tabindex="58"> <img src="...blankspace.png" class="delete_list_item" title="Remove this row" alt="Remove this row" onclick="gformDeleteListItem(this, 0)" onkeypress="gformDeleteListItem(this, 0)" style="cursor: pointer; visibility: visible;" tabindex="59">
</td>
</tr>
</tbody>
</table>
</div>
</li>
我怎样才能得到用户要想在纯JavaScript运行中的值验证输入到一个数组中的值？
我试图复制这种功能，我有这个jQuery的功能：
I'm trying to replicate the kind of functionality that I have in this jQuery function:
功能gf_post_test（）{
function gf_post_test() {
$输出='.TEST-输出P {利润率底：0像素;}';
$output = '.test-output p{margin-bottom:0px;}';
$class_sessions = rgpost( 'input_252' ); //get complete array
$each_class_session = array_chunk($class_sessions, 7); //chunk array on every 7th element
foreach ($each_class_session as $class_session) { //foreach sub array
$month = $class_session[0];
$day = $class_session[1];
$year = $class_session[2];
$stime = $class_session[3];
$stimeperiod = $class_session[4];
$etime = $class_session[5];
$etimeperiod = $class_session[6];
$date = $month .'/'. $day .'/'. $year;
$start_time = $stime . $stimeperiod;
$end_time = $etime . $etimeperiod;
$unix_start = strtotime($date.$start_time);
$unix_end = strtotime($date.$end_time);
$user_start = date("m/d/Y H:i:s ", $unix_start);
$user_end = date("m/d/Y H:i:s ", $unix_end);
$diff = $unix_start - $unix_end;
$hours = $diff / ( 60 * 60 );
if ($hours < 0) $hours = -$hours;
$output .= '<p>$unix_start: '. $unix_start .'</p>';
$output .= '<p>$unix_end: '. $unix_end .'</p>';
$output .= '<p>$user_start: '. $user_start .'</p>';
$output .= '<p>$user_end: '. $user_end .'</p>';
$output .= '<p>$hours: '.$hours.'</p>';
}
$output .= '</div>';
echo $output;
}
我试图使用纯JavaScript函数是这样的：
I have attempted to use Pure Javascript functions like this:
var dateTimesArray = new Array();
document.getElementsByName('input_252[]').forEach( function () {
dateTimesArray.push(this).val());
}
);
但我总是会返回错误 - 这是不确定的，或者其他的事情是不是一个函数。我想，这一定是因为 document.getElementsByName（'input_252 []'）返回的NodeList，而不是一个逗号分隔的字符串。
But I always return errors - something is undefined, or another thing is not a function. I think that this must be because document.getElementsByName('input_252[]') returns a NodeList and not a comma separated string.
推荐答案
尝试：
var inputs = document.getElementsByName('input_252[]');
var i;
for (i = 0; i < inputs.length; i++) {
var input = inputs[i];
// work with input (validate, etc.)
}
这篇关于纯JavaScript方式向阵列的动态输入字段的增值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
