通过jQuery设置表单值的缺点


any disadvantage on setting form value through jQuery

我有一个有很多元素的表单,大多数是选择框,复选框,单选框。例如下面的selectbox chart[type],我通过php

设置它的值
<select name="chart[type]" id="chart_type" >                         
       <option value="nps" <?php if ( $chart_data['chart']['type'] == 'nps' ) echo ' select="selected" '; ?> >NPS Barchart</option>
       <option value="score" <?php if ( $chart_data['chart']['type'] == 'score' ) echo ' select="selected" '; ?>>Number/score</option>
       <option value="top5" <?php if ( $chart_data['chart']['type'] == 'top5' ) echo ' select="selected" '; ?>>Top 5</option>
</select>

我尝试了一个代码设置从值使用jQuery

<select name="chart[type]" id="chart_type" >                         
    <option value="nps" >NPS Barchart</option>
    <option value="score">Number/score</option>
    <option value="top5">Top 5</option>
</select>
<script>
    $(function(){
            $('[name="chart[type]"]').val( 
                 '<?php echo  $chart_data['chart']['type']; ?>'
            );
    });
</script>

我觉得代码干净多了。我计划以这种方式改变所有形式的代码填充。我想知道使用second有什么缺点吗?. .我的应用程序是图表渲染它不会工作,如果JavaScript是禁用的!

如果您正在使用PHP并且没有真正的理由使用JavaScript来打印HTML,我会继续使用PHP。像这样混合并不是一个好主意,您应该真正考虑AJAX。但是你可以让你的PHP代码更易于维护和动态:

<?php
$data = array(
  'nps' => 'NPS Barchart',
  'score' => 'Number/score',
  'top5' => 'Top 5'
);
$options = '';
foreach ($data as $key => $value) {
  $selected = $chart_data['chart']['type'] == $key ? 'selected' : '';
  $options .= sprintf('<option class="%1$s" %2$s>%3$s</option>', $key, $selected, $value);
}
echo sprintf('<select name="chart[type]" id="chart_type">%s</select>', $options);

如果不禁用JS,应用程序将无法工作,因此这种方法实际上没有什么缺点。实际上,通过这种方式将选择框转换为由AJAX调用加载的值可能更容易。

缺点是您的代码现在依赖于JavaScript和jQuery。有些人(很少%的人)禁用了JavaScript,因此默认情况下不会选择任何内容

这不是最佳实践,但我必须承认,我曾经以类似的方式使用过JavaScript,只是为了方便/轻松。感觉有点"俗气"

在一个块中使用两种语言并不总是坏事。但是当你的一行

'<?php echo $chart_data['chart']['type']; ?>'

如果超过一行,它将开始看起来相当混乱。

当这种情况发生时,你可以做以下操作。

<script>
    $(function(){
            // assignment from php
            var chart_type = '<?php echo  $chart_data['chart']['type']; ?>';
            $('[name="chart[type]"]').val(chart_type);
    });
</script>

无论如何,这将是最好的,如果你可以转换你的应用程序执行ajax张贴,这样你就不必通过这种方式设置表单值