Develop Reference

Bootstrap Twitter input type file how to clear the file?

I'm implementing option for the user in the form where they can select one of allowed files and upload. This feature interface is build in Bootstrap 3 and I found one of the blogs that helped me style the interface. However, I'm wondering if there is a good option to clear/remove selected file? In case if user decided not to upload the file how they can remove it? I would need like X delete button on the very right side. Also file has to be remove with JavaScript I guess. If anyone knows the way to achieve this please let me know. Here is my code example:
$("#frm_file").on("change", uploadFile);
function uploadFile() {
var ftype = $(this).get(0).files[0].type,
fname = $(this).get(0).files[0].name,
fextension = fname.split('.').pop(), // Another way to get file extension: fname.substring(fname.lastIndexOf('.')+1);
validExtensions = ["jpg","jpeg","png","gif","doc","docx","xls","xlsx","txt","pdf"];
console.log(fname);
$("#frm_filename").val(fname);
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group">
<label class="control-label" for="file"><span class="label label-default">File:</span></label>
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-primary">
Browse… <input type="file" name="frm_file" id="frm_file" style="display: none;">
</span>
</label>
<input type="text" class="form-control" name="frm_filename" id="frm_filename" readonly>
</div>
</div>

Here is a very basic example using the bootstrap button on the right hand side. This is practically taken from the bootstrap 3.7 website. https://getbootstrap.com/docs/3.3/css/#forms
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span id="clear" class="input-group-addon">X</span>
</div>
<script>
Document.getElementById("clear").addEventListener("click", clearInput);
Function clearInput(){
Document.getElementById("clear").Value = "";
}
</script>

Try something like
document.getElementById('frm_file').value = "";
If not, try this answer.

In case you're banging your head against a brick wall like I've been, if you're using the .custom-file-input option from Bootstrap 4.x, none of the many and varied ways of clearing your file input will work. As the docs describe, this class causes Bootstrap to "hide the default file <input> via opacity and instead style the <label>". So to clear it, this is what I did:
Given (from the Bootstrap docs):
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Use:
var $input = $('#customFile')
$input.val(null);
$input.next('label').text('Choose file');

Implementing form masking js

To implement form masking I followed this example:
http://html.codedthemes.com/gradient-able/default/form-masking.html
Instead of this:
<input type="text" class="form-control date" data-mask="99/99/9999">
I want to do this:
<input type="text" class="form-control date" data-mask="99.99.9999">
These scripts are involved:
<script src="../files/assets/pages/form-masking/inputmask.js"></script>
<script src="../files/assets/pages/form-masking/jquery.inputmask.js"></script>
<script src="../files/assets/pages/form-masking/autoNumeric.js"></script>
<script src="../files/assets/pages/form-masking/form-mask.js"></script>
I changed form-mask.js to start like this:
'use strict';$(function(){$(".date").inputmask({mask:"99.99.9999"});
But that didnt do it.

You can try this.
You have the part correct that gets all the fields with date in it.
Then, you have to change the data-mask attribute. Since its a generic field, we use the jquery function attr for that.
$(".date").attr('data-mask','99.99.9999');
http://api.jquery.com/attr/

How can I specify multiple selector jquery

This is my html code:
<input type="text" id="home">
<input type"text" id="dog">
I need to do something to read the values in these fields. So I wrote my jquery code:
//this code is wrong because it doesn't work
$('input[type="text"][id="home"] input[type="text"][id="dog"]')....
How I can select something like this? Can anyone help me?

For selecting multiple items use comma in between them
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#home, #dog').val("hello");
});
</script>
</head>
<body>
<input type="text" id="home">
<input type"text" id="dog">
</body>
</html>

Use a comma between two selectors when you are selecting based on multiple criteria. A simple example is:
$("#element1, #element2, #element3")
Your example:
$('input[type="text"][id="home"], input[type="text"][id="dog"]')
See Multiple Selector (“selector1, selector2, selectorN”)

you should use $('#home, #dog');

Token, tags, badges in input field

Please see my last post for the answer.
On my website I have an input field. I want to use it that users on my page can "tag" other users to an image (similar to the "person xy is on this picture feature on facebook).
As soon as the person starts typing, I want to display possible values via jQuery autocomplete and as soon as the person selects one possible value, I'd like to have the selected value displayed in a tag. (I speak of the optical representation, for example that the value is underlined with a grey, rounded rectangle, like here on SO).
This is my input field:
<label for="tokenfield">Wer ist auf diesem Bild zu sehen?</label>
<input type="text" class="form-control" id="tokenfield" value="example1, example2" />

Something like this will change the placeholder as you type:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="Bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.placeholderValue').on("keyup", function () {
$('.targetPlaceholder').attr('placeholder', $('.placeholderValue').val());
})
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input type="text" class="placeholderValue form-control" />
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control targetPlaceholder" placeholder="Username" aria-describedby="basic-addon1" />
</div>
</div>
</div>
</div>
</body>
</html>

I asked the question above a few weeks ago, but now realized, that it wasn't so well asked. And after a few days looking around, I found a solution for it.
I now wanted to let you know about my solution, just as a reference or hint for everyone else who finds this question or has the same problem.
So I am now using this library GitHub Tokenfield.
And use it like this:
<label for="tokenfield">Wer ist auf diesem Bild zu sehen?</label>
<input type="text" class="form-control" id="tokenfield" value="red,green,blue" />
the basic JavaScript for initializing the input field is:
$(document).ready(function () {
$('#tokenfield').tokenfield();
})
However, if you want to use jQuery Autocomplete you can do so like this:
$('#tokenfield').tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white']
},
showAutocompleteOnFocus: true,
limit: 1
});
The input field gets initialized as tokenfield, so when entering data and pressing enter, it results in those token-badge-tag things.
After intitialization, it shows 3 tags, "red", "green" and "blue", which the library takes from the "value"-field of the input field.
I like this solution and library very much, because it also offers mechanisms to bind to jQuery Autocomplete via ajax, which is exactly what I wanted and needed.
I hope I was able to help somebody or save some time.

javascript call not working

This my code for trialindex.php. The code contains an html form which is submitted properly. I am trying to create a javascript function to be called when the form is going to be submitted. Right now there is only an alert in this function. But it the function isn't called when the form is submitted.
<?php session_start();?>
<html>
<head>
<script type="text/javascript">
function try(){
alert("Hello");
}
</script>
<title>Untitled Document</title>
</head>
<body>
<div id="change">
<form id="trialForm" method="post" action="connection.php" onSubmit="try()">
<center>
<h3><b>Login</b></h3>
<br/>
<label>Username :</label>
<input type="text" id="username" name="username"/>
<br/>
<br/>
<label>Password :</label>
<input type="password" id="password" name="password"/>
<br/>
<br/>
<input type="submit" value="Login"/>
</center>
</form>
</div>
</body>
</html>
The javascript function try() doesn't seem to work. I have also tried several other calls for try like : try(); , javascript:try() , javascript:try();
But in any of the syntax no alert is popped. Also in my browser pop-up are not blocked.
Could you please suggest what could the possible problem be?

You can't use try as a function name.
It is a reserved word:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words
Just use a different name for your function.
function my_submit_function(){
alert("Hello");
}
It is good practice to check your console for errors.

The error message I see is:
Uncaught SyntaxError: Unexpected token try
Which makes clear that try is not a method, but a token (or keyword).
If you rename try it works.