jquery - 带消息框的多个表单上的HTML5 float 提交按钮？

我的单页应用程序中有多种表单。每个表单具有不同数量的元素，其中一些元素将需要用户滚动。最初，我的“提交”按钮位于表单的最底部。一些用户询问此按钮是否可以浮动并且始终可见。因此，我正在寻找适用于所有形式的一般解决方案。问题之一是每个表单的右上角都有“清除表单”按钮。第二个问题是某些表格在“清除表格”旁边可能还有一个按钮。所以我不确定放置“提交”按钮的最佳位置是什么？按钮旁边还有一条消息，如果“记录已成功保存”，则会通知用户。或“记录已成功更新”。 。如果有人可以提供帮助或提出示例，最好的解决方案是什么，请告诉我！提前致谢。这是我的应用程序中一种形式的示例：

div.submitBox {
	position:fixed;
	top:40px;
	left:330px;
}
.required:before {
    content: '*';
    color: red;
    margin-right: 5px;
}
form.frmLayout {
	max-width: 1200px;
  height: 450px;
}
form.frmLayout fieldset {
	border: #ccc 2px solid;
	margin: 10px;
	border-radius:3px;
}
form.frmLayout legend {
	font-weight: bold;
	background-color: #c8e2db;
	border-radius:3px;
	padding: 3px;
	border: #ccc 2px solid;
}
form.frmLayout label {
	float: left;
  font-weight: bold;
  display: block;
  width: 100px;
}
form.frmLayout input[type=text] {
	text-align: left;
}
form.frmLayout input[readonly="readonly"] {
    background-color: #E0DBDD;
}

<form name="demoForm" id="demoForm" method="POST" action="#" class="frmLayout">
		<fieldset>
			<legend>Demographic</legend>
			<div>
				<div style="float:right;">
					<span><input type="button" name="clearForm" id="clearDemo" value="Clear Form"></span>
				</div>
			</div>
			<div class="formItem">
				<span style="color:red;">* <b>Required Fields</b></span>
			</div>
			<div class="formItem">
				<label for="last_name" class="required">Last Name:</label>
				<input type="text" name="frm_lname" id="frm_lname" value="" size="20" maxlength="30" required />
			</div>
			<div class="formItem">
				<label for="first_name" class="required">First Name:</label>
				<input type="text" name="frm_fname" id="frm_fname" value="" size="20" maxlength="30" required />
			</div>
			<div class="formItem">
				<label for="dob" class="required">DOB:</label>
				<input type="text" name="frm_dob" id="frm_dob" value="" size="10" maxlength="10" placeholder="MM/DD/YYYY" required />
			</div>
			<div class="formItem">
				<label for="gender" class="required">Gender:</label>
				<input type="text" name="frm_gender" id="frm_gender" value="" size="1" maxlength="1" title="F = Female; M = Male" pattern="[MmFf]" required />
			</div>
			<div class="submitBox">
				<span><input type="submit" name="frmSubmit" id="frmSubmit" value="Submit" /></span>
				<span style="float:right;" id="MsgDemoForm"></span>
			</div>
		</fieldset>
	</form>

最佳答案

因此，您可以使提交区域“固定”在可见区域的底部。这样可以使“提交”按钮在通常不存在的情况下始终存在，但在查看时返回其原始位置。

神奇的是stickIt()函数。它检查.submitBox的顶部是否大于.testArea可视区域的高度。如果绝对位置，将.submitBox放在可见区域的底部。

您需要对所有样式进行样式设置，以便将其放置在其他元素上时看起来更漂亮，而不是在标签和输入上方没有样式的按钮。从UI / UX的角度（我不是专家），我认为这不是最好的解决方案，但不是您的用户所要求的解决方案。我之所以这样说，是因为您希望用户滚动浏览所有必填字段并提交。如果您事先显示提交按钮，他们可能会认为该字段是“已完成”，并尝试提交不完整的表格。

您可以将提交区域放在右上角，“清除表单”按钮位于同一区域，然后禁用该按钮，直到正确填写了所有必需的表单。这是两全其美的方法，因为该按钮始终可见，但在满足要求之前仍然无法使用。

$('.testArea').on('scroll', stickIt);
stickIt();

function stickIt() {

  var submitBox = $('.submitBox'),
    testArea = $('.testArea'),
    offset = 25;

  if (submitBox.offset().top > $(this).scrollTop() + offset) {
    submitBox.addClass('sticky').css('bottom', testArea.height() + submitBox.height());
  } else {
    submitBox.removeClass('sticky');
  }

}

.testArea {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: scroll;
}

div.submitBox {
  width: 100%;
}

div.submitBox.sticky {
  position: absolute;
  bottom: 0;
}

.frmLayout {
  position: relative;
}

.required:before {
  content: '*';
  color: red;
  margin-right: 5px;
}

form.frmLayout {
  max-width: 1200px;
  min-height: 300px;
}

form.frmLayout fieldset {
  border: #ccc 2px solid;
  margin: 10px;
  border-radius: 3px;
}

form.frmLayout legend {
  font-weight: bold;
  background-color: #c8e2db;
  border-radius: 3px;
  padding: 3px;
  border: #ccc 2px solid;
}

form.frmLayout label {
  float: left;
  font-weight: bold;
  display: block;
  width: 100px;
}

form.frmLayout input[type=text] {
  text-align: left;
}

form.frmLayout input[readonly="readonly"] {
  background-color: #E0DBDD;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testArea">

  <form name="demoForm" id="demoForm" method="POST" action="#" class="frmLayout">
    <fieldset>
      <legend>Demographic</legend>
      <div>
        <div style="float:right;">
          <span><input type="button" name="clearForm" id="clearDemo" value="Clear Form"></span>
        </div>
      </div>
      <div class="formItem">
        <span style="color:red;">* <b>Required Fields</b></span>
      </div>
      <div class="formItem">
        <label for="last_name" class="required">Last Name:</label>
        <input type="text" name="frm_lname" id="frm_lname" value="" size="20" maxlength="30" required />
      </div>
      <div class="formItem">
        <label for="first_name" class="required">First Name:</label>
        <input type="text" name="frm_fname" id="frm_fname" value="" size="20" maxlength="30" required />
      </div>
      <div class="formItem">
        <label for="dob" class="required">DOB:</label>
        <input type="text" name="frm_dob" id="frm_dob" value="" size="10" maxlength="10" placeholder="MM/DD/YYYY" required />
      </div>
      <div class="formItem">
        <label for="gender" class="required">Gender:</label>
        <input type="text" name="frm_gender" id="frm_gender" value="" size="1" maxlength="1" title="F = Female; M = Male" pattern="[MmFf]" required />
      </div>
      <div class="submitBox">
        <span><input type="submit" name="frmSubmit" id="frmSubmit" value="Submit" /></span>
        <span style="float:right;" id="MsgDemoForm"></span>
      </div>
    </fieldset>
  </form>

</div>