Question 369654 in Html Question posted in
Some basic documentation can be found here.

Html – How to preview a form before submitting,

I am doing a college project, which is College admission form, the work is going good but the condition is before submitting the form how to preview that form for user(students), please help me

I have tried js but couldn’t do it

Tags:

2

Answers


  1. 0

    If you want a preview of the form . You need to create a new component which contains all the results from the form before adding it to database.

    Login or Signup to reply.
  2. 0

    Adding this for my first comment. This is a very basic example of what I was talking about:

    You could, for example, open a popup with the form data and have the actual submit button inside that popup. The "old submit" button from inside your for should not be type submit, it should only trigger the function that opens the preview modal and fills it with data. You can have submit buttons outside a form by using form="myformid" as an attribute on the input type submit button

    The form itself has no submit button but a button that opens a modal for data preview. The preview modal contains an input type submit button which submits the actual form from outside when clicked. You can check the console log to see when the form is submitted.

    Maybe this will help you as a starting point.

    let btnPreview = document.querySelector('.btn-preview');
btnPreview.addEventListener('click', e => {
  let val = document.querySelector('.input-name').value; // Get value of current form input
  document.querySelector('.name').textContent = val; // Set value as content of preview div
  document.querySelector('.modal').classList.add('modal--open'); // Open modal
});

let form = document.querySelector('form');
form.addEventListener('submit', e => {
  document.querySelector('.modal').classList.remove('modal--open'); // Hide modal
  console.log('form submitted', form);
  
  // Debugging only, prevent actual form submit, you might want to remove this later
  e.preventDefault();
  return false;
});
    .btn-preview {
  display: inline-block;
  cursor: pointer;
  background: lightblue;
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, .5);
  place-content: center;
}

.modal--open {
  display: grid;
}

.name {
  text-align: center;
  margin-bottom: 1rem;
  color: white;
}
    <form id="myform"><!-- id has to be the same as in the input type submit below -->
  <input class="input-name" type="text" placeholder="name"/>
  <div class="btn-preview">Preview</div> <!-- Make sure this is not a button/input type submit -->
</form>
<div class="modal">
  <div class="name"></div>
  <input type="submit" form="myform" value="Submit"/><!-- "form" attribute has to contain the actual form id from above -->
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search