单击提交按钮后，不会提交 JavaScript 输入字段值

时间：2021-06-28 15:09:33

标签： javascript html jquery

我正在尝试提交使用 JavaScript 添加的输入字段的值，我创建了表单并包含了在表单中添加输入字段的脚本，并且我还添加了一个提交按钮，但是在单击后提交按钮，输入字段的值没有被提交，希​​望有人帮助我<3

我包含了完整的源代码，非常感谢

/* sc-component-id: sc-bdVaJa */

.ixTfPP{display:inline-block;}
/* sc-component-id: sc-bwzfXH */

.kJnpoy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;background-color:white;padding:10px;border-radius:3px;overflow:hidden;}.kJnpoy.is-invalid{border:1px solid #ff3860;}
/* sc-component-id: sc-htpNat */

.dcxtLi{height:1em;}
/* sc-component-id: sc-bxivhb */

.kvysci{position:relative;margin-left:0.5em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:-webkit-transform 0.5s;-webkit-transition:transform 0.5s;transition:transform 0.5s;-webkit-transform:translateX( 0 );-ms-transform:translateX( 0 );transform:translateX( 0 );}.kvysci::after{content:attr(data-max);visibility:hidden;height:0;}.kvysci .credit-card-input{border:0px;position:absolute;width:100%;font-size:1em;}.kvysci .credit-card-input:focus{outline:0px;}.kvysci .zip-input{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.eGrSDA{position:relative;margin-left:0.5em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:-webkit-transform 0.5s;-webkit-transition:transform 0.5s;transition:transform 0.5s;-webkit-transform:translateX( 4rem );-ms-transform:translateX( 4rem );transform:translateX( 4rem );}.eGrSDA::after{content:attr(data-max);visibility:hidden;height:0;}.eGrSDA .credit-card-input{border:0px;position:absolute;width:100%;font-size:1em;}.eGrSDA .credit-card-input:focus{outline:0px;}.eGrSDA .zip-input{display:none;}
/* sc-component-id: sc-EHOje */

.cesLdd{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:16px;font-variant:normal;margin:0;padding:20px;-webkit-font-smoothing:antialiased;}</style>
<style type="text/css">.custom-field {
  -webkit-box-shadow: 0 1px 3px 0 rgb(212, 212, 212);
          box-shadow: 0 1px 3px 0 rgb(212, 212, 212);
  border: 3px solid teal;
}

.custom-container {
  border: 3px solid pink;
}

.custom-input {
  border: 1px solid gray !important;
}

.custom-danger-text {
  font-size: 1rem;
  border-bottom: 1px solid green;
}
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    
</head>

<body>
    <form method="post">
    <div class="sc-EHOje cesLdd" style="background-color: rgb(240, 240, 240);">
    <div class="sc-bdVaJa ixTfPP">
    <div class="sc-bwzfXH kJnpoy" id="field-wrapper">
    <img class="sc-htpNat dcxtLi" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTc2IDM3NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5wbGFjZWhvbGRlcjwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9InBsYWNlaG9sZGVyIj4gICAgICAgICAgICA8cGF0aCBkPSJNNTI3LjkzMzc5MywzNzYuOTk4MjggTDQ4LjA2NjIwNjksMzc2Ljk5ODI4IEMzNS40MjM0ODAzLDM3Ny4xMDM5NjggMjMuMjU2NTg2NCwzNzIuMTg3ODkgMTQuMjQyMzI4MSwzNjMuMzMxNjE4IEM1LjIyODA2OTc1LDM1NC40NzUzNDYgMC4xMDQ5MTcxMDIsMzQyLjQwNDQwNyAwLDMyOS43NzQ0OTQgTDAsNDcuMjI1NDU1NCBDMC4xMDQ5MTcxMDIsMzQuNTk1NTQyNSA1LjIyODA2OTc1LDIyLjUyNDYwNCAxNC4yNDIzMjgxLDEzLjY2ODMzMTkgQzIzLjI1NjU4NjQsNC44MTIwNTk4NSAzNS40MjM0ODAzLC0wLjEwNDAxODI5NiA0OC4wNjYyMDY5LDAuMDAxNjY5NDg2NDYgTDUyNy45MzM3OTMsMC4wMDE2Njk0ODY0NiBDNTQwLjU3NjUyLC0wLjEwNDAxODI5NiA1NTIuNzQzNDE0LDQuODEyMDU5ODUgNTYxLjc1NzY3MiwxMy42NjgzMzE5IEM1NzAuNzcxOTMsMjIuNTI0NjA0IDU3NS44OTUwODMsMzQuNTk1NTQyNSA1NzYsNDcuMjI1NDU1NCBMNTc2LDMyOS45NzI5MTMgQzU3NS42NzI3ODYsMzU2LjE5NTY2MyA1NTQuMTg0MjczLDM3Ny4yMTg4NTcgNTI3LjkzMzc5MywzNzYuOTk4MjggWiIgaWQ9InNoYXBlIiBmaWxsPSIjRThFQkVFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiM3NTc1NzUiIHN0cm9rZS13aWR0aD0iMjAiIHg9IjQxOCIgeT0iNTgiIHdpZHRoPSI5MSIgaGVpZ2h0PSI2MyIgcng9IjMwIj48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjNzU3NTc1IiB4PSI1MyIgeT0iMjA4IiB3aWR0aD0iMTA3IiBoZWlnaHQ9IjQwIiByeD0iOCI+PC9yZWN0PiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzc1NzU3NSIgeD0iNDEzIiB5PSIyMDgiIHdpZHRoPSIxMDciIGhlaWdodD0iNDAiIHJ4PSI4Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjNzU3NTc1IiB4PSIyOTMiIHk9IjIwOCIgd2lkdGg9IjEwNyIgaGVpZ2h0PSI0MCIgcng9IjgiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIGZpbGw9IiM3NTc1NzUiIHg9IjE3MyIgeT0iMjA4IiB3aWR0aD0iMTA3IiBoZWlnaHQ9IjQwIiByeD0iOCI+PC9yZWN0PiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+">
    

<label class="sc-bxivhb kvysci" data-max="9999 9999 9999 9999 9999">
    <input id="card-number" autocomplete="cc-number" class="credit-card-input " placeholder="Card number" type="text">
    </label>
    <label class="sc-bxivhb eGrSDA" data-max="MM / YY 9">
    <input id="card-expiry" autocomplete="cc-exp" class="credit-card-input " placeholder="MM/YY" type="text">
    </label>
    <label class="sc-bxivhb eGrSDA" data-max="99999">
    <input id="cvc" autocomplete="off" class="credit-card-input " placeholder="CVC" type="text">
    </label>
    <label class="sc-bxivhb eGrSDA" data-max="999999">
    <input id="zip" class="credit-card-input zip-input " placeholder="Zip" type="text">
    </label>
    </div>
    </div>
    </div>
    </div>
    <input type="submit">
    </form>


</body>
</html>

1 个答案:

答案 0 :(得分：0)

欢迎来到 SO！如上所述，表单输入必须具有 name 属性，以便在提交表单后在服务器端接收输入的值。有关提交/处理表单数据的更多信息，请参阅 https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data。

此外，请始终记住对来自表单的数据进行清理（在将其插入数据库等之前）When is it best to sanitize user input?

我为您调整了代码块（添加了 name 属性，并删除了一些额外的 div 标签）

/* sc-component-id: sc-bdVaJa */

.ixTfPP{display:inline-block;}
/* sc-component-id: sc-bwzfXH */

.kJnpoy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;background-color:white;padding:10px;border-radius:3px;overflow:hidden;}.kJnpoy.is-invalid{border:1px solid #ff3860;}
/* sc-component-id: sc-htpNat */

.dcxtLi{height:1em;}
/* sc-component-id: sc-bxivhb */

.kvysci{position:relative;margin-left:0.5em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:-webkit-transform 0.5s;-webkit-transition:transform 0.5s;transition:transform 0.5s;-webkit-transform:translateX( 0 );-ms-transform:translateX( 0 );transform:translateX( 0 );}.kvysci::after{content:attr(data-max);visibility:hidden;height:0;}.kvysci .credit-card-input{border:0px;position:absolute;width:100%;font-size:1em;}.kvysci .credit-card-input:focus{outline:0px;}.kvysci .zip-input{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.eGrSDA{position:relative;margin-left:0.5em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:-webkit-transform 0.5s;-webkit-transition:transform 0.5s;transition:transform 0.5s;-webkit-transform:translateX( 4rem );-ms-transform:translateX( 4rem );transform:translateX( 4rem );}.eGrSDA::after{content:attr(data-max);visibility:hidden;height:0;}.eGrSDA .credit-card-input{border:0px;position:absolute;width:100%;font-size:1em;}.eGrSDA .credit-card-input:focus{outline:0px;}.eGrSDA .zip-input{display:none;}
/* sc-component-id: sc-EHOje */

.cesLdd{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:16px;font-variant:normal;margin:0;padding:20px;-webkit-font-smoothing:antialiased;}</style>
<style type="text/css">.custom-field {
  -webkit-box-shadow: 0 1px 3px 0 rgb(212, 212, 212);
          box-shadow: 0 1px 3px 0 rgb(212, 212, 212);
  border: 3px solid teal;
}

.custom-container {
  border: 3px solid pink;
}

.custom-input {
  border: 1px solid gray !important;
}

.custom-danger-text {
  font-size: 1rem;
  border-bottom: 1px solid green;
}
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/> 
</head>

<body>
    <form method="post">
        <div class="sc-EHOje cesLdd" style="background-color: rgb(240, 240, 240);">
            <div class="sc-bdVaJa ixTfPP">
                <div class="sc-bwzfXH kJnpoy" id="field-wrapper"> <img class="sc-htpNat dcxtLi" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTc2IDM3NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5wbGFjZWhvbGRlcjwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9InBsYWNlaG9sZGVyIj4gICAgICAgICAgICA8cGF0aCBkPSJNNTI3LjkzMzc5MywzNzYuOTk4MjggTDQ4LjA2NjIwNjksMzc2Ljk5ODI4IEMzNS40MjM0ODAzLDM3Ny4xMDM5NjggMjMuMjU2NTg2NCwzNzIuMTg3ODkgMTQuMjQyMzI4MSwzNjMuMzMxNjE4IEM1LjIyODA2OTc1LDM1NC40NzUzNDYgMC4xMDQ5MTcxMDIsMzQyLjQwNDQwNyAwLDMyOS43NzQ0OTQgTDAsNDcuMjI1NDU1NCBDMC4xMDQ5MTcxMDIsMzQuNTk1NTQyNSA1LjIyODA2OTc1LDIyLjUyNDYwNCAxNC4yNDIzMjgxLDEzLjY2ODMzMTkgQzIzLjI1NjU4NjQsNC44MTIwNTk4NSAzNS40MjM0ODAzLC0wLjEwNDAxODI5NiA0OC4wNjYyMDY5LDAuMDAxNjY5NDg2NDYgTDUyNy45MzM3OTMsMC4wMDE2Njk0ODY0NiBDNTQwLjU3NjUyLC0wLjEwNDAxODI5NiA1NTIuNzQzNDE0LDQuODEyMDU5ODUgNTYxLjc1NzY3MiwxMy42NjgzMzE5IEM1NzAuNzcxOTMsMjIuNTI0NjA0IDU3NS44OTUwODMsMzQuNTk1NTQyNSA1NzYsNDcuMjI1NDU1NCBMNTc2LDMyOS45NzI5MTMgQzU3NS42NzI3ODYsMzU2LjE5NTY2MyA1NTQuMTg0MjczLDM3Ny4yMTg4NTcgNTI3LjkzMzc5MywzNzYuOTk4MjggWiIgaWQ9InNoYXBlIiBmaWxsPSIjRThFQkVFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiM3NTc1NzUiIHN0cm9rZS13aWR0aD0iMjAiIHg9IjQxOCIgeT0iNTgiIHdpZHRoPSI5MSIgaGVpZ2h0PSI2MyIgcng9IjMwIj48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjNzU3NTc1IiB4PSI1MyIgeT0iMjA4IiB3aWR0aD0iMTA3IiBoZWlnaHQ9IjQwIiByeD0iOCI+PC9yZWN0PiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzc1NzU3NSIgeD0iNDEzIiB5PSIyMDgiIHdpZHRoPSIxMDciIGhlaWdodD0iNDAiIHJ4PSI4Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjNzU3NTc1IiB4PSIyOTMiIHk9IjIwOCIgd2lkdGg9IjEwNyIgaGVpZ2h0PSI0MCIgcng9IjgiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIGZpbGw9IiM3NTc1NzUiIHg9IjE3MyIgeT0iMjA4IiB3aWR0aD0iMTA3IiBoZWlnaHQ9IjQwIiByeD0iOCI+PC9yZWN0PiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+">
                    <label class="sc-bxivhb kvysci" data-max="9999 9999 9999 9999 9999">
                        <input name="card-number" id="card-number" autocomplete="cc-number" class="credit-card-input " placeholder="Card number" type="text"> </label>
                    <label class="sc-bxivhb eGrSDA" data-max="MM / YY 9">
                        <input name="card-expiry" id="card-expiry" autocomplete="cc-exp" class="credit-card-input " placeholder="MM/YY" type="text"> </label>
                    <label class="sc-bxivhb eGrSDA" data-max="99999">
                        <input name="card-cvc" id="cvc" autocomplete="off" class="credit-card-input " placeholder="CVC" type="text"> </label>
                    <label class="sc-bxivhb eGrSDA" data-max="999999">
                        <input name="zip" id="zip" class="credit-card-input zip-input " placeholder="Zip" type="text"> </label>
                </div>
            </div>
        </div>
        <input type="submit"> </form>
</body>

</html>

相关问题
最新问题