表单影响其他表单并提交按钮禁用/启用答案

【问题标题】：Forms affect other forms and submit button Disable/enable表单影响其他表单并提交按钮禁用/启用
【发布时间】：2015-06-27 12:19:04
【问题描述】：

我应该编写一个包含更多包的页面。首先;访问者必须选择人员编号，选择开始按钮后将启用，并且当访问者按钮使用 get 方法重定向到 form4.html 时。当我放置 3 个表格时，所有表格都会影响其他表格。请帮帮我

<!DOCTYPE html>
<html lang="en">
	<head>
		<title></title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>
		
	<!----Drop Down And Submit - Start----->	
		<script type='text/javascript'>//<![CDATA[ 
$(function(){
$(document).ready(function() {

//Start Buttons
    $(".nextbutton").button({ disabled: true });
    
    $('.dropdown').change(function() {
        if ($('.dropdown').val() == 0) {
          $(".nextbutton").button({ disabled: true });
        } else {
          $(".nextbutton").button({ disabled: false });
        }
    });

});
});//]]>  
</script>
	<!----Drop Down And Submit - End----->
	        <script type="text/javascript">
        function submitform()
        {
            document.forms["drop_list"].submit();
        }
        </script>
	</head>
	<body>
		
							
<h3>PACKAGE - 1 </h3>
							<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
	<select name="select" class="dropdown">
			<option value=''>Person Number</option>
            <option value="Person-1">1</option>
            <option value="Person-2">2</option>
            <option value="Person-3">3</option>
            <option value="Person-4">4</option>
            <option value="Person-5">5</option>
            <option value="Person-6">6</option>
            <option value="Person-7">7</option>
            <option value="Person-8">8</option>
            <option value="Person-9">9</option>
          	</select><br><br>

		  <input class="nextbutton" value="Start" type="button" onClick="submitform()"></form>
					  
	<br>_____________________________________________________________________<br>
			
							
<h3>PACKAGE - 2 </h3>
<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
	<select name="select" class="dropdown">
			<option value=''>Person Number</option>
            <option value="Person-1">1</option>
            <option value="Person-2">2</option>
            <option value="Person-3">3</option>
            <option value="Person-4">4</option>
            <option value="Person-5">5</option>
            <option value="Person-6">6</option>
            <option value="Person-7">7</option>
            <option value="Person-8">8</option>
            <option value="Person-9">9</option>
          	</select><br><br>

		  <input class="nextbutton" value="Start" type="button" onClick="submitform()"></form>
		  
<br>_____________________________________________________________________<br>
	  
					
<h3>PACKAGE - 3 </h3>
	<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
	<select name="select" class="dropdown">
			<option value=''>Person Number</option>
            <option value="Person-1">1</option>
            <option value="Person-2">2</option>
            <option value="Person-3">3</option>
            <option value="Person-4">4</option>
            <option value="Person-5">5</option>
            <option value="Person-6">6</option>
            <option value="Person-7">7</option>
            <option value="Person-8">8</option>
            <option value="Person-9">9</option>
          	</select><br><br>

		  <input class="nextbutton" value="Start" type="button" onClick="submitform()"></form>
					  
				

	
	</body>
</html>

【问题讨论】：

我很困惑...您是否想让每个按钮点击不同的控制器？
你的第一个表单元素没有关闭。
在您的 change-函数中，如果下拉列表的值为不为零。
嗨@uUuR 如果您找到了对您有帮助的答案，您可以将该答案标记为已接受。

标签： javascript php jquery html forms

【解决方案1】：

就像我在对您的问题的评论中所说的那样，您的问题之一是您实际上一次更改了类 .nextbutton 的所有按钮。

您可以将更改功能更改为

  $('.dropdown').change(function() {
    $(this.form).find('.nextbutton').button({ disabled: this.value === '' });
  });

所做的是使用触发函数的元素this。通过使用 this.form 我得到了那个元素的形式。并且我只更改当前表单上的按钮。

我也去掉了 if 语句，因为那是一个布尔表达式，而 disabled 属性也是一个布尔值。

【讨论】：