表单提交后回显选择选项数据属性值

时间:2019-01-10 00:26:43

标签: php html

我有一个带有select标记的表单,我需要在单击H6标记所在的Submit按钮后为用户选择的多个选项打印data-course属性

<h5>Course Selection</h5>

<?php if ($data_submitted != null) : ?>
   <h6><?php  foreach ($_POST['job_applied'] as $selectedOption) echo $selectedOption."\n"; ?></h6>
<?php else : ?>
   <select name="job_applied" id="multi_limit" multiple="multiple" class="multiselect form-control">
       <option value="10" data-course="Infromation Technology Course Credit">Infromation Technology Course Credit(10)</option>
       <option value="20" data-course="Main Stream Technologies Credit" >Main Stream Technologies Credit(20)</option>
       <option value="30" data-course="Mechanical Engineering Course" >Mechanical Engineering Course Credit(30)</option>
       <option value="40" data-course="General Mechanics Course Credit" >General Mechanics Course Credit(40)</option>
       <option value="50" data-course="Engineering Pro" >Engineering Pro Credit(50)</option>
       <option value="60" data-course="Master Engineering" >Master Engineering Credit(60)</option>
   </select>
<?php endif; ?>

2 个答案:

答案 0 :(得分:2)

执行此操作的方法有多种,我个人将一个包含此信息的数组保留在服务器端,但是,我不会告诉您,我显示了一种获取他data-course入侵内容的方法。

这就是这种方法...

问题在于,当您发布表单时,仅发布name及其value/s。没有发布其他属性的选项。

您必须使用javascript拦截表单的提交,然后自己发布数据,以下示例假设您使用的是jQuery。

<script>
$(document).ready( function(){

  $('form').on('submit', function (e){
    e.preventDefault(); // Stop posting to the server
    var selectedOptions = $('select[name="job_applied"] option:selected'); // Get all the selected options

    // Loop through them
    $.each(selectedOptions, function(i,o){
      // and append a hidden input with a job_applied_meta[data-course][****] name attribute
      // NOTE: The **** above is the value from the selected option.
      $('form').append('<input type="hidden" name="job_applied_meta[data-course]['+$(this).attr('value')+']" value="'+$(this).attr('data-course')+'">')
    })

    // Now post the form
    $('form').submit();
  });

});
</script>

以上内容现在会将data-course属性提交给服务器,但它将包含在$_POST['job_applied_meta']中。

$_POST['job_applied_meta']['data-course']将是一个数组,如下所示:

array(
   '10' => 'Infromation Technology Course Credit',
   '40' => 'General Mechanics Course Credit'
);

然后您将像这样访问:

<?php 
    foreach ($_POST['job_applied'] as $selectedOption) {
       echo $_POST['job_applied_meta']['data-course'][ $selectedOption ]; 
    }
?>

答案 1 :(得分:1)

您可以定义一个将数值链接到文本的数组。

<?php
$course_info = [
       10 => 'Infromation Technology Course Credit',
       20 => 'Main Stream Technologies Credit',
       30 => 'Mechanical Engineering Course Credit',
       40 => 'General Mechanics Course Credit',
       50 => 'Engineering Pro Credit',
       60 => 'Master Engineering Credit',
];
?>

然后,您可以在提交表单时从与提交的值匹配的数组中提取文本。我还展示了如何使用相同的数组来生成选择选项,这可能是有优势的,因为它可以防止在将相同数据存储在两个位置(更改一个位置而忘记更改另一个位置等)时遇到的各种问题。 ),但您不必为此做任何事情。

<h5>Course Selection</h5>

<?php if ($data_submitted != null) : ?>
    <h6>
    <?php foreach ($_POST['job_applied'] as $selectedOption) {
           // get the text that matches the numeric value that was submitted
           echo $course_info[$selectedOption]."\n";
       } ?>
   </h6>
<?php else : ?>
   <select name="job_applied" id="multi_limit" multiple="multiple" class="multiselect form-control">
       <?php foreach ($course_info as $id => $name) {
           echo "<option value='$id' data-course='$name'>$name($id)</option>";
       } ?>
   </select>
<?php endif; ?>