How to get input value and put it into another within a node?

Developing Nodes
1

Hi, I'm new to node-red and having trouble on one thing.
This is what I'm trying to do.
One of my nodes has input field and an html audio tag.
the html source looks like below.

<script type="text/x-red" data-template-name="playment">
    <div class="form-row">
        <label for="node-input-file"><i class="fa fa-file"></i>file name</label>
        <input type="text" id="node-input-file" placeholder="File">
    </div>
    <div class="form-row">
        <label for="audiosrc"></label>
        <audio controls src="/"></audio>
    </div>
</script>

And on the screen, it looks like below.
nodehtml

In this case, when I type "abc.wav" into file name input field and deploy it,
I'd like the string "abc.wav" to go into the audio tag src place.

which would be like : <audio controls src="/abc.wav"></audio>
so that I can play the audio.

when I hard code "abc.wav" into the audio tag, it works.
But I'd like to make it follow the value of the input field.

If you know how to do it, please let me know

Thank you in advance.

2

Use jQuery .on("change", ...) to capture the text changes of #node-input-file then set the src of the audio element in the on change callback.

E.g html - switch audio source with jquery and HTML5 audio tag - Stack Overflow

Note. It would be better to have a button to explicitly load the audio src instead of on change.

To have the src value restored when you reopen the editor, set it's value in the oneditprepare function of your node.

3

Thanks for your reply.
I tried both javascript and jquery code but it doesn't work... it seems like it's not recognizing the id value..?

Could you please kindly check what's wrong in my code :cry:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<script type="text/javascript">
    RED.nodes.registerType('play', {
        ~~~
    });
</script>

<script type="text/x-red" data-template-name="play">
    <div class="form-row">
        <label for="node-input-file"><i class="fa fa-file"></i>file name</label>
        <input type="text" id="node-input-file" placeholder="File">
    </div>
    <div class="form-row">
        <label for="audiosrc"></label>
        <audio controls src="/"></audio>
    </div>
    <div class="form-row">
        <input type="text" id="node-input-value">
    </div>
</script>

<script src="/usr/local/src/jquery.min.js"></script>

<script type="text/javascript">
    document.getElementById("node-input-value").value = "haha";
    $(document).ready(function(){
		        $('#node-input-value').val('haha');
    });
</script>

</body>
</html>
4

You should not be doing anything in the $(document).ready() function

Your edit dialog is only added to the page when the edit dialog is being opened.

Any code you need to initialise you dialog should be in your nodes oneditprepare function.

5

Woww it works now! I used oneditprepare function just like you two mentioned.

Thanks so much for your help!

6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.