Conflict use text() and val() methods at one time with reset button form

Question

I have a form and set values of some elements (such as div, input,...) with postfix _holder id.

I know for set value of form input elements must be use val() method.
And also I know for set value for another elements such as span and div must use text() method.

So I write this code:

<form id="myform">
    <span id="title_holder">###</span>
    <div id="description_holder">###</div>
    <input type="text" value="###" id="id_holder">
    <textarea id="others_holder">###</textarea>
    <input type="reset">
</form>

<script>
var values = {
    'title': '111',
    'description': '222',
    'id': '333',
    'others': '444',
};

$.each(values, function(key, value) {
    elementId = $('#' + key + '_holder');
    if (elementId.length > 0) {
        elementId
            .text(value) //for div and span elements
            .val(value); //for input and textarea elements
    }
});
</script>

See Online: https://jsfiddle.net/NabiKAZ/s13u699u/

I'm not sure for correction of use text() and val() at one time. But now all things works well.

But I have problem with reset form. The reset button just reset input box and don't work for textarea. (Of course I do not expect span, div to work on.)

If I remove .text(value) in code, reset button works well, But span, div don't get values.

My self thinks maybe need to check element before use text() or val() methods. but I'm not sure, and so I don't know how can check type element is an input form, See:

$.each(values, function(key, value) {
    elementId = $('#' + key + '_holder');
    if (elementId.length > 0) {
        //IF type of elementId is input form such as input, textarea,...
        elementId.val(value); //for input and textarea elements
        //ELSE normal html elements such as span, div,...
        elementId.text(value); //for div and span elements
    }
});

See Online: https://jsfiddle.net/NabiKAZ/s13u699u/1/

What is your suggestion?

http://stackoverflow.com/questions/8854288/val-vs-text-for-textarea this may help — techie_28, May 31 '16 at 08:01

Rayon · Accepted Answer · 2016-05-31T07:57:39.807

Use .is method with :input selector

Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

var values = {
  'title': '111',
  'description': '222',
  'id': '333',
  'others': '444',
};

$.each(values, function(key, value) {
  var elementId = $('#' + key + '_holder');
  elementId.length && elementId.is(':input') ? elementId.val(value) : elementId.text(value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="myform">
  <span id="title_holder">###</span>
  <div id="description_holder">###</div>
  <input type="text" value="###" id="id_holder">
  <textarea id="others_holder">###</textarea>
  <input type="reset">
</form>

score 1 · Answer 2 · answered May 31 '16 at 07:56

First save default values to data-reset. On reset just restore values.
To check if element is input use .is(':input')

var values = {
  'title': '111',
  'description': '222',
  'id': '333',
  'others': '444',
};

$(document).ready(function() {
  $('.input').each(function() {
    if (!$(this).is(':input')) {
      $(this).data('reset', $(this).text());
    }
  });

  $('[type="reset"]').click(function() {
    $('.input:not(:input)').each(function() {
      $(this).text($(this).data('reset'));
    });
  });


  $.each(values, function(key, value) {
    setVal($('#' + key + '_holder'), value);
  });
});


function setVal(el, value) {
  if (el.length > 0) {
    if (el.is(':input')) {
      el.val(value);
    } else {
      el.text(value);
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  <span id="title_holder" class="input">###</span>
  <div id="description_holder" class="input">###</div>
  <input type="text" value="###" id="id_holder" class="input">
  <textarea id="others_holder" class="input">###</textarea>
  <input type="reset">
</form>

Thanks for great solution for reset HTML elements, But as I said in the question this is not important for me. My answer is just `.is(':input')` — Nabi K.A.Z., May 31 '16 at 10:50

score 0 · Answer 3 · answered May 31 '16 at 07:48

0

Check the type of the input field. Depending on the type, use val() or text()

var elementType = elementId[0].tagName.toLowerCase();

if (elementType === 'input' || elementType === 'textarea') {
    elementId.val(value);
} else {
    elementId.text(value);
}

https://jsfiddle.net/s13u699u/3/

answered May 31 '16 at 07:48

Pimmol

1,871
1
8
14

This solution depends to `input` and `textarea` and not work for others input element of form. – Nabi K.A.Z. May 31 '16 at 10:51

Conflict use text() and val() methods at one time with reset button form

3 Answers3