-1

when i create new element "p" with javascript code and using php to get data from database. then i used form element over the html division in which i want to show data but when i fetech data form element work but data cannot display in division or anywhere in page it flickers, why?

function appendText(){
    
    const para = document.createElement("p");
    
    var str = '<?= $message; ?>'
     
    const node = document.createTextNode(str);
    
    para.appendChild(node);
    
    const element = document.getElementById("div1");
    
    element.appendChild(para);
    
}

this is my code for creating p element in division 1

<div id="div1">

      <p>Hi, how are you</p>
                    
</div>

<div class="footer">
   <form action="" method="post"> 
     <input type="text" class="text" name="data" placeholder="Enter Your Question Here" >
     <input type="submit" name="submit" class="button" value="submit"  id="send-btn" onclick="appendText()">
   </form> 
</div>
Paul T.
  • 4,703
  • 11
  • 25
  • 29
Prafulla Kinkar
  • 1
  • 5
  • 1
    Because your form submits, and therefor the current page reloads. – CBroe Aug 09 '23 at 06:11
  • Then what to do – Prafulla Kinkar Aug 09 '23 at 08:46
  • Check the duplicate question linked on top. – CBroe Aug 09 '23 at 08:59
  • there is no solution on my problem , – Prafulla Kinkar Aug 09 '23 at 15:13
  • _"there is no solution on my problem"_ - sure there is. You either need to prevent the normal form submission via JS; or not use a submit button to begin with, but a click button. – CBroe Aug 10 '23 at 05:44
  • This is not a proper way to close – Prafulla Kinkar Aug 10 '23 at 06:15
  • Okay, then please explain what part of your problem is still not solved, after you prevented the form submission. – CBroe Aug 10 '23 at 06:19
  • I have a database from which i am code to fetch data using php post method, i used session concept, data fetch successfully from database, and used in new form, i also created new html element on runtime, the problem is, when i press submit button the query run, result came, data searched, but during display on webpage it flased and disappeared on screen, why? – Prafulla Kinkar Aug 10 '23 at 06:32
  • Because your form submits, so the page reloads - and that of course removes anything you might have added to the document of the _previously_ displayed page. – CBroe Aug 10 '23 at 06:35
  • Yes, right, so what is logic for, submitting form and display datta at same time, because by your solution i need two buttons for submit and second for create new element p, but this is odd, or if i run two function at same onclick will not support. – Prafulla Kinkar Aug 10 '23 at 06:48
  • Why would you add this new element via JavaScript in the first place, if you intend to actually submit the form? Create it via PHP then, while you are processing the submitted form data. – CBroe Aug 10 '23 at 06:51
  • I want to show fetched data in new element because. Fetched data must shows in new element.again and again on button click – Prafulla Kinkar Aug 10 '23 at 07:09
  • If you want to add new search results to previous ones(?), then you will either have to prevent the form submission, & submit the data in the background (AJAX), or you would have to keep a list of all previously entered search terms (session, or via a hidden field in the form), so that you can fetch _that_ data again from the database after the page reloads. – CBroe Aug 10 '23 at 07:14
  • I have no idea what you are trying to say there. – CBroe Aug 10 '23 at 07:50
  • I don't know what response you expect to such a sentence fragment. – CBroe Aug 10 '23 at 09:22

0 Answers0