accept value from one div's fields value only from multiple div's field value

user_10644170 0
Viewed 31

I have two div while submitting value by clicking the submit button so the value should accept from the only div only not other div. if anyone tries to fill all the div's fields value then show the alert message you can either fill div first value or div second value only. Here is a demo.

function draftSave() {
alert('hello');

}
<div id = "one">
<textarea rows="2" class="form-control checking-length" name="text1" id="text1" required maxlength="3500" onKeyup="textareacount3500_characters('text1')" placeholder="Your answer.."></textarea>

<textarea rows="2" class="form-control checking-length" name="text2" id="text2" required maxlength="3500" onKeyup="textareacount3500_characters('text2')" placeholder="Your answer.."></textarea>
</div>
<div id = "two">
<textarea rows="2" class="form-control checking-length" name="div2_text1" id="div2_text1" required maxlength="3500" onKeyup="textareacount3500_characters('div2_text1')" placeholder="Your answer.."></textarea>

<textarea rows="2" class="form-control checking-length" name="div2_text2" id="div2_text2" required maxlength="3500" onKeyup="textareacount3500_characters('div2_text2')" placeholder="Your answer.."></textarea>
</div>

<a class="btn btn-info waves-effect" name="step5" id="step5" onclick="draftSave()">Draft Save</a>

You can see, there is two different div but have to accept only anyone div's fields value. if the user trying to fill both div's values & submitting then should receive an alert message you can fill only anyone div fields value

html jquery javascript
1 Answers

Hers one way to do it...

function draftSave() {
  var one = ""
  document.querySelectorAll('#one > textarea').forEach(el => {
    one += el.value;
  })


  var two = ""
  document.querySelectorAll('#two > textarea').forEach(el => {
    two += el.value;
  })

  if (one !== "" && two !== "") {
    console.clear();
    console.log("alert both rows are filled")
  }else {
  console.clear();
  console.log("submited: " + one + two);
  }

}
<div id="one">row1
  <textarea rows="2" class="form-control checking-length" name="text1" id="text1" required maxlength="3500" placeholder="Your answer.."></textarea>

  <textarea rows="2" class="form-control checking-length" name="text2" id="text2" required maxlength="3500" placeholder="Your answer.."></textarea>
</div>
<div id="two">row2
  <textarea rows="2" class="form-control checking-length" name="div2_text1" id="div2_text1" required maxlength="3500" placeholder="Your answer.."></textarea>

  <textarea rows="2" class="form-control checking-length" name="div2_text2" id="div2_text2" required maxlength="3500" placeholder="Your answer.."></textarea>
</div>

<a class="btn btn-info waves-effect" name="step5" id="step5" onclick="draftSave()">Draft Save</a>

user_71589590
Related