尝试根据下拉菜单中选择的内容使提交按钮起作用

Question

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

这是我正在使用的代码：

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>

如果可能，我还会将您的 javascript 与您的 html 分开。创建一个外部页面，或在关闭 </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>