CODEWITHSUNDEEP
javascripthtmlarraysjson
hungbad
hungbad

Reputation: 75

Multi forms datas into array via Javascript

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!

Upvotes: 0

Views: 49

Answers (1)

TMan
TMan

Reputation: 1905

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.

Upvotes: 1

Related Questions