Submit Dynamically Generated From in JavaScript

Question

I have the following form generated dynamically from JavaScript based on user's action:

<form id="editBookForm" onsubmit="editBookData()">
   <input type="text" name="isbn" placeholder="ISBN"  required />
   <input type="text" name="book" placeholder="Book..."  required />
   <button class ="btn">Update!</button>
</form>

The editBookData function is:

function editBookData(data) {
    console.log(data)
   //Some other work
}

How can I prevent default submission behavior and pass the form data so that I can access the form data in the editBookData() function?

No Jquery please! Thank you in Advance.

Take the event as a parameter to your function and call .preventDefault() on it? — Bergi
– Bergi, Commented Sep 2, 2020 at 1:03

Always Helping · Accepted Answer · 2020-09-02 01:12:09Z

1

You can use preventDefault() method to the stop form from reloading and use querySelector method to get the form input text values in your function

Live Demo: (No jQuery)

function editBookData(e) {
  e.preventDefault() //prevent default behaviour 
  //get input value
  let isbn = document.querySelector('input[name="isbn"]').value
  let book = document.querySelector('input[name="book"]').value
  console.log(isbn, book)
  //Do Some other work with values
}

<form id="editBookForm" onsubmit="editBookData(event)">
  <input type="text" name="isbn" placeholder="ISBN" required />
  <input type="text" name="book" placeholder="Book..." required />
  <button class="btn">Update!</button>
</form>

edited Sep 2, 2020 at 1:12

answered Sep 2, 2020 at 1:03

Always Helping

14.6k4 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hadira2145 Over a year ago

Thank you @AlwaysHelping. Appreciate it. :)

Always Helping Over a year ago

@hadira2145 Glad to help. Happy coding.

AMD · Accepted Answer · 2020-09-02 01:29:27Z

1

Use event.preventDefault() to prevent the submission of the form and use the FormData Web API to generating a form dynamically.

Event.preventDefault reference
FormData API on MDN

function editBookData(event) {
  event.preventDefault();
  let editBookForm = document.getElementById('editBookForm');
  let formData = new FormData(editBookForm);
  for (item of formData.values()) {
    console.log(item);
  }
  // .... other things to do
}

<form id="editBookForm" onsubmit="editBookData(event)">
      <input type="text" name="isbn" placeholder="ISBN" required />
      <input type="text" name="book" placeholder="Book..." required />
      <button class="btn">Update!</button>
</form>

answered Sep 2, 2020 at 1:29

AMD

2031 gold badge3 silver badges11 bronze badges

2 Comments

Always Helping Over a year ago

Not ideal !! How would you differentiate which text value is what if you use formData here ? Because item will show both values here. No point using formData here if there are two values only.

AMD Over a year ago

FormDatay has other methods like FormData.get(name). You can use it to get each input value by its name attribute.

Collectives™ on Stack Overflow

Submit Dynamically Generated From in JavaScript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related