选择未随表单提交

时间：2015-08-28 11:27:50

标签： php jquery html css html5 

<form action="action.php" method="post" id="map-form">
    <select name="selectfrom[]" id="select-from1" size="8">
        <option value="Email">Field Email</option>
        <option value="ID">Field ID</option>
        <option value="name">Field name</option>
        <option value="address">Field address</option>
        <option value="city">Field city</option>
        <option value="state">Field state</option>
        <option value="country">Field country</option>
        <option value="sex">Field sex</option>
    </select>
    <select name="slectfrom1[]" id="select-from2" size="8">
        <option value="id">Field id</option>
        <option value="name">Field name</option>
        <option value="email">Field email</option>
        <option value="address">Field address</option>
        <option value="city">Field city</option>
        <option value="state">Field state</option>
        <option value="designation">Field designation</option>
        <option value="sex">Field sex</option>
    </select>
    <button type="button" id="btn-add">Add »</button>
    <button type="button" id="btn-remove">« Remove</button>
    <select name="selectto[]" id="select-to" multiple=""></select>
    <input type="text" name="vein" value="aaa">
    <br>
    <button type="submit" value="submit">Submit</button>
</form>

我遇到了hmtl表单的一个奇怪问题。选择字段未提交。

然后我找到了一个超出我理解的奇怪解决方案

<form action="action.php" method="post" id="map-form">
    <select name="selectfrom[]" id="select-from1" size="8" form="map-form">
        <option value="Email">Field Email</option>
        <option value="ID">Field ID</option>
        <option value="name">Field name</option>
        <option value="address">Field address</option>
        <option value="city">Field city</option>
        <option value="state">Field state</option>
        <option value="country">Field country</option>
        <option value="sex">Field sex</option>
    </select>
    <select name="slectfrom1[]" id="select-from2" size="8" form="map-form">
        <option value="id">Field id</option>
        <option value="name">Field name</option>
        <option value="email">Field email</option>
        <option value="address">Field address</option>
        <option value="city">Field city</option>
        <option value="state">Field state</option>
        <option value="designation">Field designation</option>
        <option value="sex">Field sex</option>
    </select>
    <button type="button" id="btn-add">Add »</button>
    <button type="button" id="btn-remove">« Remove</button>
    <select name="selectto[]" id="select-to" multiple="" form="map-form"></select>
    <input type="text" name="vein" value="aaa">
    <br>
    <button type="submit" value="submit">Submit</button>
</form>

正如您在解决方案中看到的那样，select字段具有form属性，即表单id。 任何人都可以告诉我为什么需要这样做，因为我第一次面对这个问题。也有任何替代解决方案或我遗漏了一些东西。 还有一件事要做：select选项是在php中动态生成的。

action.php代码

<?php 
echo"<pre>";print_r($_POST);
?>

输出：

Array
(
    [vein] => aaa
)

php文件整个代码。

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
include "PHPExcel.php";
include 'database.php';
require_once 'PHPExcel/IOFactory.php';
/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
$db = Database::getInstance();
$con = $db->getConnection();
$excel = new PHPExcel();
$objPHPExcel = PHPExcel_IOFactory::load("uploads/upload_test.xls");
//echo"<pre>";print_r($objPHPExcel->getAllSheets());die;
$highestColumm = $objPHPExcel->setActiveSheetIndex(0)->getHighestColumn();
$highestRow = $objPHPExcel->setActiveSheetIndex(0)->getHighestRow();
$allCellValue = array();
//echo '<table border="1">';
foreach ($objPHPExcel->setActiveSheetIndex(0)->getRowIterator() as $row) {
    $cellIterator = $row->getCellIterator();
    $cellIterator->setIterateOnlyExistingCells(false);
    //echo '<tr>';
    foreach ($cellIterator as $cell) {
        if (!is_null($cell)) {
            $allCellValue[] = $cell->getCalculatedValue();
            //echo '<td>';
            //echo $value . '&nbsp;';
            //echo '</td>';
        }
    }
    //echo '</tr>';
}

$row = 1;
$firstCellValue = array();
for ($column = 'A'; $column != $highestColumm; $column++) {
    $firstCellValue[] = $objPHPExcel->getActiveSheet()->getCell($column.$row)->getValue();
}
$dbColumns = array();
$query = "select column_name from information_schema.columns where table_schema = 'dynamic_forms' and table_name = 'employee'";
if($output = $con->query($query)):
    while($result = $output->fetch_assoc()):
        $dbColumns[] = $result['column_name'];
    endwhile;
