I have this code:
<input type="file" onchange="showUrl(this.value)" name="upload[]" multiple="multiple">
<button type="button" class="btn btn-success"><i class="icon icon-plus"></i> Add file</button></span>
<input type="submit" class="btn btn-primary" value="Upload"><br><br><span id="url"></span>
and this javascript function
function showUrl(url) {
document.getElementById("url").innerHTML = url;
}
I want to show the url of every file that the user selects with "input file" button. The function shows only the url of the first file. Someone can help me?
Thanks
First, change your input to:
<input type="file" onchange="showUrl(this)" name="upload[]" multiple="multiple">
Then, change your JS to:
function showUrl(url) {
for(var i = 0; i < url.files.length; i++) {
document.getElementById("url").innerHTML += url.files[i].name;
}
}
That way you will be able to read all files selected on the files input.
Javascript
<script type="text/javascript">
function showUrl() {
var allFiles = document.getElementById("myFiles");
if ('files' in allFiles) {
if (allFiles.files.length > 0) {
for (var i = 0; i < allFiles.files.length; i++) {
document.getElementById("url").innerHTML += "<br />"+allFiles.files[i].name;
// note you can mess with proprieties here, like 'size'
}
}
}
}
</script>
HTML
<body>
<input type="file" onchange="showUrl()" name="upload[]" id="myFiles" multiple="multiple">
<button type="button" class="btn btn-success"><i class="icon icon-plus"></i> Add file</button></span>
<input type="submit" class="btn btn-primary" value="Upload">
<br /><br />
<span id="url"></span>
</body>
I don't think you can get the full path, but you can get the file's name by passing this.files instead of this.value
function showUrl(url) {
for(var i = 0; i < url.length; i++)
{
document.getElementById("url").innerHTML += url[i].name + "<br>";
}
}
I'm not sure of what you're after. try:
function showUrl(url) {
document.getElementById("url").innerHTML += url;
}
Related
i have form like this:
and database like this:
id tagname
1 horor
2 race
and so far i have code like this:
<div class="form-group">
<label>Tags:</label>
<input data-role="tagsinput" type="text" name="tags" id="myBtn" class="form-control">
#if ($errors->has('tags'))
<span class="text-danger">{{ $errors->first('tags') }}</span>
#endif
</div>
<div class="form-group">
#foreach ($tags as $item)
<button type="button" onclick="myFunction()" class="btn btn-secondary btn-sm">{{$item-
>tagname}}</button>
#endforeach
</div>
<script>
function myFunction() {
document.getElementById("myBtn").value = "{{$item->id}}";
}
</script>
my controller code
public function create()
{
$tags = tag::select('id','tagname')->get();
return view('artikel.create', compact('tags'));
}
what i trying to archive is if i select button below tags input so it will appear on tags input text bar of course it will not just add 1 value but can select multiple button and make it appears on that text input and automaticaly separate by , like this:
.thnx for advance.
not using framwrok, use html javascript to show it work.
html :
<input type="text" name="tags" id="myBtn" class="form-control">
<button type="button" onclick="myFunction(this)" class="btn btn-secondary btn-sm" value='horor'>horor</button>
<button type="button" onclick="myFunction2(this)" class="btn btn-secondary btn-sm" value='race'>race</button>
<script>
function myFunction(me) {
txt = document.getElementById("myBtn").value;
if( txt == '' ) {
document.getElementById("myBtn").value = me.value;
} else {
document.getElementById("myBtn").value += ',' + me.value;
}
}
function myFunction2(me) {
txt = document.getElementById("myBtn").value;
// skip duplicate
if( txt.search( me.value ) >= 0 ) {
return;
}
if( txt == '' ) {
document.getElementById("myBtn").value = me.value;
} else {
document.getElementById("myBtn").value += ',' + me.value;
}
}
</script>
I am working on a web store which offers 2 pre-assigned options (buy two for XX and buy 3 for XY). I also added a normal - 0 + system whith which the customer can select a different number of products.
I wrote a little code which works fine for +- or 2,3 alone, but if i wanna decrease a number added by 2,3 buttons, it doesn't go from 3 to 2 but to 0 or -1.
So, i want to be able to select pre-defined option 2 or 3 but i also want it to be editable by +- buttons.
Any suggestions?
<button class="gumb_shop2" onclick="spremembax()">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="spremembay()">3 for 8,99 €</button>
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="0"></input>
<button class="plus" onclick="buttonClicDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
var i = 0;
function buttonClickUP() {
i++;
document.getElementById('gumb2').value = i;
if (i <= 0) {
i = 0;
display(i);
}
}
var i = 0;
function buttonClickDOWN() {
i--;
document.getElementById('gumb2').value = i;
if (i <= 0) {
i = 0;
display(i);
}
}
</script>
As I already mention in the comment, you have a typo in buttonClicDOWN .......missing k. You directly increment/decrement the value of the element. Please see the modified functions:
<button class="gumb_shop2" onclick="spremembax()">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="spremembay()">3 for 8,99 €</button>
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="1"></input>
<button class="plus" onclick="buttonClickDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
function buttonClickUP() {
var el = document.getElementById('gumb2');
el.value = Number(el.value) + 1;
}
function buttonClickDOWN() {
var el = document.getElementById('gumb2');
if(el.value == 1) return false;
el.value = Number(el.value) - 1;
}
</script>
I'd have this added as a comment, but was not able to for missing rep. So an answer:
In simple terms: you are not updating your global variable i when pressing the 2 or 3 button, so when you in/decrease i and assign it to the value property, you do override the old value.
I would recommend to drop the i (global) variable and just to work with the value property, e.g.
function buttonClickDOWN() {
var elm = document.getElementById('gumb2');
if (elm.value > 0)
elm.value--;
else
elm.value = 0;
}
P.S.: as you are using a text type input, you might also want to consider non-numbers the user might have entered.
Why not simply use input type="number"?
<button class="gumb_shop2" onclick="gumb2.value=2">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="gumb2.value=3">3 for 8,99 €</button>
<input type="number" id="gumb2" value="1" step="1" min="1" />
<input type="button" id="order" value="ORDER NOW" />
Here's a simple example that that meets your specs:
<button onclick="setAbs(event)" data-val="2">2 for 10,99 €</button>
<button onclick="setAbs(event)" data-val="3">3 for 8,99 €</button><br/><br/>
<button onclick="down()">-</button>
<input size="2" id="counter" value="0" />
<button onclick="up()">+</button><br/><br/>
<input type="submit" value="Submit" />
<script>
let counter = document.getElementById("counter");
function setAbs(event){
counter.value = event.target.dataset.val;
}
function up(){
counter.value = parseInt(counter.value) + 1;
}
function down(){
if(counter.value > 0){
counter.value = parseInt(counter.value) - 1;
}
}
</script>
this is the answer i was looking for.
Thank you #Mamun for quick response.
<button class="gumb_shop2" onclick="spremembax()">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="spremembay()">3 for 8,99 €</button>
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="1"></input>
<button class="plus" onclick="buttonClickDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
function buttonClickUP() {
var el = document.getElementById('gumb2');
el.value = Number(el.value) + 1;
}
function buttonClickDOWN() {
var el = document.getElementById('gumb2');
if(el.value == 1) return false;
el.value = Number(el.value) - 1;
}
</script>
In contact form 7 when attach any file to upload there is no option to remove the attached file. How do I add a remove button or cross button beside file name?
<input type="file" name="file-637" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif" aria-invalid="false">
<input type="file" name="file-638" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif" aria-invalid="false">
You can use below concept with remove the attached input file
$.fn.fileUploader = function (filesToUpload) {
this.closest(".files").change(function (evt) {
for (var i = 0; i < evt.target.files.length; i++) {
filesToUpload.push(evt.target.files[i]);
};
var output = [];
for (var i = 0, f; f = evt.target.files[i]; i++) {
var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + i + "\">Remove</a>";
output.push("<li><strong>", escape(f.name), "</strong> - ",
f.size, " bytes. ", removeLink, "</li> ");
}
$(this).children(".fileList")
.append(output.join(""));
});
};
var filesToUpload = [];
$(document).on("click",".removeFile", function(e){
e.preventDefault();
var fileName = $(this).parent().children("strong").text();
// loop through the files array and check if the name of that file matches FileName
// and get the index of the match
for(i = 0; i < filesToUpload.length; ++ i){
if(filesToUpload[i].name == fileName){
//console.log("match at: " + i);
// remove the one element at the index where we get a match
filesToUpload.splice(i, 1);
}
}
//console.log(filesToUpload);
// remove the <li> element of the removed file from the page DOM
$(this).closest('div.files').find('input[type="file"]').val('')
$(this).parent().remove();
//document.getElementById("uploadCaptureInputFile").value = "";
});
$("#files1").fileUploader(filesToUpload);
$("#files2").fileUploader(filesToUpload);
$("#uploadBtn").click(function (e) {
e.preventDefault();
});
body {
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="#" method="POST" enctype="multipart/form-data">
<div class="row files" id="files1">
<h2>Files 1</h2>
<span class="btn btn-default btn-file">
Browse <input type="file" name="files1" multiple />
</span>
<br />
<ul class="fileList"></ul>
</div>
<div class="row files" id="files2">
<h2>Files 2</h2>
<span class="btn btn-default btn-file">
Browse <input type="file" name="files2" multiple />
</span>
<br />
<ul class="fileList"></ul>
</div>
</form>
</div>
I made a tool which make my work a little easier by inserting a value into a url in a new window on multiple sites. It was working quite well but now I am having the problem of the search value being cleared onsubmit.
Javascript:
<script language="JAVASCRIPT">
function run() {
var request = document.text.query.value;
var req = "";
var endofurl = "endofurl.html";
for(var i = 0; i < request.length; i++) {
var ch;
if((ch = request.substring(i, i + 1)) == " ") req += " ";
else req += ch;
}
if(document.search.website.checked) {
var website = open( "https://www.website.com/" + req, "website");
}
//--></script>
HTML:
<form name="search">
Please select the networks you want to use.
<p>
</center>
</p>
<div class="row">
<div class="column">
<br>
<input name="website" type="checkbox">Website to Search
<form name="text" onsubmit="run(); return false;">
<center>And enter your Query.</center>
<center>
<input name="query" placeholder="Steropodon" value="" size="50" type="TEXT">
<input value="Search" onclick="run()" type="BUTTON">
</center>
So far, return false had been working to keep the value of the input in the form="text" input name="query" but now it seems to clear it and reload the page. I'm not sure what changed.
You have errors in your code opening and closing the tags.
Try this code. It works:
<html>
<head></head>
<body>
Please select the networks you want to use
<div class="row">
<div class="column">
<br>
<input name="website" type="checkbox">Website to Search
<form name="text" onsubmit="run(); return false;">
<center>And enter your Query.</center>
<center>
<input name="query" placeholder="Steropodon" value="" size="50" type="TEXT">
<input value="Search" onclick="run()" type="BUTTON">
</center>
</form>
</div>
</div>
<script language="JAVASCRIPT">
function run() {
var request = document.text.query.value;
var req = "";
var endofurl = "endofurl.html";
for(var i = 0; i < request.length; i++) {
var ch;
if((ch = request.substring(i, i + 1)) == " ") req += " ";
else req += ch;
}
var checkbox = document.getElementsByName("website");
if(checkbox[0].checked) {
var website = open("https://www.website.com/" + req,
"website");
}
}
</script>
</body>
</html>
Hope it helps.
I fixed it. It was not the tags. I had only pasted a small amount of the total code to make it easier to read but I failed at making it easier to read. The problem was undefined inputs. I have been adding many if statements but didn't have a corrosponding checkbox. Oops.
Thanks for the help.
I need to add multiple textboxes using a plus button and remove them using a minus button using Javascript.
After user fills up all the fields and clicks the submit button, I need to fetch all value using PHP.
Example:
Initially, there will only be 1 textbox. When user clicks on + button and already filled up the first field, the a second textbox will appear and also a - button used to remove the textbox. When a user clicks submit, the value in the textboxes will be submitted through PHP.
My code:
<?php
if(isset($_POST["userbtnsubmit"])){
}
?>
<form name="frmfeed" id="frmfeed" enctype="multipart/form-data" method="post" onSubmit="return validateFeedbackForm();">
<input type="text" name="country" id="con" class="form-control oditek-form" placeholder="Add Country">
<input type="button" class="btn btn-success" name="plus" id="plus" value="+">
<input type="button" class="btn btn-danger" name="minus" id="minus" value="-">
<button type="submit" class="btnsub" name="userbtnsubmit" id="btnsubmit">Add</button>
</form>
Note: As stated in the question, the user must type text in an input before another can be be shown.
addRemoveAnother('#plus', '#minus', '#con', '#counter', 3);
function addRemoveAnother(plusBtn, minusBtn, target, counter, limit) {
var i, ii = $(counter).val();
for(i = 0; i <= limit; i++) {
if (i != ii) {
$(target+i).hide();
}
}
$(plusBtn).click(function() {
ii = $(counter).val();
if ($(target+ii).val() != '') {
ii++;
if (ii <= limit) {
$(target+ii).show();
$(counter).val(ii);
}
}
});
$(minusBtn).click(function() {
ii = $(counter).val();
if (ii > 1) {
$(target+ii).val('');
$(target+ii).hide();
ii--;
$(counter).val(ii);
}
});
}
https://jsfiddle.net/curtisweeks/k4kanw6L/
You can combine jQuery PLUS AJAX to achieve the same.
Example :
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$( "#plus" ).on("click", function() {
$( "#frmfeed" ).append( '<input type="text" name="country[]" class="form-control oditek-form" placeholder="Add Country"/>');
});
$("#minus").on("click", function(){
if($("input[name='country[]']").length > 1)
{
$("input[name='country[]']:eq("+(length-1)+")").remove();
}
});
$("#btnsubmit").on("click", function(){
var countries = [];
$("input[name='country[]']").each(function(){
countries.push($(this).prop("value"));
});
console.log(countries);
//AJAX Post Data To Your Server
var postDataObj = {
url: "YOUR_SERVER_FILE",
type: "post",
data: countries,
success: function(data){
//Response Data From Server
}
}
console.log(postDataObj);
$.ajax(postDataObj);
});
});
</script>
</head>
<body>
<form name="frmfeed" id="frmfeed" enctype="multipart/form-data" method="post" onSubmit="return validateFeedbackForm();">
<input type="text" name="country[]" id="con" class="form-control oditek-form" placeholder="Add Country"><br/><br/>
</form>
<input type="button" class="btn btn-success" name="plus" id="plus" value="+"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-">
<button type="submit" class="btnsub" name="userbtnsubmit" id="btnsubmit">Add</button>
</body>
</html>
JSFiddle Demo