文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用javascript <type=>下一步</“>>将html元素完全更改为另一个<输入按钮”submit javascript

问使用javascript <type=>下一步</“>>将html元素完全更改为另一个<输入按钮”submit javascript
EN

Stack Overflow用户
提问于 2018-04-30 14:39:05
回答 4查看 1.1K关注 0票数 0

我有一个多部分的形式:当用户填满每个页面，并点击下面给出的下一步按钮。当在最后一页，下一步按钮更改为提交元素，但我不能提交数据到数据库(MySQL)我需要输入type=“提交”而不是一个按钮。我想要将所有按钮更改为输入类型submit。我的脚本如下：

按钮的HTML

代码语言：javascript
复制
<div style="float:right;">
    <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
    <button type="button" name="submit1" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>

脚本

代码语言：javascript
复制
function showTab1(n) {
    // This function will display the specified tab of the form...
    var x = document.getElementsByClassName("tab");
    x[n].style.display = "block";
    //... and fix the Previous/Next buttons:
    if (n == 0) {
        document.getElementById("prevBtn").style.display = "none";
    } else {
        document.getElementById("prevBtn").style.display = "inline";
    }
    if (n == (x.length - 1)) {
        document.getElementById("nextBtn").innerHTML = "Submit Form";
    } else {
        document.getElementById("nextBtn").innerHTML = "Next";
    }
}
javascript
html
EN

回答 4

Stack Overflow用户

发布于 2018-08-26 08:49:40

在“style=：none;”按钮下添加一个input元素，并给它一个id="js-submit-form“

代码语言：javascript
复制
    <div style="float:right;">
        <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
        <button type="button" name="submit1" id="nextBtn" onclick="nextPrev(1)">Next</button>
        <input type="submit" id="js-submit-form" name="submit" value="Submit Form" style="display: none;">
    </div>

然后，我为#nextBtn设置了display:none，为#js-submit-form设置了display:block

代码语言：javascript
复制
function showTab(n) {

 // This function will display the specified tab of the form ...
 var x = document.getElementsByClassName("tab");
 x[n].style.display = "block";

 // ... and fix the Previous/Next buttons:
 if (n == 0) {
  document.getElementById("prevBtn").style.display = "none";
 } else {
  document.getElementById("prevBtn").style.display = "inline";
 }

 if (n == (x.length - 1)) {
  document.getElementById("nextBtn").style.display = "none";
  document.getElementById("js-submit-form").style.display = "inline";
} else {
  document.getElementById("nextBtn").style.display = "inline";
  document.getElementById("js-submit-form").style.display = "none";
  document.getElementById("nextBtn").innerHTML = "Next";
}

 // ... and run a function that displays the correct step indicator:
 fixStepIndicator(n)

}

然后根据您的需要设置输入的样式。希望这能有所帮助;-)

仅供参考此多部分表单是由w3schools创建的

票数 1
EN

Stack Overflow用户

发布于 2018-04-30 15:14:15

首先，将button元素更改为input类型的按钮元素：

代码语言：javascript
复制
<div style="float:right;">
    <input type="button" id="prevBtn" onclick="nextPrev(-1)" value="Previous" />
    <input type="button" name="submit1" id="nextBtn" onclick="nextPrev(1)" value="Next" />
</div>

然后在Javascript中，您可以将submit按钮的type更改为submit

代码语言：javascript
复制
function showTab1(n) {
    // This function will display the specified tab of the form...
    var x = document.getElementsByClassName("tab");
    x[n].style.display = "block";
    //... and fix the Previous/Next buttons:
    if (n == 0) {
        document.getElementById("prevBtn").style.display = "none";
    } else {
        document.getElementById("prevBtn").style.display = "inline";
    }
    var nextBtn = document.getElementById("nextBtn");
    if (n == (x.length - 1)) {
        nextBtn.setAttribute('value', 'Submit Form');
        nextBtn.setAttribute('type', 'submit');
        nextBtn.removeAttribute('onclick');
    } else {
        nextBtn.setAttribute('value', 'Next');
        nextBtn.setAttribute('type', 'button');
    }
}

请注意，您还必须删除或更改submit按钮的onclick属性。

票数 0
EN

Stack Overflow用户

发布于 2018-04-30 15:20:58

我创建了我认为是您的…代码的工作片段

我认为最好的方法是使用提交的另一个元素。

因此，我添加了一个隐藏的提交按钮，它在必要时显示。

这就是你想要实现的吗？

请参阅我在代码中的注释：

​

代码语言：javascript
复制
// Added this vars here
var tabs = document.getElementsByClassName("tab");
var prev = document.getElementById("prevBtn");
var next = document.getElementById("nextBtn");
var subm = document.getElementById("submBtn"); // New button
var n = 0;

function nextPrev(i) { // Renamed your function

  // Added: Hide all tabs
  for (var j = 0; j < tabs.length; j++) {
    tabs[n].style.display = "none";
  }

  // This function will display the specified tab of the form...
  n = n + i;
  tabs[n].style.display = "block";

  //... and fix the Previous/Next buttons:
  if (n == 0) {
    prev.style.display = "none";
  } else {
    prev.style.display = "inline";
  }
  if (n == (tabs.length - 1)) {
    next.style.display = "none";
    subm.style.display = "inline";
  } else {
    next.style.display = "inline";
    subm.style.display = "none";
  }
}

nextPrev(0); // Launch the function on load
代码语言：javascript
复制
.tab {
  display: none;
}

#submBtn {
  display: none;
}
代码语言：javascript
复制
<form><!-- Added form -->
  <div style="float:right;">
    <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
    <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
    <!-- Added this button -->
    <button type="submit" name="submit1" id="submBtn">Submit Form</button>
  </div>
  <!-- Added tabs -->
  <div class="tab">tab 0</div>
  <div class="tab">tab 1</div>
  <div class="tab">tab 2</div>
  <div class="tab">tab 3</div>
</form>

​

⋅⋅⋅

disabled disabled属性

您可以使用disabled属性来代替显示/隐藏元素。

下面是使用它的相同代码：

​

代码语言：javascript
复制
// Added this vars here
var tabs = document.getElementsByClassName("tab");
var prev = document.getElementById("prevBtn");
var next = document.getElementById("nextBtn");
var subm = document.getElementById("submBtn"); // New button
var n = 0;

function nextPrev(i) { // Renamed your function

  // Added: Hide all tabs
  for (var j = 0; j < tabs.length; j++) {
    tabs[n].style.display = "none";
  }

  // This function will display the specified tab of the form...
  n = n + i;
  tabs[n].style.display = "block";

  //... and fix the Previous/Next buttons:
  if (n == 0) {
    prev.disabled = true;
  } else {
    prev.disabled = false;
  }
  if (n == (tabs.length - 1)) {
    next.disabled = true;
    subm.disabled = false;
  } else {
    next.disabled = false;
    subm.disabled = true;
  }
}

nextPrev(0); // Launch the function on load
代码语言：javascript
复制
.tab {
  display: none;
}
代码语言：javascript
复制
<form><!-- Added form -->
  <div style="float:right;">
    <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
    <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
    <!-- Added this button -->
    <button type="submit" name="submit1" id="submBtn">Submit Form</button>
  </div>
  <!-- Added tabs -->
  <div class="tab">tab 0</div>
  <div class="tab">tab 1</div>
  <div class="tab">tab 2</div>
  <div class="tab">tab 3</div>
</form>

​

我希望它能帮上忙。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50095181

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档