endif;
//echo '</table>';
//echo"<pre>";print_r($firstCellValue);
//echo"<pre>";print_r($allCellValue);
//die;
?>
<html>
    <head>
        <title>Database Field Mapping from Excel</title>
    </head>
    <body>
        <form action="action.php" method="post" >
            <select name="selectfrom" id="select-from1" size="<?php echo count($firstCellValue); ?>">
            <?php foreach($firstCellValue as $excelField){ ?>    
                <option value="<?php echo $excelField; ?>">Field <?php echo $excelField; ?></option>
            <?php } ?>    
            </select>

            <select name="slectfrom1" id="select-from2" size="<?php echo count($dbColumns); ?>">
            <?php foreach($dbColumns as $dbField){ ?>    
                <option value="<?php echo $dbField; ?>">Field <?php echo $dbField; ?></option>
            <?php } ?>
            </select>
            <button type="button" id="btn-add">Add &raquo;</button>
            <button type="button" id="btn-remove">&laquo; Remove</button>

            <select name="selectto" id="select-to" multiple ></select>
            <input type="text" name="vein" value="aaa"/>
            </br><button type="submit" value="submit">Submit</button>
        </form>
    </body>
</html>    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('#btn-add').click(function(){

            var selected1 = $('#select-from1 option:selected');
            var selected2 = $('#select-from2 option:selected');

            if(selected1.length == 0 || selected2.length == 0){
              alert("Please select options from both the select boxes");
              return;
            }

            $('#select-to').append("<option data-val1='"+selected1.val()+"' data-val2='"+selected2.val()+"' data-text1='"+selected1.text()+"' data-text2='"+selected2.text()+"' value='"+selected1.val()+"+"+selected2.val()+"'>"+selected1.text()+"+"+selected2.text()+"</option>");
            selected1.remove();
            selected2.remove();

        });
        $('#btn-remove').click(function(){
            $('#select-to option:selected').each( function() {
                $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
                var select1_val = $(this).attr("data-val1");
                var select2_val = $(this).attr("data-val2");
                var select1_text = $(this).attr("data-text1");
                var select2_text = $(this).attr("data-text2");

                $('#select-from1').append("<option value='"+select1_val+"'>"+select1_text+"</option>");
                $('#select-from2').append("<option value='"+select2_val+"'>"+select2_text+"</option>");
                $(this).remove();
            });
        });
    });
    </script>
将选项添加到第三个选择

后的

html页面 

<html><head>
        <title>Database Field Mapping from Excel</title>
    </head>
    <body style="zoom: 1;">
        <form action="action.php" method="post">
            <select name="selectfrom" id="select-from1" size="8">

                <option value="Email">Field Email</option>

                <option value="ID">Field ID</option>

                <option value="name">Field name</option>





                <option value="state">Field state</option>

                <option value="country">Field country</option>

                <option value="sex">Field sex</option>

            </select>

            <select name="slectfrom1" id="select-from2" size="8">

                <option value="id">Field id</option>

                <option value="name">Field name</option>

                <option value="email">Field email</option>

                <option value="address">Field address</option>

                <option value="city">Field city</option>





                <option value="sex">Field sex</option>
                        </select>
            <button type="button" id="btn-add">Add »</button>
            <button type="button" id="btn-remove">« Remove</button>

            <select name="selectto[]" id="select-to" multiple=""><option data-val1="city" data-val2="state" data-text1="Field city" data-text2="Field state" value="city+state">Field city+Field state</option><option data-val1="address" data-val2="designation" data-text1="Field address" data-text2="Field designation" value="address+designation">Field address+Field designation</option></select>
            <input type="text" name="vein" value="aaa">
            <br><button type="submit" value="submit">Submit</button>
        </form>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('#btn-add').click(function(){

            var selected1 = $('#select-from1 option:selected');
            var selected2 = $('#select-from2 option:selected');

            if(selected1.length == 0 || selected2.length == 0){
              alert("Please select options from both the select boxes");
              return;
            }

            $('#select-to').append("<option data-val1='"+selected1.val()+"' data-val2='"+selected2.val()+"' data-text1='"+selected1.text()+"' data-text2='"+selected2.text()+"' value='"+selected1.val()+"+"+selected2.val()+"'>"+selected1.text()+"+"+selected2.text()+"</option>");
            selected1.remove();
            selected2.remove();

        });
        $('#btn-remove').click(function(){
            $('#select-to option:selected').each( function() {
                $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
                var select1_val = $(this).attr("data-val1");
                var select2_val = $(this).attr("data-val2");
                var select1_text = $(this).attr("data-text1");
                var select2_text = $(this).attr("data-text2");

                $('#select-from1').append("<option value='"+select1_val+"'>"+select1_text+"</option>");
                $('#select-from2').append("<option value='"+select2_val+"'>"+select2_text+"</option>");
                $(this).remove();
            });
        });
    });
    </script>    

</body></html>

1 个答案:

答案 0 :(得分：0)

为什么你有select数组名？

数组名称仅适用于多个选择，复选框。

而不是

  

<select name="selectfrom[]" id="select-from1" size="8">

试试这个

  

<select name="selectfrom" id="select-from1" size="8">

相关问题
最新问题