I want to make a form where when a user types into an input box, the input box changes the ending of the src of my image (which is an API image).
So the image code looks like this:
<img src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100" />
I need the input from the textbox to go after the data= and before the &size=100x100
I have tried a couple of ways of accomplishing this but haven't quite got it:
$(function() {
$('#linktextbox').onchange( function() {
window.location = document.getElementById('baseUrl').attr('href') + '/' + $('#linktextbox').val();
return false;
});
});
I have also tried:
var link = document.getElementById("baseUrl");
link.href = "http://api.qrserver.com/v1/create-qr-code/?data="+document.getElementById('linktextbox')+"&size=100x100"
Any help is appreciated!
You can do it like this.
Obviously you need an input and something to confirm the user action like the button I added.
edit: In order to not abuse the server that generates the image I have deliberately chosen not to use a keyUp event.
When you click the button the small piece of Javascript updates the src of the image tag.
I used IDs to identify the HTML elements, but there are a number of different ways to find a specific element.
function updateQR (){
document.getElementById('image').src = "https://api.qrserver.com/v1/create-qr-code/?data=" + encodeURIComponent(document.getElementById('textInput').value) + "&size=100x100";
}
<input id="textInput" type="text">
<br>
<button onclick="updateQR()">Update QR code</button>
<br>
<br>
<img id="image" src="" />
Here the code in plain JavaScript
function updateQr(ele){
document.getElementById("qr").src = "https://api.qrserver.com/v1/create-qr-code/?data="+encodeURIComponent(ele.value)+"&size=100x100/";
}
<input type="textbox" value="HelloWorld" onKeyUp="updateQr(this)"/><br/><br/>
<img id="qr" src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100/">
Related
I have a form in which users can talk on a chatroom. My problem is that I have a gallery in which users can select pictures.
My question is how could a user click a html link and for that html link to input text into the input so when the user clicks the link which says cat it inputs into the text field :cat.
This is the form I have so far:
<form method="POST" action="chat.php">
<input type="text" name="message"></input>
<input type="submit" />
</form>
This is the gallery:
<img src="cat.jpg"/>
So again, the question is how I could insert text into the text box once the user clicks the image of the cat?
Thank you for anyone who spends time on helping me solve this issue.
If you're using jQuery you could do something like this:
$('a.cat').click(function()
{
$('input[name="message"]').val(':cat');
});
In this case you would need to update the link with the following:
<a class="cat" href="#"><img src="cat.jpg"/></a>
You can create a js function and then call it with the anchor to change the value attribute of the input. Input type text should not have a closing tag either.
function changeChatInput(value) {
document.getElementById('chatInput').value = value;
}
<form method="POST" action="chat.php">
<input type="text" name="message" id="chatInput" />
<input type="submit" />
</form>
<a href="javascript: changeChatInput(':cat');">
<img src="cat.jpg" />
</a>
Here is a solution in JS (without jQuery):
http://jsbin.com/doqedodezo/3/edit?html,js,output
The image triggers a JS function and passes the text which is supposed to be added to the input field.
I added a id to the input to address it.
I'd use
$('a > img').click(function() {
var imgName = retrieveImgName($(this).attr('src'));
$('input[name="message"]').val(':' + imgName);
});
var retrieveImgName = function(imgPath) {
return imgPath.substring(0, imgPath.indexOf('.'));
};
Doing that you can extract the logic for retrieving the name based on the src attribute of the img.
So, if the logic changes for some reason, you can sobstitute it quite easily.
You can achieve your job by using this jQuery syntax.
<script type="text/javascript">
$('a > img').click(function(e){
e.preventDefault();
$('input[name="message"]').val(':cat');
});
</script>
I am using the dropbox chooser (https://www.dropbox.com/developers/dropins/chooser/js) as part of a form. Once the user has selected a file, I would like to display that file name next to the chooser button.
It would also be nice to include a 'remove' link to clear the selection.
i assume that this will be done using javascript/jquery. Any help would be greatly appreciated.
EDIT: An earlier answer used e.files[0].link.split('/').pop(), but there's a field for this already! It's called name. Updated below.
The file name is one of the things returned, so you can just do this:
var url = e.files[0].link;
var name = e.files[0].name;
As to how to display it on the page, I would suggest adding a span somewhere and setting its text. Try this code, which does that and a couple other nice things (like handle the submit button's disabled state and resetting the Chooser button to its "unused" state):
<form>
<input id="chooser" type="dropbox-chooser" name="selected-file" data-link-type="direct" style="visibility: hidden;"/>
<p id="chosen" style="display:none">Chosen file: <span id="filename"></span> (<a id="remove" href="#">remove</a>)</p>
<input type="submit" id="submit" disabled />
</form>
<script>
$(function () {
$('#chooser').on('DbxChooserSuccess', function (e) {
var url = e.originalEvent.files[0].link;
var filename = e.originalEvent.files[0].name;
$('#chosen').show();
$('#filename').text(filename);
$('#submit').prop('disabled', false);
});
$('#remove').click(function (e) {
e.preventDefault();
$('#chosen').hide();
$('.dropbox-chooser').removeClass('dropbox-chooser-used');
$('#submit').prop('disabled', true);
});
});
</script>
EDIT
I should point out that the dropbox-chooser-used class is just something I noticed. Since it's not documented, that may change in a future version of the library. The rest should be fine.
I am trying to use this post in order to get the animated gif for Please wait message.... on button click. However, when I open the sample html page that I am testing on, I get an input box instead of an button with am image.
Below is the html code that I am trying on a test page.
<html>
<script type="text/javascript">
function loadSubmit() {
var ProgressImage = document.getElementById('progress_image');
document.getElementById("progress").style.visibility = “visible”;
setTimeout(function(){ProgressImage.src = ProgressImage.src},100);
return true;
}
</script>
<body>
<p style="visibility:hidden;" id="progress">
<img id="progress_image" style="padding-left:5px;padding-top:5px;" src="ajax-loader.gif" alt=""> Uploading in progress… </p>
<input class="contSubmit" onclick="return loadSubmit()" type=”button” src= "submitinfo_btn.png" />
</body>
</html>
Be careful when copy-pasting Code like this.
This is wrong:
type=”button”
This is right:
type="button"
Notice the difference? This happens if you copy Code from a website that doesn't have proper formatting for Code enabled.
According to your tutorial, the input should be of type "image", not "button".
Change your input type to image. The src is only valid for image.
Also, it appears your problem has nothing to do with your "please wait" animated gif, so maybe your title is misleading.
I've seen several ways to display image preview but none of them seem to work or they work only in FF/Chrome.
Trying to keep it simple:
Markup:
<input type="file" id="logo-upload" onchange="changePreview();"/>
<br/>
<img src='#Url.Image("logo.png")' alt="Preview" id="logo-preview"/>
Javascript:
<script type="text/javascript">
function changePreview() {
var input = $('#logo-upload').val();
$('#logo-preview').attr('src', input)
.width(150)
.height(50);
}
</script>
When debugging input shows the correct local image path but preview never shows up.
Why and how can I get this to work (in all browsers ) ?
Thanks.
Try setting the $('#logo-upload').change(function(){}) instead of using onChange. I think that's a good start. Then put the jQuery inside $(document).ready(function(){}). That could be another issue, if you're setting the script before the elements exist on the page.
If you can post more code, it would be beneficial.
Also, for IE, you're going to run into permissions issues that are on the user, which you don't have control over (at least in this situation). So, in those cases, you'll either have to upload the image first, to get the image from the server, OR they'll have to change their security settings to allow for this type of content to be accessed.
<input type="file" id="logo-upload" />
<br/>
<img src="#Url.Image('logo.png')" alt="Preview" id="logo-preview"/>
<script type="text/javascript">
$(document).ready(function() {
$('#logo-upload').change(function() {
var input = $(this).val();
$('#logo-preview').attr('src', input).width(150).height(50);
})
});
</script>
I am developing a page in with a text box, a submit button, and an iframe.
The URL should be put in the text box. Upon hitting the button, the result should appear in the iframe.
How do I do this?
You should not need JavaScript at all. Set the target attribute of your form to the name of the frame, and it will load there.
See also the duplicate How do you post to an iframe?.
Here is a quick solution for now using js
<form target="#" name="iframeform" action="post">
<input type="text" value="http://" name="framefood" id="framefood" /><br />
<button id="feedframe" onclick="completeFrame(); return false;">Send</button><br /><br />
<iframe id="feedme" width="600" height="400"></iframe>
</form>
<script>
var completeFrame = function(e){
var feidlId = document.getElementById("framefood");
var frameSrc = feidlId.value;
var frameId = document.getElementById("feedme");
frameId.src = frameSrc;
}
</script>