How to clear user uploaded images if the limit of files exceeded in jquery
I have a simple form where a user can upload multiple images. I only want the user to upload 4 images at once, so I did the following:
$("#myfile").on("change", function() {
if ($("#myfile")[0].files.length > 4) {
alert("You can select only 4 images");
}
});
<input type="file" id="myfile" class="form-control" name="pimage[]" multiple="multiple">
This gives an alert when the user uploads more than 4 images but doesn't stop them from submitting the form.
Can anyone please tell me how to clear the user uploaded images if the limit exceeds or disable the submit button?
2 answers
-
answered 2022-05-07 05:18
Vetos
In this case better to create one more variable with flag status and then check it before submit a form.
Something like that:
let flag = false; $("#myfile").on("change", function() { if ($("#myfile")[0].files.length > 4) { alert("You can select only 4 images"); flag = true; } }); if(!flag){ $('#form').submit(); }
-
answered 2022-05-07 05:18
Dimitris Papageorgiou
I will implement the disable attribute strategy as I said in the comments:
$("#myfile").on("change", function() { if ($("#myfile")[0].files.length > 4) { alert("You can select only 4 images"); $(".form-control").prop("disabled",true); } });
With the above code the user will not be able to submit the form
do you know?
how many words do you know
See also questions close to this topic
-
how to change prettier format for react native
my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter
from this code
import { View, Text } from 'react-native' import React from 'react' export default function App() { return ( <View> <Text>Apps</Text> </View> ) }
it's formatted to this
import { View, Text } from 'react-native' import React from 'react' export default function App() { return ( < View > < Text > Apps < /Text> < /View> ) }
-
MarkLogic server-side JavaScript and XQuery
I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.
I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
- Popover in chrome extension using js
-
Creating Sticky Navbar with Drop Down Menu HTML
I am creating a HTML web page which contains a sticky navbar with drop down menu. However, when I created one, the dropdown menu does not works in the sticky navbar and so goes vise versa. below is the screenshot of both the result of the two codes.
*image with dropdown menu but without sticky navbar
*image with sticky navbar but without dropdown menu
below is the code for "image with dropdown menu but without sticky navbar"
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css"> <style> body {margin:0;font-family:Arial} .topnav { overflow: hidden; background-color: #333; } .topnav a { list-style-type: none; float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; position: sticky; } .active { background-color: #04AA6D; color: white; } .topnav .icon { display: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } </style> </head> <body> <div class="header"> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p> </div> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#about">About</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> </div> <div style="padding-left:16px"> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> </div> <h3>Sticky Navigation Bar Example</h3> <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p> <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body> </html>
below is the code for "image with sticky navbar but without dropdown menu"
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css"> <style> body { font-size: 20px; } body {margin:0;} ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 16px 20px; text-decoration: none; } li a:hover { background-color: #111; } /*======================================================================*/ body { background-color:white; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #38444d; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1;} .dropdown:hover .dropdown-content { display: block; } footer { text-align: center; padding: 3px; background-color: DarkSalmon; color: white; } </style> </head> <body> <div class="header"> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p> </div> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li class="dropdown"> <a href="javascript:void(1)" class="dropbtn">Dropdown</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> <h3>Sticky Navigation Bar Example</h3> <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p> <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <footer> <p>Author: Hege Refsnes<br> <a href="mailto:hege@example.com">hege@example.com</a></p> </footer> </body> </html>
Please i need some help with this as i am new to html and css.
-
Javascript: Change element class if button has a certain value
<div class="main-div main-div2"> <!-- IF up to date, main-div3 --> <button id="update-btn" class="btn update-btn"> Up to date </button> </div>
I want to make it so if update-btn has a value of "Up to date", change the div class from "main-div main-div2" to "main-div main-div3". Otherwise, if it's any other value, change it to "main-div main-div2"
What kind of loop would be good for this Javascript function too if I want it to be checking constantly?
Thank you.
-
Boostrap vertical sizing with different style width and height
I am trying to set verticaly icon on profile photo card inside div to be in the middle in white box(div), but dont know why it doesnt works. When I use
style="width: 300px; height: 300px;
for div square I can center it on horizontaly, but not verticaly :/ Can someone explain me what I am doing wrong?Anyway is there any way how to resize bootstrap icons except display-1???
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="container-sm offset-md"> <h1 class="p-4 m-4">Nastavení profilu</h1> <div class="row"> <div class="col"> <div class="card p-4 m-4"> Osobní údaje <input type="text" name="name" class="form-control" placeholder="Jméno"> <input type="text" name="surname" class="form-control" placeholder="Příjmení"> <input type="email" name="email" class="form-control" placeholder="E-Mail"> <input type="date" name="name" class="form-control"> </div> </div> <div class="col-4"> <div class="card p-4 m-4 bg-light"> Profilová fotografie <div class=" square text-center border display-1 m-3 bg-white mx-auto"> <i class="bi bi-person-fill align-middle justify-content-center text-secondary"></i> </div> <input type="file" id="customFile" name="file" hidden=""> <div class="text-center"> <button class="btn btn-success" for="customFile">Nahrát</button> <button type="button" class="btn btn-danger">Smazat</button> <p class="text-muted mt-3 mb-0">Poznámka: Minimální velikost 300px x 300px</p> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="card p-4 m-4"> Změna hesla </div> </div> <div class="col"> <div class="card p-4 m-4"> Zobrazit/skrýt podrobnosti </div> </div> </div> </div>
-
Some iphone device not able play audio browser jquery
My jquery audio script perfecly play audio, but some iphone device has no audio playing, can anyone tell me the problem,
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js" integrity="sha512-L6Z/YtIPQ7eU3BProP34WGU5yIRk7tNHk7vaC2dB1Vy1atz6wl9mCkTPPZ2Rn1qPr+vY2mZ9odZLdGYuaBk7dQ==" crossorigin="anonymous"></script> let autoplay = true; let soundID; var sound = new Howl({ src: ['<?php echo base_url(); ?>assets/mp3/<?php echo $nama_musik; ?>'], autoplay: autoplay, loop: true, }); soundID = sound.play();
-
Whenever I try to add email on mysql server. My page is not responding. why?
I am a little bit confused. see the code below.
$('#submit').click(function() { $('#showdata').html($('#senddata').serialize()); /*Print all data that passed from form.*/ $.ajax({ url: "save.php", /* Here data store on mysql server without email and response to welcome.php. */ type: "POST", /* if i want to add proper email format then data store in mysql but not response on welcome.php. */ data: $('#senddata').serialize(), success: function(r) { alert("ok"); $('#senddata').trigger('reset'); window.location = 'welcome.php'; /*This is welcome page*/ } }) })
I want to submit a form using the ajax post method. If I write any name instead of email then data is stored on the server and responding welcome.php. Whenever I write any name email then data is stored on the server but responding welcome.php. Here is 'save.php' code.
<?php include('./config.php'); print_r($_POST); $name=$_POST['name']; $email=mysqli_real_escape_string($con,$_POST['email']); $pwd=$_POST['password']; $vill=$_POST['address'].$_POST['city'].$_POST['state'].$_POST['zip']; $insertdata="INSERT INTO `persons`(`name`,`email`,`pwd`,`vill`)VALUE('$name','$email','$pwd','$vill')"; print_r($insertdata); if(mysqli_query($con,$insertdata)){ echo "data added"; }else{ echo "not added"; } ?>
Note: if I put my button
<button class="btn btn-primary" id="submit">sign up</button>
outside form then everting is right. -
Setting A $_GET Value From A Previously Defined Variable - PHP
I have a search form in the header of every page on a site that submits info to another page when undertaking a search query via the form's
action
attribute, namely a page calledsearch.php
and it takes the value of the search<input>
field and stores it as a variable calledsearchQuery
. Using PHP this searches a MySQL database. All of this works as expected.I would like the value of the search input field to be placed in the URL of the page the search is processed on, again namely
search.php
.I understand from other questions on SO that you can't add variables to a form's
action
attribute. If I add the key of the query string in the action attribute, the form still works OK:action="search.php?keyword="
From this I thought I would be able to then set the
$_GET
value on thesearch.php
page by using:if(isset($_POST['search-submit'])) { // make this variable available before HTML output $searchQuery = htmlspecialchars($_POST['search']); $_GET['keyword'] = $searchQuery; }
This however does not work, although it doesn't throw any errors in my PHP error logs.
Because I'm running the script on specific page allocated by the action attribute, I don't think I need to use a
$_SESSION
variable?HTML Form
Here is the form that is on every page in the header
<form action="search.php?keyword=" method="POST"> <label for="search">Enter Search</label> <input type="search" name="search" id="search"> <button type="submit" name="search-submit" id="search-submit">Search</button> </form>
-
How do I set default alignment for horizontal controls in Bootstrap-UI 3 for CakePHP 4?
This is a particularly obscure question about the Boostrap-UI plugin for CakePHP but I'm hoping someone might be able to help.
I’m using Bootstrap-UI (https://github.com/FriendsOfCake/bootstrap-ui) version 3.0, so using Bootstrap 4.6.
I’m trying to create a form that has controls that are aligned horizontally with their labels using the example from the readme here -
This works fine except I can’t see how to define the default column distribution ie so that the classes for the label and the control container are something like
col-4
andcol-8
without any breakpoint defined.If I try something like -
'align' => [ 'left' => 4, 'middle' => 8, ]
The classes created are
col-md-4
andcol-md-8
ie it seems to default to md as the breakpoint for the columns.I know this is a bit obscure but does anyone have any idea how to do what I want?
-
SwiftUI, apply drawGesture only when over Image
I'm try to apply the gesture only when the user is over the Image display not when tapped outside the image.
Any suggestion how I can do? this following code draw also when user tap outside the image.
struct ContentView: View { @StateObject var am = AppManager() @State var switchToTakePicture = false @State var paths: [PathContainer] = [] @State var currentDraggingId = UUID() @State var spikoPic = #imageLiteral(resourceName: "spiko-16.jpeg") @State var centerOFimage = CGSize(width: 0, height: 0) var body: some View { GeometryReader { proxy in ZStack { Image(uiImage: spikoPic) .resizable() .scaledToFit() .position(x: proxy.size.width/2, y: proxy.size.height/2) .background(GeometryReader { Color.clear.preference(key: ViewRectKey.self, value: [$0.frame(in: .global)]) }) .gesture(drawGesture) // not correct ForEach(paths) { container in // draw and set the foreground color of the paths to red container.path .stroke(Color.red, lineWidth: 4) } } .onPreferenceChange(ViewRectKey.self) { rects in print(rects.first ?? .zero) } } } var drawGesture: some Gesture { DragGesture(minimumDistance: 0) .onChanged { value in // The point that the gesture started from let start = value.startLocation // The point that the gesture ended to let end = value.location // the properties of the rectangle to be drawn let rectangle: CGRect = .init(origin: end, size: .init(width: start.x - end.x, height: start.y - end.y)) // create a path for the rectangle let path: Path = .init { path in path.addRect(rectangle) } print("rettangolo = \(rectangle) orig \(rectangle.origin) - height \(rectangle.height) width = \(rectangle.width)") // remove the previous rectangle that was drawen in current // process of drawing paths.removeAll { $0.id == currentDraggingId } // append the new rectangle paths.append(.init(id: currentDraggingId, path: path)) } .onEnded { _ in // renew the dragging id so the app know that the next // drag gesture is drawing a completely new rectangle, // and is not continuing the drawing of the last rectangle currentDraggingId = .init() } } }
i want no box outside
-
Image Background Remover Using Python
I want to make Image Background Remover Using Python But I do not know how much data It will take and time to reach the accuracy of remove.bg I'm using U-2-Net Ai models https://github.com/xuebinqin/U-2-Net/ Some results are same but not every result is as good enough as remove.bg In a rating I would tell my app as 2/5 and remove.bg as 4/5 Please tell me How can I achieve accuracy like remove.bg Any help or suggestions are appreciated. Thanks