File name not showing in file input in bootstrap - html

I have this html code
<head>
<link rel="stylesheet" href="./Depd/bootstrap.min.css">
</head>
<body>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
</div>
<script src="./Depd/jquery.slim.min.js">
</script>
<script src="./Depd/popper.min.js"></script>
<script src="./Depd/bootstrap.min.js"></script>
</body>
When I run and try to upload a file by clicking browse and select a file i want to change the label text to the name of the file I uploaded how can I achieve that?
I'm using bootstrap. If you don't use bootstrap and use normal html it works in default way and shows the file name. But I have to use bootstrap here. So, please suggest a solution that goes with bootstrap.

You're going to need to use some JavaScript for this. I'll walk you through the steps: First detect when a file gets uploaded, then get the file name and update the label contents with the filename. Below is a brief example.
let input = document.getElementById("inputGroupFile04");
let label = document.querySelector("label[for='inputGroupFile04']");
input.addEventListener("change", e => {
label.innerText = input.value.split(`C:\\fakepath\\`)[1];
});
<head>
<link rel="stylesheet" href="./Depd/bootstrap.min.css">
</head>
<body>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
</div>
<script src="./Depd/jquery.slim.min.js">
</script>
<script src="./Depd/popper.min.js"></script>
<script src="./Depd/bootstrap.min.js"></script>
</body>
If you require any more clarification please don't hesitate to ask.

Related

Something wrong with my AngularJs code [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am new in Angularjs, below is my code,
<!DOCTYPE html>
<html>
<head>
<title>ng-Messages Service</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular-messages.min.js'></script>
<script src="ng-messages.js"></script>
</head>
<body>
<div ng-controller='thecontroller'>
<form name="myForm">
<label>
Enter text:
<input type="text" ng-model="field" name="myField" required minlength="5" />
</label>
<div ng-messages="myForm.myField.$error" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength, maxlength">
Your email must be between 5 and 100 characters long
</div>
</div>
</form>
</div>
</body>
</html>
And Below is angularjs code,
var myApp=angular.module('myApp',['ngMessages']);
myApp.controller('thecontroller',function($scope){
$scope.name="Gopal";
});
We didn't get proper output, what's wrong with my above code.
Thanks
You have not mentioned ng-app="myApp" in your html template.
Also make sure you have reference the .js file needed. I assume this includes the module declaration.
<script src="ng-messages.js"></script>
DEMO
var myApp=angular.module('myApp',['ngMessages']);
myApp.controller('thecontroller',function($scope){
$scope.name="Gopal";
});
<!DOCTYPE html>
<html>
<head>
<title>ng-Messages Service</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular-messages.min.js'></script>
</head>
<body ng-app="myApp">
<div ng-controller='thecontroller'>
<form name="myForm">
<label>
Enter text:
<input type="text" ng-model="field" name="myField" required minlength="5" />
</label>
<div ng-messages="myForm.myField.$error" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength, maxlength">
Your email must be between 5 and 100 characters long
</div>
</div>
</form>
</div>
</body>
</html>
You need to specify ng-app="your Module name" to bootstrap the application when index.html page start to load. It triggers the AngularJs life cycle automatically.
Note- You may also specify the pattern for validating email that is email is valid or not
<!DOCTYPE html>
<html >
<head>
<title>ng-Messages Service</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular-messages.min.js'></script>
<script src="ng-messages.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller='thecontroller'>
<form name="myForm">
<label>
Enter text:
<input type="text" placeholder="abc#eyz.com" ng-model="field" name="myField" data-ng-required="true" minlength="5" maxlength="100" ng-pattern="/\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*/i"/>
</label>
<div data-ng-show="myForm.myField.$error.required">You did not enter a field</div>
<div data-ng-show="myForm.myField.$error.min
|| myForm.myField.$error.max">
Your email must be between 5 and 100 characters long
</div>
<div data-ng-show="myForm.myField.$error.pattern" >The email id is not valid</div
</form>
</div>
</body>
</html>

Submitting value depending on what button is clicked

Sorry I'm not sure how to phrase this properly
Is it possible to do this?:
Example I want to have 4 buttons/divs for the user to click on
Maybe with a form like this?
input value="Yes" name="response"
input value="No" name="response"
input value="Maybe" name="response"
input value="Later" name="response"
If the user clicks "Yes" then it will form submit that data with "Yes" to be stored in the database slot of "response"
So it's like 4 boxes with "Yes" "No" "Maybe" and "Later" which can be click by the user after which will be submitted like a form
Sorry once again as I'm lost as to how to do this(hopefully the solution is simple?)
Thanks in advance!
Hi i have one idea to do this With JQuery
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div>
<input class="btn1" type="button" value="Yes" />
</div>
<div>
<input class="btn1" type="button" value="No"/>
</div>
<div>
<input class="btn1" type="button" value="Maybe"/>
</div>
<div>
<input class="btn1" type="button" value="Later"/>
</div>
<div id="display">
</div>
<script>
$(document).ready(function() {
$('.btn1').click(function(e) {
e.preventDefault();
document.getElementById('display').innerHTML=$(this).val();
});
});
</script>
</body>
</html>
Fiddle link: https://jsfiddle.net/pranavadurai/jbxdbkLk/2/
There are two different ways you could approach this. A form can have multiple submit buttons, via <input type='submit' name='custom_name' .... You could also have a drop down (<select>) that the user selects from the options you present them, and have a separate submit button.
Examples
Multiple Submit Buttons
<form id="my_form" ...>
<!-- actual form contents -->
<input type="submit" name="submit_value" value="Yes" />
<input type="submit" name="submit_value" value="No" />
...
</form>
In this situation, the POST/GET data for submit_value would be set to whatever the user clicked.
Dropdown
<form id="my_form" ...>
<!-- actual form contents -->
<!-- drop down -->
<select name="my_option">
<option value="yes">Yes</option>
<option value="no">No</option>
...
</select>
<!-- normal submit button -->
<input type="submit" value="Submit" />
</form>
In this case, the POST/GET data for this form would be my_option for the choice you were asking about.
i will propose a solution evolving jQuery, HTML and some database
<html>
<head>
<title>Hi folk</title>
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//Here goes your database query
});
$("#btn2").click(function(){
//Here goes your database query
});
$("#btn3").click(function(){
//Here goes your database query
});
$("#btn4").click(function(){
//Here goes your database query
});
});
</script>
</head>
<div>
<div>
<input id="btn1" type="button" value="Yes" />
</div>
<div>
<input id="btn2" type="button" value="No"/>
</div>
<div>
<input id="btn3" type="button" value="Maybe"/>
</div>
<div>
<input id="btn4" type="button" value="Later"/>
</div>
</div>
</html>

