javascript - 将动态输入字段的值添加到数组的纯 Javascript 方法

标签 javascript arrays validation

编辑

从下面的解决方案开始，我能够构建以下内容，我可以用它来创建时间戳:

// 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 对表单输入进行验证。例如，

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>

... 允许我在单击提交按钮时检查输入字段的数字是否符合我的参数。

我还有一个输入，允许用户单击以添加其他行(动态):

<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( &quot;#field_5_252 table tr td:first-child input&quot; ).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>&nbsp;</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 函数中的功能:

函数 gf_post_test() {

$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函数:

var dateTimesArray = new Array();
document.getElementsByName('input_252[]').forEach( function () {
    dateTimesArray.push(this).val());
    }
);

但我总是返回错误 - 有些东西未定义，或者另一个东西不是函数。我认为这一定是因为 document.getElementsByName('input_252[]') 返回 NodeList 而不是逗号分隔的字符串。

最佳答案

尝试:

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 - 将动态输入字段的值添加到数组的纯 Javascript 方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34635987/

上一篇：javascript - 如何在javascript中读取显示在iframe中的外部站点的cookie

下一篇：javascript - Firefox 页面加载事件很长

相关文章：

javascript - gwt 请求(通过 RequestBuilder)导致响应被视为 JavaScript

asp.net - 在必填字段验证器中进行数字验证

validation - hive :数据验证/不良数据处理？

java - 如何禁用java中的单选按钮组

javascript - PHP - 将文本附加到具有特定 id 的 html 元素中

javascript - 使用 Rails 5.1 和 Vue.js 进行 Flaky 系统测试

javascript - 在 FOCUS 上使用 Javascript 的 Auto Dash(电话号码格式)

arrays - 具有数学属性的 Excel VBA 字符串转换

arrays - F# CSV - 为每一行从列数据创建一个数组

javascript - 我有一个数组，里面有数组，这个数组只有 1 个值。我想让它变得简单并转换为数组

©2024 IT工具网  联系我们