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>
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
Related
I have 3 buttons on my toolbar (delete,block,unblock). Сan i change form action dynamically
<form action="/users/groupUnblock" method="POST">
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</form>
Tried to write a func,but its not working
If you don't want to use JavaScript at all, this can be done with pure HTML5. You can specify the action of each button with the formaction attribute.
Example:
<form>
<button type="submit" formaction="http://firsttarget.com">Submit to first</button>
<button type="submit" formaction="http://secondtarget.com">Submit to second</button>
</form>
Read more about this attribute here
I can change Wordpress input element with different name. As for example the following input element:
<input class="wpProQuiz_button" type="button" value="Start Quiz" name="startQuiz">
can be changed with the following jQuery code:
jQuery("input[name='startQuiz']").attr("value", "Start Mock Test");
Question:
How can I do the same for the following with same name input element in Wordpress?
<input type="button" name="next" value="Next" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;">
<input type="button" name="next" value="Quiz-summary" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;">
I have use the following for the above two input element like :
jQuery("input[name='next']").attr("value", "Next");
jQuery("input[name='next']").attr("value", "Test-summary");
But it is not working. How can I do this?
use jQuery selectors:
jQuery("input[name='next']:first-child").val("zzzz");
jQuery("input[name='next']:nth-child(2)").val("qqqqq");
and take in mind "float:right" :)
more examples here: https://api.jquery.com/category/selectors/child-filter-selectors/
I recently came across this BBCode (Bulletin Board Code) editor named SCEditor. It's the first one that I found so I started using this one, but i am not really familiar with parsers and stuff. I need it for showing news on my website. So basically:
Admin types the news content using the editor.
Now it gotta save (I don't know how to save its output (for example images?)).
The main page loads it and shows as news (how do I load it and then convert to BBCode again?)
Here's the simple code i am using:
<form action="add-news.php" method="post">
<input
type="text"
name="newssubject"
placeholder="Subject"
required="required field"
class="form-control" style="width: 98%">
</input> <br>
<textarea
id="newsenter"
cols="110"
rows="20"
name="newsbody">
</textarea><br>
<button
style="float:right; margin-right: 10px;"
type="submit"
name="newsset"
class="btn btn-success">
Post
</button>
<a href="mod.php">
<button
type="reset"
style="float:right; margin-right: 10px;"
class="btn btn-danger">
Cancel
</button>
</a>
</form>
<script>
var textarea = document.getElementById('newsenter');
sceditor.create(textarea, {
format: 'bbcode',
style: 'minified/themes/content/default.min.css'
});
</script>
webpage image
You can use SBBCodeParser. SCEditor and this class were coded by the same person. So it would be more compatible.
from this answer : https://stackoverflow.com/a/17900286/5902691
I'm using the input element in HTML with the file type option, IE: <input type="file" /> with the option of allowing multiple files to be selected.
However, I'm wondering if there's a way to remove or clear all of the files that the user selected via the file type button though a click of a button.
Basically, here is what I have so far:
<input type="file" multiple="multiple" />
<input type="button" value="Clear all attachments" onclick="" />
I have no idea how to implement that second button.
There is a trick: Redraw the HTML block! Source
<div id="container">
<input type="file" multiple="multiple" />
<input type="button" value="Clear all attachments" onclick="clearSelection();" />
</div>
//Javascript
function clearSelection() {
document.getElementById("container").innerHTML = document.getElementById("container").innerHTML;
}
Here is my html form:
<form id="formulir" method="post" enctype="multipart/form-data" action="config-template-ecomerce.php">
title-file<input name="title" type="text" id="title"/><br>
color-one<input name="color-one" type="text" id="color-one"/><br>
<img id="uploadPreview" style="width: 100px;" /><br>
image<input type="file" name="image[]" id="image" onchange="PreviewImage();" multiple="true" /><br>
submit<input type="submit" name="button" id="button" value="Submit" />
</form>
From the html form above, I want to select multiple file with one browse botton.
After I select one file with the browse botton, then the file of image will be changed if I select another file of image. What I want is the file is added not changed.
Do I need a script for this? I have tried this in three browsers: chrome, opera and mozila.
According to our discussion in chat, you want to generate upload button dynamically. I can give you an example:
Suppose you have one upload button in html like this:
<body>
<form>
<input type="file" name="upload1" id="upload1"/>
</form>
</body>
Then, you can add another upload button on Click event on previous button using jquery:
$(function(){
$('#upload1').on('click',function(){
var r= $('<input type="file" value="new button"/>');
$("form").append(r);
});
});
JSFIDDLE DEMO HERE