How do I copy text from a paragraph element to an input's value without refreshing the page?

Question

I am trying to copy the text inside a <p> element into an <input> element's value attribute.

The paragraph text contains .30, .31, .6, .38, and this text is updated by a jQuery script without refreshing the page, so I need to update the <input>'s value attribute each time with the new contents of the paragraph:

<p id="filter-display">.30, .31, .6, .38</p>

The input should look like this after updating it:

<input type="hidden" name="tags" value=".30, .31, .6, .38">

Is there any way that I can update the input's value attribute to reflect the paragraph's text each time it changes?

Your tag soup makes it impossible to understand what you're trying to do? Is this client-side javascript that needs to modify the DOM using `jquery`? Or is it server-side `java` or `php` that needs to generate different HTML output? And what does `ajax` have to do with it? — Andreas, Jul 23 '18 at 21:42
the ids into #filter-display are generated by jquery, i need the same ids into a hidden input in the same time — CosmicDisco, Jul 23 '18 at 21:52
It would help if we could see the logic that was updating the `p` tag. Also when you say "without recharging", what are you referring to? — Taplar, Jul 23 '18 at 22:05
If it is generated by jQuery, and you want the jQuery to *also* generate the hidden input element, then why did you tag `java`, `php`, and `ajax`? They don't seem to have anything whatsoever to do with your question. — Andreas, Jul 24 '18 at 00:46

score 0 · Answer 1 · answered Aug 21 '18 at 19:03

Assuming that you want to use AJAX to accomplish these updates without refreshing the page in order to modify #filter-display's text content, whenever the paragraph's TextNode is updated, you can use the jQuery val() function to change the hidden input's value attribute, and apply the appropriate listener (see this question) to the TextNode or paragraph:

var $filter_display = $("#filter-display");

$filter_display[0].firstChild.addEventListener("DOMCharacterDataModified", function() {
    $("#my-hidden-input").val($filter_display.text());
});

Plain JavaScript:

var filter_display_text = document.getElementById("filter-display").firstChild;

filter_display_text.addEventListener("DOMCharacterDataModified", function() {
     document.getElementById("my-hidden-input").value = filter_display_text;
});

jQuery unfortunately does not yet have a convenient way to get the actual TextNode of an element, and text() returns the actual value of all nested TextNodes in a given element.

How do I copy text from a paragraph element to an input's value without refreshing the page?

1 Answers1