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?

ps 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>

Answer 1

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>