Multi forms datas into array via Javascript

Question

I have some forms like this:

<div class="well">
    <form>
        <span class="remove pull-right"><i class="fa fa-times pointer"></i></span>
        <div class="form-group" style="margin:0">
            <label for="image-link">Image Link</label>
            <input type="text" name="image-link" value="" class="form-control" >
        </div>
        <div class="form-group" style="margin:0">                        
            <label for="content">Content</label>
            <textarea class="form-control" name="content" rows="10"></textarea>
        </div>
        <div class="form-group" style="margin:0">
            <label for="author">Author</label>
            <input type="text" name="author" value="" class="form-control" >
        </div>
    </form>
</div>

....

<div class="well">
    <form>
        <span class="remove pull-right"><i class="fa fa-times pointer"></i></span>
        <div class="form-group" style="margin:0">
            <label for="image-link">Image Link</label>
            <input type="text" name="image-link" value="" class="form-control" >
        </div>
        <div class="form-group" style="margin:0">                        
            <label for="content">Content</label>
            <textarea class="form-control" name="content" rows="10"></textarea>
        </div>
        <div class="form-group" style="margin:0">
            <label for="author">Author</label>
            <input type="text" name="author" value="" class="form-control" >
        </div>
    </form>
</div>

The forms will be added more and more when I click the add button, so will have multi forms. I want to submit multi datas into an json arrayjust looks like this:

"quotes":[
 {"image":"image_link","content":"content","author:"author"}
 {"image":"image_link","content":"content","author:"author"}
...
 {"image":"image_link","content":"content","author:"author"}
]

which is an array will contain all of the forms' datas. And the amount of forms is not fixed. It will be changed when I click add button. So how can I do that automatically. Thank you so much!

TMan · Accepted Answer · 2014-10-09 03:49:45Z

1

You can iterate through all the form elements on the page by calling the following function:

function generateArrayData() {
  var forms = document.querySelectorAll(".well form");
  var quotes = [];

  for(var i = 0; i < forms.length; i++) {
    var form = forms[i];
    quotes.push({
      image: form.querySelector("input[name='image-link']").value,
      content: form.querySelector("textarea").value,
      author: form.querySelector("input[name='author']").value
    })  
  }
  return quotes;
}

The way this works is that querySelectorAll loads all of the form elements on the page within a div with the class .well. We then iterate through the elements from the previous query and use querySelector to pull out each individual element we'd like to extract.

edited Oct 9, 2014 at 3:49

answered Oct 9, 2014 at 3:44

TMan

1,9451 gold badge17 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

Multi forms datas into array via Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related