JavaScript input fields values don't get submitted after clicking the submit button

Question

I'm trying to submit the values of input fields added with JavaScript , I created form and included the script who add the input fields inside the form , and I added a submit button as well, but after clicking the submit button, the values of the input fields don't get submitted, I hope someone help me <3

I included the full source code , Thanks SO MUCH

/* 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>

Hi, but your query is not clear. Where do you want to submit the data to? — Mukul Aryal, Jun 28 '21 at 15:14
The form does not seem to contain any fields... can you post code where the fields are generated? — Peter Krebs, Jun 28 '21 at 15:26
Thanks for editing. As @epascarello surmised, `input` elements need to have a `name` attribute. This is how they are identified by the server when the request is sent. If you add that attribute the request should function correctly. — Rory McCrossan, Jun 28 '21 at 15:38

score 0 · Accepted Answer · answered Jun 28 '21 at 16:01

Welcome to SO! As has been commented above, form inputs must have a name attribute in order to receive the values of the inputs on the server side, once the form is submitted. Please see https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data for more information on submitting / processing form data.

Also, always remember to sanitize your data as it comes in from a form (before inserting it into a database, etc.) When is it best to sanitize user input?

I adjusted the code block for you (added the name attributes, and removed some extra div tags)

/* 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>

JavaScript input fields values don't get submitted after clicking the submit button

1 Answers1