html checkbox switch active/inactive labels not working

I am using the switch class from foundation-zurb and I am using the example from their website, but the inside labels for the inactive/active settings are not working. The code is below:
<p>Above/Below</p>
<div class="switch">
<input class="switch-input" id="Above/Below" type="checkbox" name="ABSwitch">
<label class="switch-paddle" for="Above/Below">
<span class="switch-active" aria-hidden="true">A</span>
<span class="switch-inactive" aria-hidden="true">B</span>
</label>
</div>
The A and B on the respective active/inactive settings of the switch do not show up.
Try something like this:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet" />
</head>
<body>
<p>Above/Below</p>
<div class="switch">
<input class="switch-input" id="Above/Below" type="checkbox" name="ABSwitch">
<label class="switch-paddle" for="Above/Below">
<span class="switch-active" aria-hidden="true">A</span>
<span class="switch-inactive" aria-hidden="true">B</span>
</label>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.1.1/js/foundation.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>

Link to html pages in ionic creator pages

I created a basic registration page using creator.ionic.io. I have downloaded , deployed in phone and came as expected.
I tried to explore the ionic generated html page and ended up with a question.
I could not find how index.html is rendering the register.html page i.e. where is the link inside div tag to register.html page.
There are 2 config.xml present in project and I am not sure which is considered to build.
One is inside android platform - I:\myprojects\silyap\platforms\android\res\xml\config.xml
Other is at project name folder:
I:\myprojects\silyap\config.xml
Both config.xml has tag content src="index.html"
Can someone clarify it.
Below is the index.html page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
register.html page
<ion-view title="Register">
<ion-content overflow-scroll="true" padding="true" scroll="false" class="has-header has-footer">
<form class="list">
<ion-list>
<label class="item item-input" name="Number">
<span class="input-label">Number</span>
<input type="tel" placeholder="">
</label>
<label class="item item-input" name="Email">
<span class="input-label">Email</span>
<input type="text" placeholder="">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="text" placeholder="">
</label>
</ion-list>
<button class="button button-block ">Register</button>
</form>
</ion-content>
</ion-view>
Awesome that you're using Ionic Creator. If you're unfamiliar with actual Ionic code, I recommend checking out http://AppCamp.io for a run through of how Angular + Ionic work together.

load external files using ajax/query

I'm having 2 buttons to load 2 separate forms, events and offers. when a user clicks on a button i want to load the relevant html form and make the buttons disappear.
events loads events.html
offers loads offers.html
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" />
<input name="c_offer" class="clr" type="button" value="offer" />
</form>
</div>
load the form to
<div id="form_body"> </div>
i want make sure that the buttons are disappear after the user has clicked.
Can someone give an idea how to do it?
You need to use $.load() to get the HTML from your external HTML pages. Try something like this:
HTML
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" id="eventsBtn" />
<input name="c_offer" class="clr" type="button" value="offer" id="offersBtn" />
</form>
</div>
jQuery
$("#eventsBtn").on('click', function() {
$("#form_body").load('events_loads_events.html');
});
$("#offersBtn").on('click', function() {
$("#form_body").load('offers_loads_events.html');
});
More information on load();
If you use jQuery then this is quite easy:
$('#form1 input').on('click', function(event) {
var $target = $(event.target);
$('#form_body').load($target.data('url'));
$('#form1').hide();
})
You would have to change you html into this:
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" data-url="http://www.path-to-your-form-html-for-this-button.com/"/>
<input name="c_offer" class="clr" type="button" value="offer" />
</div>