猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如何使用js将表单数据发送到isset函数中

如何以多步骤形式提交表单并插入数据库


我制作了一个类似于多步骤上一个下一个按钮的表单，也是使用js制作的。现在我想提交表单并在 php 中发送到数据库


表单 HTML：


<form action="method.php" method="post" name="htlregistration_F" id="htlregistration_F" enctype="multipart/form-data" >


    <section id="form_part1" class="tab" >

        <h3  class="bodytext bodyheading " ><strong>Applicant Details</strong></h3>

        <label class="bodytext">Applicant First Name<span class="redtext"> *</span>

            <input name="appfirstname_f"  type="text" id="appfirstname_f" class="input form-control" maxlength="25" required>&nbsp;

            <span class="redtext" id="errorFirst" >(Max length 25 chars)</span>

        </label>

    </section>

    <section id="form_part4" class="tab " >

        <h3  class="bodytext bodyheading " ><strong>Contact Details</strong></h3>

        <label class="bodytext" >Phone (Mobile)<span class="redtext" id="errorMobile"> *</span>

            <input name="phmob_f" type="text" id="phmob_f"  class="input form-control" minlength="10" maxlength="10" required="">&nbsp;

            <span class="redtext">(Max length 10 chars)</span>

        </label>

    </section>

    <div style="overflow:auto;">

        <div style="float:right;">

            <button type="button" id="prevBtn" onclick="nextPrev(-1)">&laquo; Previous</button>

            <button type="button" id="nextBtn" name="licensesubmit" onclick="nextPrev(1)">&raquo; Next </button>

        </div>

    </div>        

</form>

我的页面脚本


<script>

    var currentTab = 0; // Current tab is set to be the first tab (0)

    showTab(currentTab); // Display the current tab



    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";

        }

当年话下
浏览 97回答 1
1回答

Smart猫小萌

本质上，javascriptshowTab函数是相同的，但我修改为使用类名。当您达到条件时，将按钮的 按钮从常规按钮n == ( tabs.length - 1 )更改为&nbsp;- 如果用户向后移动条件发生变化，则将按钮再次更改回常规按钮。typebuttonsubmit<?php&nbsp; &nbsp; if( $_SERVER['REQUEST_METHOD']=='POST' ){&nbsp; &nbsp; &nbsp; &nbsp; /* to emulate `method.php` ... process FORM submission... */&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if( isset( $_POST['licensesubmit'] ) ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $_POST['banana']='curvy yellow fruit';&nbsp; #this will only be visible IF isset( $_POST['licensesubmit'] ) is TRUE&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; exit( sprintf( '<pre>%s</pre>',print_r($_POST,true) ) );&nbsp; &nbsp; }?><!DOCTYPE html><html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <meta charset='utf-8' />&nbsp; &nbsp; &nbsp; &nbsp; <title>Multi-stage form</title>&nbsp; &nbsp; &nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body *{font-family:monospace;box-sizing:border-box;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; section{border:1px solid gray;margin:1rem;width:calc( 100% - calc( 4rem + 2px ) );padding:1rem }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .tab{display:none;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .visible{display:block;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .stage1{background:whitesmoke;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .stage2{background:rgba(0,255,0,0.1);}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .stage3{background:rgba(0,0,255,0.1);}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .stage4{background:rgba(255,0,0,0.1);}&nbsp; &nbsp; &nbsp; &nbsp; </style>&nbsp; &nbsp; &nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function showTab(n) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let prev=document.getElementById('prevBtn');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let next=document.getElementById('nextBtn');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let tabs = document.getElementsByClassName('tab');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Array.from( tabs ).forEach( tab=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( tab.classList.contains('visible') )tab.classList.remove('visible');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tabs[ n ].classList.add('visible');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; prev.style.display=( n==0 ) ? 'none' : 'inline';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( n == ( tabs.length - 1 ) ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; next.innerHTML = 'Submit';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; next.type='submit';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; next.innerHTML = 'Next';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; next.type='button'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function nextPrev(i){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; currentTab=currentTab + i;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showTab( currentTab );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let currentTab=0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.addEventListener('DOMContentLoaded',()=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showTab( currentTab );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <form method='post' name='htlregistration_F'><!-- removed action so that this form POSTS to the same page for demonstration -->&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <section id='form_part1' class='tab stage1'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3&nbsp; class='bodytext bodyheading ' ><strong>Applicant Details</strong></h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class='bodytext'>Applicant First Name<span class='redtext'> *</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input name='appfirstname_f'&nbsp; type='text' class='input form-control' maxlength='25' required />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class='redtext' id='errorFirst' >(Max length 25 chars)</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </section>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <section id='form_part2' class='tab stage2'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3&nbsp; class='bodytext bodyheading ' ><strong>Applicant Juggling ability</strong></h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class='bodytext'>Can you juggle hedgehogs?<span class='redtext'> *</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input name='appjuggle'&nbsp; type='text' class='input form-control' maxlength='25' required />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class='redtext' >(Max length 25 chars)</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </section>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <section id='form_part3' class='tab stage3'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3&nbsp; class='bodytext bodyheading ' ><strong>Applicant ESP Level</strong></h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class='bodytext'>ESP ability<span class='redtext'> *</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input name='appesp'&nbsp; type='text' class='input form-control' maxlength='25' required />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class='redtext' >(Max length 25 chars)</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </section>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <section id='form_part4' class='tab stage4'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3&nbsp; class='bodytext bodyheading ' ><strong>Contact Details</strong></h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class='bodytext' >Phone (Mobile)<span class='redtext' id='errorMobile'> *</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input name='phmob_f' type='text' class='input form-control' minlength='10' maxlength='10' required />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class='redtext'>(Max length 10 chars)</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </section>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style='overflow:auto;'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style='float:right;'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type='button' id='prevBtn' onclick='nextPrev(-1)'>&laquo; Previous</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type='button' id='nextBtn' name='licensesubmit' onclick='nextPrev(1)'>&raquo; Next </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </body></html>输出类似于：Array(&nbsp; &nbsp; [appfirstname_f] => geronimo&nbsp; &nbsp; [appjuggle] => fluently&nbsp; &nbsp; [appesp] => none&nbsp; &nbsp; [phmob_f] => 0141 353 3&nbsp; &nbsp; [licensesubmit] =>&nbsp;&nbsp; &nbsp; [banana] => curvy yellow fruit)
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

PHP
php如何把参数放在Http Request Heade？？？？ 1 回答