I'm sorry if there's already a question like this, but I've found nothing about this, nor do I know exactly what to look for.
The problem:
When I copy #download_link via the copy button it only copies 53297234.png instead of 5ec8515390d267.53297234.png
My code:
<script>
function copy2clip(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
</script>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" onclick="copy2clip('#download_link')">Copy</button>
</div>
<input type="text" class="form-control" id="download_link" placeholder="Link" value="https://example.org/u/". $row['name'] ."" disabled>
</div>
$row['name'] = 5ec8515390d267.53297234.png
Thanks in advance :)
I'm not sure why you're getting a partial string--the code shouldn't work as is. Assuming your PHP variable concatenation is working (it's a good idea to establish that, then remove it from the question so it's reproducible and isolated), the .text() function can't be used to access an input element's value. Use $(element).val() instead.
From the docs:
The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method.
As an aside, I wouldn't use $ to prefix your vars in JS. It's not a typical style and makes it confusing to see what's jQuery and what's JS.
If this doesn't solve the problem, then the issue is likely in your PHP script. Make sure it's concatenating correctly.
function copy2clip(element) {
var temp = $("<input>");
$("body").append(temp);
temp.val($(element).val()).select();
document.execCommand("copy");
temp.remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button
class="btn btn-outline-secondary"
type="button"
onclick="copy2clip('#download_link')"
>Copy</button>
</div>
<input
type="text"
class="form-control"
id="download_link"
placeholder="Link"
value="https://example.org/u/5ec8515390d267.53297234.png"
disabled
>
</div>
If you are interested in writing some fancy clean code, you should check this library
clipboard.js .
Example:
// you need to instantiate it by passing selector
new ClipboardJS('.btn');
<!-- Include the script via CDN (you can download it) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<div class="input-group mb-3">
<div class="input-group-prepend">
<!-- Trigger -->
<button class="btn btn-outline-secondary" type="button" data-clipboard-target="#download_link">Copy</button>
</div>
<input type="text" class="form-control" id="download_link" placeholder="Link" value="https://example.org/u/" .
$row['name'] ."" readonly>
</div>
Related
I'm new to coding and need to create HTML text in an HTML form on a page and open up the text in a Javascript alert box. I've tried various code to no success. Here is what I've come up with so far which does not create a pop up alert box:
Here is the HTML and the JS:
Function myfunction1()
{
Let myfun1 = document.getElementById('sec1-input').value;
Alert(myfun1);
}
<div class="form-group">
<label for="sec1-input"><strong>Enter Alert Text: </strong></label>
<input type="text" class="form-control" id="sec1-input">
</div>
<button id="sec1-btn1" type="button" class="btn btn-primary">Alert Me!</button>
I'm not sure what do you want, but I'll show you how to make an alert window exactly as you're asking.
First of all you must consider several mistakes that you are making. JavaScript does not recognize the word Function because it is capitalized. The function keyword must be lowercase.
Here I leave you a referring link with JavaScript reserved words: https://www.w3schools.com/js/js_reserved.asp
On the other hand, I see that you are not using the form tag, which leads to two problems: technical and semantic. Here I leave you another link with reference to forms: https://www.w3schools.com/html/html_forms.asp
Finally, to achieve what you want you need to work with events, especially with the click event. Here I will leave you a reference link and the solution you want:
let button = document.querySelector('#sec1-btn1');
button.addEventListener('click', function(e) {
let val = document.querySelector('#sec1-input').value;
alert(val);
});
<form>
<div class="form-group">
<label for="sec1-input"><strong>Enter Alert Text: </strong></label>
<input type="text" class="form-control" id="sec1-input" />
</div>
<button id="sec1-btn1" type="button" class="btn btn-primary">
Alert Me!
</button>
</form>
You have not called the function anywhere. For it to work you need to use a listener.
<div class="form-group">
<label for="sec1-input"><strong>Enter Alert Text: </strong></label>
<input type="text" class="form-control" id="sec1-input">
</div>
<button onclick="myfunction1()" id="sec1-btn1" type="button" class="btn btn-primary">Alert Me!</button>
<script>
function myfunction1() {
let myfun1 = document.getElementById('sec1-input').value;
alert(myfun1)
}
</script>
I added the onClick listener to button and now it works.
javaScript is case sensitive
function myfunction1()
{
let myfun1 = document.getElementById('sec1-input').value;
alert(myfun1);
}
<div class="form-group">
<label for="sec1-label"><strong>Enter Alert Text: </strong></label>
<input type="text" class="form-control" id="sec1-input">
</div>
<button id="sec1-btn1" type="button" onClick="myfunction1()" class="btn btn-primary">Alert Me!</button>
also IDs of elements should not be the same , to assign same selector , use class and you also need to give your function to your element's event listener
You should not start javascript functions like alert with capital letters.
Put this piece of code instead of your button:
<button id="sec1-btn1" type="button" class="btn btn-primary" onclick="myfunction1()">Alert Me!</button>
I want that if I choose 75'000 or 100'000 either the result in "one" (see pic 2) is 100 or 1000000. Can you help me do it? I would appreciate your help!
here is my code so far:
<div class="container content-center" id="margin">
<form name="formcalc">
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">select</label>
<select class="col-sm-10 form-control">
<option>Default select</option>
<option>75'000</option>
<option>100'000</option>
</select>
<!-- <div class="col-sm-10">
<input type="tel" class="form-control" name="txtnum1">
</div> -->
</div>
<fieldset disabled>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">One</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="n1" name="txtres" value="CHF " readonly>
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Two</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="n2" name="txtres2" value="CHF " readonly>
</div>
</div>
</fieldset>
<input type="button" id="btn6" class="btn btn-danger" value="Berechnen" onClick="sumValues();showDiv();">
<button type="button" style="display:none;" class="btn btn-outline-danger" id="toggle" data-toggle="modal" data-target="#exampleModal">
ohne Gewähr
</button>
</form>
<hr class="featurette-divider">
</div>
<select id="selectOne" class="col-sm-10 form-control" onchange="setOne()">
<option>Default select</option>
<option>75'000</option>
<option>100'000</option>
</select>
. . . . .
. . . . .
. . . . .
<script>
function setOne()
{
const selectOne = document.getElementById("selectOne");
if (selectOne.options[selectOne.selectedIndex].text == "75'000")
document.getElementById("n1").value = "100";
else if (selectOne.options[selectOne.selectedIndex].text == "100'000")
document.getElementById("n1").value = "1000000";
}
</script>
The exact requirements are a little unclear, and it sounds like your a relative beginner in front end development. Given that, I will treat this a little bit more as a learning experience than an exact answer to your exact question, so here are some assumptions:
Based on the markup, it looks like this is Bootstrap, so I'm going to assume jQuery is available (if jQuery is not included, it's easy enough to Google search to find out how to do that).
Let's also assume you're just including a <script></script> tag before the closing </body> tag - inside these tags is where your JavaScript code will go.
And finally, as I mentioned your exact requirements were a little unclear, but I know that generally you want a value in a textbox to be set when a value from a select dropdown is chosen. So let's assume that your exact requirement is: you have a dropdown and a textbox. In the dropdown (<select>), you can choose from 2 values: 75,000 and 100,000. If you choose 75,000, the value of the textbox becomes 100, and if you choose 100,000, the value of the textbox becomes 1000000.
Ok so here's the code. It involves what's called an event listener - the browser is listening for a user event like clicking something or (in your case) a select dropdown value being changed. You're going to write code to listen for and respond to that event. In jQuery the syntax is pretty clear and succinct in this way, using the .on() method.
Given this HTML:
<select id="mySelect">
<option>Default select</option>
<option value="75,000">75,000</option>
<option value="100,000">100,000</option>
</select>
<input type="text" id="myTextbox">
Your JavaScript would look like this:
$('#mySelect').on('change', function() {
let textboxValue;
switch(this.value) {
case '75,000':
textboxValue = '100';
break;
case '100,000':
textboxValue = '1000000';
break;
default:
textboxValue = '';
}
$('#myTextbox').val(textboxValue);
});
Here's a JS Fiddle of the working code: https://jsfiddle.net/j06sw8af/1/
This should be enough to get you on track for solving your exact problem.
Something strange bug is going on in my code. I want to use HTML template tag with jQuery, because all the rest of my code is jQuery, but I only found JavaScript examples with it. I tried to "translate" from JavaScript to jQuery, this is what I came up with.
$.getJSON( "../Controller/ControllerBookstore.php?show_books=true", function( data ) {
$.each( data, function( index, value ) {
// let clone = document.getElementById('table-template').content.cloneNode(true);
// clone.querySelector('#id').innerText = value.id;
// clone.querySelector('#author').innerText = value.author;
// clone.querySelector('#title').innerText = value.title;
// clone.querySelector('#isbn').innerText = value.isbn;
let clone = $("#table-template").clone(true);
$("#id",clone).text(value.id);
$("#author",clone).text(value.author);
$("#title",clone).text(value.title);
$("#isbn",clone).text(value.isbn);
//$(".container").append(clone);
$("#header").append(clone);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div id="myAlert" class="alert alert-success collapse">
<span id="alert-text"></span>
<a id="alert-close" class="close" href="#" aria-label="Close">×</a>
</div>
<div class="row" id="header">
<div class="col"><h5>ID</h5></div>
<div class="col"><h5>Author</h5></div>
<div class="col"><h5>Title</h5></div>
<div class="col"><h5>ISBN</h5></div>
<div class="col"><h5>Action</h5></div>
</div>
<template id="table-template">
<div class="row">
<div class="col" id="id"></div>
<div class="col" id="author"></div>
<div class="col" id="title"></div>
<div class="col" id="isbn"></div>
<div class="col buttons">
<button class='btn btn-info edit'>Edit</button>
<button class='btn btn-danger delete'>Delete</button>
</div>
</div>
</template>
<div class="row justify-content-center" >
<form action="" class="col-4">
<input id = "id-box" type="hidden" name="id">
<div class="form-group row">
<label class="col-4">Author</label>
<input id = "author-box" type="text" class="form-control col-8" name="author" placeholder="Enter the author of the book">
</div>
<div class="form-group row">
<label class="col-4">Title</label>
<input id = "title-box" type="text" class="form-control col-8" name="title" placeholder="Enter the title of the book">
</div>
<div class="form-group row">
<label class="col-4">ISBN</label>
<input id = "isbn-box" type="text" class="form-control col-8" name="isbn" placeholder="Enter the ISBN of the book">
</div>
<div class="form-group row">
<button id = "submit" type="submit" name="save" class="btn btn-primary col-12">Save</button>
</div>
</form>
</div>
</div>
For some reason the JavaScript code I commented out works, but it only appends "clone" to my ".container" correctly, on the next line below the form. However I want to attach it to my ".header", but it attaches next to the header, not below it. The jQuery code doesn't do anything, it doesn't attach my "clone" anywhere.
I hope I was clear. Could you please help me to find the reason of the bugs?
A few changes are needed:
The id value of the template has a hyphen which must be escaped in the selector. Two backslashes are needed in the string literal; the first is needed to actually get a backslash in the string. The remaining one will be interpreted by the selector.
Clone the row element within the template, not the template itself. However, jQuery will not know of a DOM within the template tag, so you could just take the HTML content instead of cloning, and then turn that into a jQuery object again (which produces the DOM for it).
Insert the clone just before the template
Code:
let clone = $($("#table\\-template").html()); // <--------
$("#id",clone).text(value.id);
$("#author",clone).text(value.author);
$("#title",clone).text(value.title);
$("#isbn",clone).text(value.isbn);
$("#table-template").before(clone); // <------
As others have commented, id attributes should have unique values, so your template content cannot have id properties (since it gets cloned). Use class attributes instead.
jQuery bug
Hello my friend. You are cloning the incorrect element, because your create a clone of template with the id #table-template. Please, make this change to your code:
...
let clone = $("#table-template").html();
...
The other thing, the cloned code appears next to #header and not below it because you are using a .row class. I propose to create a div below the #header, with the id="body" and append the new content inside:
...
// $("#header").append(clone);
-> $("#body").append(clone);
...
Thanks for the example.
But I don't change the id of the "collapse" div.
The rest of the objects are cloned normally.
<template id="facilities_template">
<div class="collapse">
<div class="form-check icon-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label font-14" id="facilities_name" ></label>
<i class="icon-check-1 far fa-square color-gray-dark font-20"></i>
<i class="icon-check-2 fa fa-check-square font-20 color-green-dark"></i>
</div>
<div class="mb-3"></div>
</div>
</template>
JavaScript:
let cloneFacility = $($('#facilities_template').html());
$('#facilities_name', cloneFacility).text(value.name);
$('#facilities_name', cloneFacility).attr('data-facility-id', value.id);
$('#collapse', cloneFacility).attr('id','collapse'+ value.id)
$('#facilities_template').before(cloneFacility);
$('#faсility_filter').append(cloneFacility);
I am trying to set the value of a text box when file upload is selected , how ever it does not happen but I see correct value in alert box.
<div class="row">
<div class="col-xs-2">
<div class="file-label"><i></i>#Resources.FolderPath</div>
</div>
<div class="col-xs-4">
<input class=".form-control" name="fileText" type="text" />
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload"/>
</div>
</div>
<div class="col-xs-4">
<label id="fileSizeError" style="color: red"></label>
</div>
</div>
$(document).ready(function () {
$(document)
.on("change","#fileUpload",
function (e) {
alert($("#fileUpload").val());
$("#fileText").val($("#fileUpload").val());
alert("hi");
});
});
Please help me here.I am using Asp.net MVC as platform.
Your input has a name, but #fileText is an ID selector. Either add an id to it, or use an attribute selector to find it.
So either:
<input class=".form-control" id="fileText" name="fileText" type="text" />
<!-- add id------------------^^^^^^^^^^^^^ -->
or
$("[name=fileText]").val($("#fileUpload").val());
// ^^^^^^^^^^^^^^^---- use attribute selector
Try native js:
document.getElementById("fileText").defaultValue = $("#fileUpload").val();
OR
$("#fileText").attr("value", "some value");
Also;
Check to see if your original code works with replacing .val() with .text
Using twitter bootstrap, I have created a button with an input box beside it. I'm trying to then access that value in my view using jQuery but for some reason I can't get anything back besides "undefined". Here's my code:
jQuery:
var browserInput = $("#browserInput").val();
console.log(browserInput);
Html:
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="addBrowser">
<span class="glyphicon glyphicon-plus"></span>
Add
</button>
</span>
<input id="browserInput" type="text" class="form-control" style="display: none;" >
</div>
</div>
If this is your actual code layout, you won't get a value because the DOM isn't loaded at the time you are requesting the value.
You should try to wrap your function in document ready
$(document).ready(function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
If you want to have the value on keyup or interaction with the input box, you can also do it like
$(document).ready(function() {
$('#browserInput').on('keyup',function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
});
I'm going to undelete my answer because apparently it helped the poster solve his issue...
<input id="browserInput" type="text" value="" class="form-control" style="display: none;" />
Seems that having the value="" in the <input> tag made a difference for him.
I wonder if he meant "" instead of undefined.