I have to create only one button which selects the file and uploads too..
I created one button which selects the file but it doesn't fire the onclick function in the upload button.
For an example I have one hello button which just consoles something but in reality it will do something with the selected file.
<div class="upload-btn-wrapper">
<button class="btn" onClick ="hello()">Upload a file</button>
<input type="file" name="myfile"/>
</div>
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
.btn {
border: 2px solid gray;
color: gray;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
function hello() {
console.log("hello");
}
Link for codePen: https://codepen.io/anon/pen/wOmNJw
The input is overriding the button click listener. If you are trying to do something with the file then you should apply a change listener to the input and run a function there. You can do this with or without jquery.
Vanilla JS (No Jquery)
document.getElementsByName('myfile')[0].addEventListener('change', function(){
hello(this);
});
function hello(elem) {
console.log('Hello');
console.log('File Name: ', elem.value);
}
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
.btn {
border: 2px solid gray;
color: gray;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
<div class="upload-btn-wrapper">
<button class="btn" onClick ="hello()">Upload a file</button>
<input type="file" name="myfile"/>
</div>
With JQuery
$('input[name="myfile"]').on('change', hello);
function hello() {
console.log("hello");
}
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
.btn {
border: 2px solid gray;
color: gray;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload-btn-wrapper">
<button class="btn" onClick ="hello()">Upload a file</button>
<input type="file" name="myfile"/>
</div>
Edit: React Example
// Example class component
class InputExample extends React.Component {
handleFileChange(e){
console.log('Hello');
console.log('File Name: ', e.target.value);
}
render() {
return (
<input
id="upload"
ref="upload"
type="file"
accept="image/*"
multiple="false"
onChange={(e) => this.handleFileChange(e)}/>
);
}
}
// Render it
ReactDOM.render(
<InputExample />,
document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
I maked a few changes in your code and it works:
JS file
function hello() {
console.log("hello");
document.querySelector('.upload-btn-wrapper input[type=file]').click();
}
CSS file
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
.btn {
border: 2px solid gray;
color: gray;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
opacity: 0;
}
If this is what you are looking for.
document.getElementById("fileInput").addEventListener("change", function(event, val){
let file = event.target.value;
if(!!file){
document.getElementById("inputWrapper").style.display = "none";
document.getElementById("upload").style.display = "block";
}
});
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
.btn {
border: 2px solid gray;
color: gray;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
<div class="upload-btn-wrapper">
<input type="submit" value="Upload" class="btn" style="display:none" id="upload" />
<div id="inputWrapper">
<span><input type="file" name="myfile" id="fileInput"/></span>
<span><button class="btn">Select file</button> </span>
</div>
</div>
Related
I can't code jquery javascript therefore i have no idea how to highlight (border or background change) the submit button for a few seconds. I tried some of the scripts that have been shared on this platform but i wasn't lucky. What code do you suggest?
The button i need to highlight is submitbtn
and the button that needs to highlight it by click is eventbtn
I appreciate the help
Thanks
Edited: I Want to add class to the submit button once the button is clicked
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.submitbtn {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="submitbtn" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"> <<<<<<<<<<< </button>
</div>
h
The key is to remove the highlighting after a few seconds, this can be done with setTimeout() function:
function highlight(id)
{
clearTimeout(highlight.timer);
const el = document.getElementById(id);
//highlight the button
el.classList.add("highlighted");
//remove highlight after 3sec
highlight.timer = setTimeout(() => el.classList.remove("highlighted"), 3000);
}
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
/* added */
.highlighted
{
box-shadow: 0 0 2em 1px red;
}
.wpcf7-submit {
transition: box-shadow 0.2s;
}
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight" onclick="highlight('form-submit')"> <<<<<<<<<<< </button>
</div>
Do you mean highlight submitbtn when clicking eventbtn?
Add a js to handle the click event, and then add highlight class to submitbtn.
var eventbtn = document.getElementById('highlight');
var submitbtn = document.getElementsByClassName('submitbtn')[0];
eventbtn.addEventListener('mousedown', function () {
submitbtn.classList.add('highlight');
});
eventbtn.addEventListener('mouseup', function () {
submitbtn.classList.remove('highlight');
});
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.submitbtn {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
.highlight {
background-color: #8beccc;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="submitbtn" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"> <<<<<<<<<<< </button>
</div>
Simply add a class to the element you want to highlight. Then remove the class with the setTimeout function.
Add a class in CSS with a high specificity that contains all visible changes you want to apply. It does not matter what it is. It can be background, border, box-shadow...
In JS use an eventListener to listen to click-events on the button.
Apply the class you have specified in CSS with classList.add().
Add a setTimeout function to remove the class after a specified time with classList.remove()
Vanilla JavaScript:
// button element that will be clicked
var button = document.querySelector('button[class="eventbtn"]'),
// element that should be highlighted
input = document.querySelector('#form-submit'),
// timer in ms
timer = 2000;
// eventListener to execute the script on button click
button.addEventListener('click', function() {
// adds a class to apply CSS changes for the highlighting
input.classList.add('highlight');
// timeout function
setTimeout(function() {
// removes the class after the timer has been reached
input.classList.remove('highlight');
}, timer);
})
#form-submit.highlight {
background-color: yellow;
}
/* original CSS */
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"><<<<<<<<<<<</button>
</div>
jQuery:
// button element that will be clicked
var $button = $('button[class="eventbtn"]'),
// element that should be highlighted
$input = $('#form-submit'),
// timer in ms
timer = 2000;
//Eventlistener looking for a click event
$button.click(function() {
//adds a class for highlighting
$input.addClass('highlight');
//timeout function
setTimeout(function() {
//removes class for highlighting
$input.removeClass('highlight');
}, timer);
})
#form-submit.highlight {
background-color: yellow;
}
/* original CSS */
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"><<<<<<<<<<<</button>
</div>
I tryed to answer with pure css by using animation and keyframes. My attempt only works the first time and once everytime after you change the target.
(Note that I'm not used to these properties so there may be a better way to do this)
#form-submit{
background-color: transparent;
}
#keyframes changeBackground {
0% {
background-color: orange;
}
99.999% {
background-color: orange;
}
100% {
background-color: transparent;
}
}
#form-submit:target{
animation: changeBackground 1s;
}
<input type="submit" value="submit" id="form-submit" />
highlight
<br>
change target
Description:
I have 3 sections in my page that I want to do, each having a radio button to select an object.
Problem:
I am trying to figure out a problem where when I press the "online radio button" it will show up the section that I need. But when I press the "Face to Face" the online section keeps appearing.
Expected Result:
Each Radio button should work with each section and hide the other one.
HTML CODE:
$(document).ready(function() {
$("#Online").hide();
$("#Face").hide();
$("#Payment").hide();
});
$(document).on("change", "#choice1", function() {
var radioValue = $(this).val();
console.log(radioValue);
if (($(this).value = "Online")) showOnline();
else if (($(this).value = "Face To Face")) showFace();
});
function showOnline() {
$("#Online").show();
$("#Face").hide();
}
function showFace() {
$("#Face").show();
$("#Online").hide();
}
.dropbtn {
background-color: white;
color: black;
padding: 16px;
font-size: 50px;
border: 2px solid;
border-radius: 25px;
}
.dropdown {
position: relative;
display: inline-block;
margin-left: 40%;
margin-top: 8%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 350px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-size: 30px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: gray;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: gray;
}
.covid {
margin-left: 10%;
margin-top: 2%;
border: 2px solid;
width: 80%;
font-weight: bold;
}
.covid h2 {
text-align: center;
font-weight: bold;
}
.covid img {
position: absolute;
margin-left: 50%;
height: 200px;
}
.covid p {
font-size: 20px;
margin-left: 20%;
}
.textred {
font-size: 20px;
display: inline;
color: red;
}
.textgreen {
font-size: 20px;
display: inline;
color: green;
}
.status {
margin-left: 10%;
margin-top: 2%;
border: 2px solid;
width: 80%;
font-weight: bold;
}
.status h2 {
text-align: center;
font-weight: bold;
}
.china {
font-size: 20px;
margin-left: 20%;
display: inline;
}
.amazon {
font-size: 20px;
margin-left: 20%;
display: inline;
}
.reviews {
margin-left: 10%;
margin-top: 2%;
border: 2px solid;
width: 80%;
font-weight: bold;
}
.reviews h2 {
text-align: center;
font-weight: bold;
}
.bolded {
font-size: 20px;
display: inline;
}
.stars {
white-space: nowrap;
font-size: 20px;
magrin: 15%;
display: inline;
white-space: pre;
color: yellow;
}
.review {
font-size: 20px;
display: inline;
margin: 20%;
font-weight: normal;
}
.mainscreen {
background-color: white;
height: 1800px;
}
.avatar {
vertical-align: middle;
margin-left: 15%;
margin-top: 1%;
width: 50px;
height: 50px;
border-radius: 50%;
}
.choice1{
margin-left: 45%;
}
.choice3{
margin-left: 43%;
}
.choice4{
margin-left: 41%;
}
.button1{
margin-left: 48%;
}
.notreviews{
margin-top: -9%;
}
<div class="w3-panel w3-white w3-card-4 reviews">
<h2>How will you like your appointment to be?</h2>
<section id="choice1">
<form>
<input
type="radio"
name="choice"
class="choice1"
id="OL"
value="Online"
/>
Online
<input
type="radio"
name="choice"
class="choice2"
id="FTF"
value="Face To Face"
/>
Face To Face
</form>
<br />
<br />
<br />
<button onclick="submitAnswer()" class="button1">
Submit Answer
</button>
</section>
</div>
<!-- Online Section -->
<div class="w3-panel w3-white w3-card-4 reviews" id="Online">
<h2>Online Appointments</h2>
<section id="choice2">
<form>
<input
type="radio"
name="choice2"
class="choice3"
id="ZOOM"
value="Zoom"
/>
Zoom
<input
type="radio"
name="choice2"
class="choice2"
id="MEET"
value="Meet"
/>
Google Meet
</form>
<br />
<br />
<br />
<button onclick="submitOnlineAnswer()" class="button1">
Submit Answer
</button>
</section>
</div>
<!-- FTF Section -->
<div class="w3-panel w3-white w3-card-4 reviews" id="Face">
<h2>Face To Face Appointments</h2>
<section id="choice3">
<form>
<input type="radio" name="choice3" class="choice4" id="Amazon" value="Ama"/> Amazon Rainforst Location
<input type="radio" name="choice3" class="choice2" id="China" value="China" /> China Location
</form>
<br>
<br>
<br>
<button onclick="submitFTFAnswer()" class="button1" >Submit Answer</button>
</section>
</div>
<section id="section">
Jquery Code:
$(document).ready(function() {
$("#Online").hide();
$("#Face").hide();
$("#Payment").hide();
});
$(document).on("change", "#choice1", function() {
var radioValue = $(this).val();
console.log(radioValue);
if (($(this).value = "Online")) showOnline();
else if (($(this).value = "Face To Face")) showFace();
});
function showOnline() {
$("#Online").show();
$("#Face").hide();
}
function showFace() {
$("#Face").show();
$("#Online").hide();
}
What am I doing wrong and how can I fix this?
I'm trying to make a text editor that can bold, italic and underline text using jQuery without using any HTML
The problem is that I can't make a selected text bold, the console log outputs "execCommand is not a function", am I doing something wrong? How can I achieve what I'm trying to do?
Here is my code:
(function ($) {
$.fn.text_editor = function(options) {
this.each(function() {
var buttons = {
buttons: ['bold', 'italic', 'underline']
};
var parametres = $.extend(buttons, options);
// generated html
$("body").html("<div class=\"container\">");
$("body").append("<h1 style=\"padding-left:55px;\">text editor</h1>");
$("body").append("<textarea rows=\"10\" cols=\"50\"></textarea>");
$("body").append("<br>");
$("body").append("<div class=\"buttons\"");
$("body").append("<button id=\"bold\">gras</button>");
$("body").append("<button id=\"italic\">italic</button>");
$("body").append("<button id=\"barre\">underline</button>");
// js
$("bold").execCommand("bold");
$("italic").execCommand("italic");
$("underline").execCommand("underline");
console.log($("bold"));
});
};
})(jQuery);
$(document).ready(function() {
$("textarea").text_editor()
});
After some searching, I came acrossthis article.
and this code pen. https://codepen.io/souporserious/pen/xBpEj
hope this helps.
$('.wysiwyg-controls a').on('click', function(e) {
e.preventDefault();
document.execCommand($(this).data('role'), false);
});
$controls-color: #ADB5B9;
$border-color: #C2CACF;
* {
box-sizing: border-box;
}
.wysiwyg-editor {
display: block;
width: 400px;
margin: 100px auto 0;
}
.wysiwyg-controls {
display: block;
width: 100%;
height: 35px;
border: 1px solid $border-color;
border-bottom: none;
border-radius: 3px 3px 0 0;
background: #fff;
a {
display: inline-block;
width: 35px;
height: 35px;
vertical-align: top;
line-height: 38px;
text-decoration: none;
text-align: center;
cursor: pointer;
color: $controls-color;
}
[data-role="bold"] {
font-weight: bold;
}
[data-role="italic"] {
font-style: italic;
}
[data-role="underline"] {
text-decoration: underline;
}
}
[class^="menu"] {
position: relative;
top: 48%;
display: block;
width: 65%;
height: 2px;
margin: 0 auto;
background: $controls-color;
&:before {
#extend [class^="menu"];
content: '';
top: -5px;
width: 80%;
}
&:after {
#extend [class^="menu"];
content: '';
top: 3px;
width: 80%;
}
}
.menu-left {
&:before, &:after {
margin-right: 4px;
}
}
.menu-right {
&:before, &:after {
margin-left: 4px;
}
}
.wysiwyg-content {
max-width: 100%;
width: 100%;
height: auto;
padding: 12px;
resize: both;
overflow: auto;
font-family: Helvetica, sans-serif;
font-size: 12px;
border: 1px solid $border-color;
border-radius: 0 0 3px 3px;
background: #F2F4F6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wysiwyg-editor">
<div class="wysiwyg-controls">
<a href='#' data-role='bold'>B</a>
<a href='#' data-role='italic'>I</a>
<a href='#' data-role='underline'>U</a>
</i>
</i>
</i>
</div>
<div class="wysiwyg-content" contenteditable>
<b>Let's make a statement!</b>
<br>
<i>This is an italicised sentence.</i>
<br>
<u>Very important information.</u>
</div>
</div>
NOTE: this is not my code.
execCommand is an experimental function, and its an function of document and not html elements. You can however call this function as below -
$("#bold").document.execCommand("bold");
$("#italic").document.execCommand("italic");
$("#underline").document.execCommand("underline");
I have few questions about javascript:
Can't close div with id=myModalName then clicking on myModalName it most open then click on input, somehow second div id=myModalLocation closes.
Maybe you can say how to compare both scripts in one.
Sorry about code somehow then i am updating here shows error {
"message": "Uncaught SyntaxError: Invalid regular expression: missing /",
"filename": "http://stacksnippets.net/js",
"lineno": 243,
"colno": 7
}
Here is code:
var modalName = document.getElementById('myModalName');
// Get the button that opens the modal
var btn = document.getElementById("input_name");
// When the user clicks the button, open the modal
btn.onclick = function() {
modalName.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modalName) {
modalName.style.display = "none";
}
}
/ /
Get the modal
var modalLocation = document.getElementById('myModalLocation');
// Get the button that opens the modal
var btn = document.getElementById("input_location");
// When the user clicks the button, open the modal
btn.onclick = function() {
modalLocation.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modalLocation) {
modalLocation.style.display = "none";
}
}
* {
margin: 0;
padding: 0;
}
body {
margin: auto;
width: 960px;
padding-top: 70px;
font-family: "Oswald", sans-serif;
}
.SearchForm {
margin: auto;
margin-top: 50px;
}
.SearchForm_row {
margin: auto;
margin-top: 10px;
height: 110px;
width: 100%;
border: 3px solid;
border-radius: 50px;
border-color: rgba(86, 192, 255, 0.5);
}
#row3 {
width: 400px;
}
.SearchForm_row_row {
height: 50px;
width: 200px;
float: left;
margin-top: 20px;
margin-left: 25px;
border-left: 3px solid;
border-color: rgba(86, 192, 255, 0.5);
padding: 10px 0px;
position: relative;
left: 5px;
}
.SearchForm_row_row1 {
height: 50px;
width: 475px;
float: left;
margin-top: 20px;
margin-left: 25px;
border-left: 3px solid;
border-color: rgba(86, 192, 255, 0.5);
padding: 10px 0px;
position: relative;
left: 5px;
}
.SearchForm_row_row_input,
.SearchForm_row_row_label {
width: 250px;
padding-left: 25px;
float: left;
}
.input2 {
height: 40px;
width: 190px;
border: none;
font-size: 18px;
outline: 0px;
}
.input2:focus {
border-bottom: 1.5px solid #4CAF50;
}
.span {
font-size: 15px;
color: rgb(161, 153, 135);
}
#input_start {
width: 40%;
}
#input_ends {
width: 40%;
position: relative;
left: 5px;
}
.par {
display: inline-block;
font-size: 20px;
}
.search_button {
background-color: #fff;
/* Green */
border: none;
color: black;
padding: 6px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 25px;
margin-left: 5px;
cursor: pointer;
border: 2px solid;
border-radius: 10px;
outline: none;
border-color: #4CAF50;
}
.search_button:hover {
background-color: #4CAF50;
color: black;
}
.SearchForm_row_row_button {
float: left;
position: relative;
bottom: 20px;
left: 40px;
}
/*Cia yra js of type*/
/*Cia yra js of type*/
/*Cia yra js of type*/
/*Cia yra js of type*/
/* The Modal (background) */
.modal-name {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
}
/* Modal Content */
.modal-content-name {
background-color: #fefefe;
margin-left: 50px;
margin-top: 140px;
padding: 25px;
border: 1px solid #888;
width: 85%;
border: 3px solid;
border-radius: 50px;
border-color: rgba(86, 192, 255, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Svetainių kūrimas</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="SearchForm">
<div class="SearchForm_row">
<div class="SearchForm_row_row">
<label class="SearchForm_row_row_label">
<span class="span">What?</span>
</label>
<div class="SearchForm_row_row_input">
<input type="text" autocomplete="off" placeholder="Event type or name" name="name" class="input2" id="input_name"></input>
</div>
</div>
<div class="SearchForm_row_row">
<label class="SearchForm_row_row_label">
<span class="span">Where?</span>
</label>
<div class="SearchForm_row_row_input">
<input type="text" autocomplete="off" placeholder="Event place" name="location" class="input2" id="input_location"></input>
</div>
</div>
<div class="SearchForm_row_row1">
<label class="SearchForm_row_row_label">
<span class="span">When?</span>
</label>
<div class="SearchForm_row_row_input">
<input type="text" autocomplete="off" placeholder="Event starting" name="date" class="input2" id="input_start"></input>
<p class="par">→</p>
<input type="text" autocomplete="off" placeholder="Event ends" name="date" class="input2" id="input_ends"></input>
</div>
<div class="SearchForm_row_row_button">
<button class="search_button">🔍</button>
</div>
</div>
<div id="myModalName" class="modal-name">
<div class="modal-content-name">
<p>Some text in the Modal..</p>
</div>
</div>
<div id="myModalLocation" class="modal-location">
<div class="modal-content-location">
<p>Some text</p>
</div>
</div>
</div>
</section>
</body>
</html>
Your second bit of code replaces the function in window.onclick, removing the code to hide the modal.
You could put both if statements in a single onclick function. And they can all be in the same <script>.
I am trying to make Javascript do something in this case display an alert when a file is selected by the user in an . I am not sure if I my code actually gets into my javascript or not, Here is my code:
function showNoFile() {
if(document.getElementById("video-file-upload").value != "") {
alert("yeap");
}
}
/*****************
UPLOAD BUTTON
******************/
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
margin:10px;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
height: 100%;
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #F3A662;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
text-transform: uppercase;
}
<form id="video_uploader" name="video_uploader" action="uploader.php" method="post" enctype="multipart/form-data">
<span class="file-wrapper btn ad-choice">
<input type="file" name="file" id="video-file-upload" />
<span class="button">Choose a video</span>
</span>
<br/>
<input type="submit" name="submit" value="Submit" />
</form>
use it on DOM ready
$("#video-file-upload").change(function(){
if($(this).val() != ""){
alert("some file selected");
}
});
Fiddle
if (document.getElementById("video-file-upload").files.length == 0) {
alert("yeap");
}
Check for files.length is equal to 0.
with javascript:
function showNoFile() {
if(this.value != "") {
alert("yeap");
}
}
document.getElementById("video-file-upload").onchange = showNoFile;
function showNoFile() {
if(this.value != "") {
alert("yeap");
}
}
document.getElementById("video-file-upload").onchange = showNoFile;
/*****************
UPLOAD BUTTON
******************/
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
margin:10px;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
height: 100%;
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #F3A662;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
text-transform: uppercase;
}
<form id="video_uploader" name="video_uploader" action="uploader.php" method="post" enctype="multipart/form-data">
<span class="file-wrapper btn ad-choice">
<input type="file" name="file" id="video-file-upload" />
<span class="button">Choose a video</span>
</span>
<br/>
<input type="submit" name="submit" value="Submit" />
</form>