Submit button not working properly in my code

Question

Below I have a form with fields. I tried to print data entered from a field using JavaScript and I can get result inside div with id result but when I added the same div inside form, the result entered from the field didn't appear for some reason I didn't figure it. Am I missing something here?

p.s I want to save data entered inside the form because I want to print it

EDIT: i tried code below and it didn't solve the problem since most of answers where about JS page Refresh

userNameInput = function(event) {

  event.preventDefault();
  event.stopPropagation();
  var AmountPaid = document.getElementById('AmountPaid').value;
  var threeMonthGoal = document.getElementById('threeMonthGoal').value;
  var result = document.getElementById('result');

  if (AmountPaid.length < 3) {
    result.textContent = 'Name must contain at least 3 characters';
    //alert('Username must contain at least 3 characters');
  } else {
    result.textContent = AmountPaid
  }
}

submitButton.addEventListener('click', userNameInput, false);

<label>المبلغ المدفوع</label>
<input id="AmountPaid" type="text"></input>
<label>3 Month Goal</label>
<input id="threeMonthGoal" type="text"></input>
<button id="submitButton" type="submit">Print Name</button>
<p id='result'></p> //here it appears
</div>


<div class="container">
  <div id="printMe" class="row" style="padding: 15px;  font-family: 'Cairo', sans-serif !important; ">
    <div>
      <div>
        <div class="row bodyPrint" style="box-shadow: #4b4746 0px 0px 0px 1000px inset !important">
          <div class="col" style="    position: relative;
                            margin-top: 3rem !important;
                            right: -7px;">
            <h6 style="color:white;"> 0780 553 1245</h6>

            <h6 style="color:white;">0780 456 3215 </h6>
          </div>
          <div class="col mt-2"> <img src="newLOgo-white.png" alt="Company logo" style="    margin-bottom: 15px;
                                    max-width: 296px "></div>
          <div class="col " style="position: relative;
                                    margin-top: 3rem!important; left: 135px;">
            <h6 style="color:white;"> شركة فانتاج العقارية للبيع والبناء</h6>

            <h6 style="color:white;">Vantage Real Estate </h6>
          </div>

        </div>
      </div>

      <br>

      <div class="table-responsive" style="overflow-x: clip !important; padding: 25px;">

        <div class="row" style="position: relative; margin-top: -38px;     margin-bottom: -13px;">

          <div class="col" sm="4 mt-2 ">
            <button style="     border: 1px solid lightgrey;   border-radius: 0px; background: transparent; height: 39px;">
                                    No: </button>

          </div>
          <div class="col" sm="4 mt-2 "> </div>

          <div class="col" sm="4 mt-2 ">
            <h4 style="color:white!important; box-shadow: #906248 0px 0px 0px 1000px inset !important; padding:5px; text-align:center;">
              وصل قبض</h4>
          </div>

          <div class="col" sm="4 mt-2 "> </div>
          <div class="col" sm="4 mt-2 ">
            <button style="    font-weight: 900;
                                    border-radius: 0px;
                                    background: transparent;
                                    height: 39px;
                                    border: .5 px solid grey;
                                    position: relative;
                                    border: 1px solid lightgrey;
                                    left: 109px;">
                                    $ : المبلغ </button>

          </div>
          <p id='result'></p> // ican't see result here

        </div>

      </div>

      <div class="row">
        <b-button style="   border-radius: 0px;  border-radius: 0px; background: transparent; height: 39px; position: relative; left: 15px; bottom: 7px; ">
        </b-button>

      </div>
      <div class="row">
        <div>
          <p id='result'></p>
        </div>
        <div class="col-10">
          <h5 style="border:.5px solid lightgray; padding:5px; text-align: end;">
            مبلغ وقدره </h5>
        </div>
        <div class="col" style="    margin: inherit;">
          <h5 style="margin-top: 9px;">: استلمــــت من السيــــد</h5>

        </div>
      </div>

      <h5 style="    text-align: end;">العـــــــــــــــــــــــــــــــــائد للشقـــــــــــــــــــــــــة المـــــــــــــــــبينة مواصــــــــــــــفاتها أدنـــــــــــــــاه و فـــــــــــــي التـــــــــــــــــــــــــــــــاريخ اعــــــــــــــــــلاه</h5>
      <div class="row">
        <table class="table table-bordered">
          <thead>
            <tr class="tr-class">
              <th> &nbsp;الاتجاه</th>

              <th>المساحة</th>

              <th>رقم الشقة</th>
              <th>الطابق</th>
              <th> رقم البناية</th>

            </tr>
          </thead>
          <tbody>
            <tr>
              <td scope="row"></td>

              <td></td>

              <td></td>

              <td class="mt-3"> </td>
              <td></td>

            </tr>

          </tbody>
        </table>
      </div>
    </div>
    <div>

clicking the submit button submits the form and reloads the page. — Barmar, Jun 21 '22 at 20:05
`
` and `
` tags do not get transmitted with forms. Perhaps you need an `` to have your computed information sent with the form. — Tim Roberts, Jun 21 '22 at 20:07
is there a way to save field data inside a form and print it? @Barmar — darya, Jun 21 '22 at 20:07
OR better: Wrap the fields in form tags and use the submit event and preventDefault instead — mplungjan, Jun 21 '22 at 20:09
means doesn't solve the problem and i don't think the problem here in refresh — darya, Jun 21 '22 at 20:25
when i wraped fields with form tags i couldn't see the result in anywhere @mplungjan — darya, Jun 21 '22 at 20:26
Then where are you expecting this information to go? Your "submit" button handler suppresses all the normal actions, so all it's going to do is update the `
` tag. What else are you expecting? — Tim Roberts, Jun 21 '22 at 21:10

score -1 · Answer 1 · answered Jun 22 '22 at 05:17

I suggest you wrap in a form and use the submit event

You can move the event.preventDefault() to an if to only submit if the AmountPaid is > 3 characters, but why not use a number?

What is name? Please update the question to a minimal reproducible example

const result = document.getElementById('result');

const userNameInput = function(event) {
  event.preventDefault();
  let AmountPaid = +document.getElementById('AmountPaid').value;
  let threeMonthGoal = document.getElementById('threeMonthGoal').value;
  result.textContent = +AmountPaid < 100 ? 'Amount must contain at least 3 characters' : AmountPaid
}

document.getElementById("goalForm").addEventListener('submit', userNameInput);

<form id="goalForm">
  <div>
    <label>المبلغ المدفوع</label>
    <input id="AmountPaid" type="text" />
    <label>3 Month Goal</label>
    <input id="threeMonthGoal" type="text" />
    <button id="submitButton" type="submit">Print Amount</button>
    <p id='result'></p> 
  </div>
</form>

Submit button not working properly in my code

1 Answers1