Question

我有一个有几个问题的表格。有一个混合。我有3个下拉菜单，一个用于您姓名的文本点，您的电子邮件和一个评论文本区域。表单上的最后一个元素是一个下拉列表，其中包含批准或拒绝的选项。提交按钮应根据是选择批准还是拒绝将您带到不同的页面。出于某种原因，当我点击提交时，该按钮没有做任何事情。我错过了什么？提前致谢。

以下是我正在使用的代码：

HTML：

<form name="iform" id="formapprovedeny" method="post" onsubmit="" onreset="" enctype="multipart/form-data" action="formapprovedeny" class="iform">

    <br /><br />

    <label for="ApproveDeny">Approve or Deny:</label>

    <select class="iselect" name="ApproveDeny" id="ApproveDeny">
        <?php
        $values = array('Choose an option', 'Approve', 'Deny');

        foreach ($values as $value) {
            $selectString = '';
            if ($value == $jsonData['ApproveDeny']) {
                $selectString = ' selected';
            }

            print '<option value="' . $value . '"' . $selectString . '>' . $value . '</option>';
        }
        ?>
    </select>
    <br /><br />

    <label>&nbsp;</label><button id="button1" onclick="submitForm" type="button">submit</button>
    <input type="hidden" name="tempId" id="tempId" value="<?php print $tempId; ?>" />

</form>

脚本：

<script>
var onApprove = function() {
    submitForm('html_form_judge.php');
};

var onDeny = function() {
    submitForm('html_form_judgedeny.php');
};

$('.iselect').change(function(e) {    
    var dropdown = $('$value');
    var text = $( "$value option:selected" ).text();    

    var $button1= $('#button1');
    $button1.unbind('click');

    if(text == "Approve"){
        $button1.click(onApprove);
        return;
    }

    $button1.click(onDeny);    

});
</script>

Answer 1

首先，将提交按钮更改为实际提交表单的内容，即

<input id="button1" type="submit" />

第二，要获得select的值，你可以简单地调用

var selectedValue = $("#ApproveDeny").val();

Answer 2

当你点击提交按钮时，它会调用submitForm函数，在你的js中你有onApprove和onDeny函数。需要运行函数submitForm。 ReferenceError：找不到变量：submitForm

Answer 3

我简化了你的表格，随意修改：

<强> DEMO

<强> HTML

<form name="iform" id="formapprovedeny" method="post" class="iform">
    <label for="ApproveDeny">Approve or Deny:</label>
    <select class="iselect" name="ApproveDeny" id="ApproveDeny">
        <option value='1'>Approve</option>
        <option value='2'>Deny</option>
    </select>
</form>
<button id="button1" type="button">submit</button>

<强> JAVASCRIPT

var onApprove = function () {
    alert('approve');
    //submitForm('html_form_judge.php');
};

var onDeny = function () {
    alert('deny');
    // submitForm('html_form_judgedeny.php');
};

var submitForm = function () {
    var selection = $('#ApproveDeny').val();

    alert(selection);

    switch (selection) {
        case '1':
            onApprove();
            break;
        case '2':
            onDeny();
            break;
        default:
            alert('Unavailable Action');
    }
};

$("#button1").on('click', function () {
    submitForm();
});

Answer 4

看看这是否有助于您前进。现在，您的表单操作为formapprovedeny。我不确定你是如何处理的，但乍一看，似乎可能会引起一些麻烦。确保这是一个有效的行动。

我也会使用提交按钮类型（除非你有其他要求）。

<form id="myForm" name="myForm" action="myAction.php" method="post">
    ...
    <input type="submit" id="submitBtn" name="submitBtn" value="Submit" />
<form>

如果可能的话，我也会从你的HTML中分离你的javascript。创建外部页面，或在结束</body>标记之前创建脚本块。 如果您使用的是jQuery，请务必先调用它。

我会将您的表单事件附加到提交事件。

<script src="path-to-jquery"></script>
<script>
    $('#myForm').on('submit', funciton(event) {

         var actionURI;

         switch($('#ApproveDeny').val())
         {
             case 'approve':  
                 actionURI = 'approved.php';
                 break;
             case 'approve':  
                 actionURI = 'deny.php';
                 break;
             default:
                 actionURI = 'default.php';
                 break;
         }

         $.ajax({
            type: 'post',
            url: actionURI + 'any other params needed' ,
            timeout: 50000
        }).done(function(response) {
            // Handle response.
        }).fail(function(error) {
            // Handle error.
        });


         event.preventDefault();
    }
</script>

尝试让提交按钮工作，具体取决于下拉列表中选择的内容

4 个答案: