Display HTML form values in same page after submit using Ajax

Question

I have a HTML form and I need to display the form field values below the form after user clicks the submit button  How can I do this using HTML and JavaScript Ajax

User · Answer

Try this one    onsubmit  return f this  yourfieldname  value      I hope this will help you

User · Answer

Here is one way to do it    lt  DOCTYPE html gt   lt html gt     lt head lang  en  gt     lt meta charset  UTF-8  gt     lt script language  JavaScript  gt      function showInput             document getElementById  display   innerHTML                        document getElementById  user input   value           lt  script gt      lt  head gt   lt body gt      lt form gt       lt label gt  lt b gt Enter a Message lt  b gt  lt  label gt       lt input type  text  name  message  id  user input  gt     lt  form gt      lt input type  submit  onclick  showInput     gt  lt br  gt     lt label gt Your input   lt  label gt     lt p gt  lt span id  display  gt  lt  span gt  lt  p gt   lt  body gt   lt  html gt    And this is what it looks like when run Cheers

User · Answer

This works    lt html gt   lt head gt   lt script type    text javascript  gt  function write below form    var input   document forms write input to write value  document getElementById  write here   innerHTML  Your input was   input  return false     lt  script gt   lt  head gt    lt  --Insert more code here-- gt   lt body gt   lt form name  write  onsubmit  return write below this    gt   lt input type    text  name  input to write  gt   lt input type    button  value    submit    gt   lt  form gt   lt div id  write here  gt  lt  div gt  lt  body gt   lt  html gt    Returning false from the function never posts it to other page but does edit the html content

User · Answer

x000D   x000D  var tasks       x000D  var descs       x000D   x000D     Get the modal x000D  var modal   document getElementById  myModal    x000D   x000D     Get the button that opens the modal x000D  var btn   document getElementById  myBtn    x000D   x000D     Get the  lt span gt  element that closes the modal x000D  var span   document getElementsByClassName  close   0   x000D   x000D     When the user clicks the button  open the modal  x000D  btn onclick   function     x000D    modal style display    block   x000D    x000D   x000D     When the user clicks on  lt span gt   x   close the modal x000D  span onclick   function     x000D    modal style display    none   x000D    x000D   x000D     When the user clicks anywhere outside of the modal  close it x000D  window onclick   function event    x000D    if  event target    modal    x000D      modal style display    none   x000D      x000D    x000D  var rowCount   1  x000D   x000D  function addTasks     x000D    var temp    style  fa fa-trash   x000D    tasks push document getElementById  taskname   value   x000D    descs push document getElementById  taskdesc   value   x000D    var table   document getElementById  tasksTable    x000D    var row   table insertRow rowCount   x000D    var cell1   row insertCell 0   x000D    var cell2   row insertCell 1   x000D    var cell3   row insertCell 2   x000D    var cell4   row insertCell 3   x000D    cell1 innerHTML   tasks rowCount - 1   x000D    cell2 innerHTML   descs rowCount - 1   x000D    cell3 innerHTML   getDate    x000D    cell4 innerHTML     lt td class  fa fa-trash  gt  lt  td gt    x000D    rowCount    x000D    modal style display    none   x000D    x000D   x000D   x000D  function getDate     x000D    var today   new Date    x000D    var dd   today getDate    x000D    var mm   today getMonth     1    January is 0  x000D   x000D    var yyyy   today getFullYear    x000D   x000D    if  dd  lt  10    x000D      dd    0    dd  x000D      x000D    if  mm  lt  10    x000D      mm    0    mm  x000D      x000D    var today   dd    -    mm    -    yyyy toString   slice 2   x000D    return today  x000D    x000D   lt html gt  x000D   x000D   lt body gt  x000D     lt  -- Trigger Open The Modal -- gt  x000D     lt div style  background-color  0F0F8C  height 45px  gt  x000D       lt h2 style  color  white  gt LOGO lt  h2 gt  x000D     lt  div gt  x000D     lt div gt  x000D       lt button id  myBtn  gt  amp emsp   Add Task  amp emsp  lt  button gt  x000D     lt  div gt  x000D     lt div gt  x000D       lt table id  tasksTable  gt  x000D         lt thead gt  x000D           lt tr style  background-color rgba 201  196  196  0 86   gt  x000D             lt th style  width  150px   gt Name lt  th gt  x000D             lt th style  width  250px   gt Desc lt  th gt  x000D             lt th style  width  120px  gt Date lt  th gt  x000D             lt th style  width  120px class fa fa-trash  gt  lt  th gt  x000D           lt  tr gt  x000D   x000D         lt  thead gt  x000D         lt tbody gt  lt  tbody gt  x000D       lt  table gt  x000D     lt  div gt  x000D     lt  -- The Modal -- gt  x000D     lt div id  myModal  class  modal  gt  x000D   x000D       lt  -- Modal content -- gt  x000D       lt div class  modal-content  gt  x000D   x000D         lt div class  modal-header  gt  x000D   x000D           lt span class  close  gt  amp times  lt  span gt  x000D           lt h3 gt  Add Task lt  h3 gt  x000D         lt  div gt  x000D   x000D         lt div class  modal-body  gt  x000D           lt table style  padding  28px 50px  gt  x000D             lt tr gt  x000D               lt td style  width 150px  gt Name  lt  td gt  x000D               lt td gt  lt input type  text  name  name  id  taskname  style  width  -webkit-fill-available  gt  lt  td gt  x000D             lt  tr gt  x000D             lt tr gt  x000D               lt td gt  x000D                Desc  x000D               lt  td gt  x000D               lt td gt  x000D                 lt textarea name  desc  id  taskdesc  cols  60  rows  10  gt  lt  textarea gt  x000D               lt  td gt  x000D             lt  tr gt  x000D           lt  table gt  x000D         lt  div gt  x000D   x000D         lt div class  modal-footer  gt  x000D           lt button type  submit  value  submit  style  float  right   onclick  addTasks    gt SUBMIT lt  button gt  x000D           lt br gt  x000D           lt br gt  x000D           lt br gt  x000D         lt  div gt  x000D   x000D       lt  div gt  x000D     lt  div gt  x000D   x000D   x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

One more way to do it  if you use form   note that input type is button   lt input type  button  onclick  showMessage    value  submit    gt    Complete code is    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt HTML JavaScript output on same page lt  title gt       lt script type  text JavaScript  gt          function showMessage                var message   document getElementById  message   value              display message innerHTML  message                 lt  script gt   lt  head gt   lt body gt   lt form gt  Enter message   lt input type  text  id    message  gt   lt input type  button  onclick  showMessage    value  submit    gt   lt  form gt   lt p gt  Message is   lt span id    display message  gt  lt  span gt   lt  p gt   lt  body gt   lt  html gt    But you can do it even without form    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt HTML JavaScript output on same page lt  title gt       lt script type  text JavaScript  gt          function showMessage                var message   document getElementById  message   value              display message innerHTML  message                 lt  script gt   lt  head gt   lt body gt  Enter message   lt input type  text  id    message  gt   lt input type  submit  onclick  showMessage    value  submit    gt   lt p gt  Message is   lt span id    display message  gt  lt  span gt   lt  p gt   lt  body gt   lt  html gt    Here you can use either submit or button    lt input type  submit  onclick  showMessage    value  submit    gt    No need to set   return false    from JavaScript function for neither of those two examples

User · Answer

display html form values in same page after clicking on submit button using JS  amp  html codes  After opening it up again it should give that comments in that page

User · Answer

lt script type    text javascript  gt  function get values input id    var input   document getElementById input id  value  document write input      lt  script gt    lt  --Insert more code here-- gt     lt input type    text  id    textfield  gt   lt input type    button  onclick    get  textfield    value    submit  gt    Next time you ask a question here  include more detail and what you have tried

[javascript] Display HTML form values in same page after submit using Ajax

Examples related to javascript

Examples related to html

Examples related to ajax