perqedelius perqedelius - 1 month ago 8
HTML Question

Get ID from text field and add it to path

I use Roxy Fileman to manage images and files in my CMS. The filemanager has a custom option to insert files from a text field with a button. When the button is clicked the filemanager open. This option is based on the text field ID. My problem is that I have multiple text fields so I have made the ID:s unique. But how can I add these ID to txtFieldId in the path?

This is the first text field with ID 1

<input type="text" name="img" id="txtSelectedFile1" class="textfield" >
<button class="btn btn-default" onclick="openCustomRoxy2()" type="button">Select image</button>


The second one with ID 2

<input type="text" name="document" id="txtSelectedFile2" class="textfield" >
<button class="btn btn-default" onclick="openCustomRoxy2()" type="button">Select image</button>


Here's the div with the iframe that opens the filemanager when the button is clicked. This is where I need to add the ID:s to the txtFieldId.

<div id="roxyCustomPanel2" style="display: none;">
<iframe src="/fileman/index.html?integration=custom&type=files&txtFieldId=txtSelectedFile" style="width:100%;height:100%" frameborder="0">
</iframe>




So i finally manage to solved it with help from thedarkone. The different from the answer in the link is that I left the ID in the text field unchanged and added the src function to the button.

<script>
function go(pth) {
document.getElementById('roxy').src = pth;
}
</script>

<div id="roxyCustomPanel2" style="display: none;">
<iframe id="roxy" src="about:blank" style="width:100%;height:100%" frameborder="0"></iframe>
</div>

<input type="text" name="img" id="txtSelectedFile1" class="textfield">
<button class="btn btn-default" onclick="openCustomRoxy2(); go('/fileman/index.html?integration=custom&type=files&txtFieldId=txtSelectedFile1');" type="button">Select image</button>

<input type="text" name="document" id="txtSelectedFile2" class="textfield">
<button class="btn btn-default" onclick="openCustomRoxy2(); go('/fileman/index.html?integration=custom&type=files&txtFieldId=txtSelectedFile2');" type="button">Select image</button>

Answer

What I could get from your use case, would probably be best solved by this answer. It has both a JS solution and an pure html solution. I would prefer JS as you wouldn't have to write the whole src in each, and you are already doing that, seeing that your are using functions.

Changing iframe src with Javascript

Comments