If I hover the mouse out of the login button, the dropdown menu appears, I want it to appear only if I hover the mouse on the button, how can I do?
Also, how can I position the login button on the far right?
you have added the hover on the .dropdown div which has the form, login button and other elements. So whenever you hover on the .dropdown div you will see the dropdown menu.
If you want the dropdown menu to be shown only when the user hovers on the login menu then you need to add the :hover on login button. Or you can control the same by adding the JavaScript mouseover listener on login button.
I hope you find the below code helpful.
<div class="dropdown">
<button>Admin</button>
<form action="UserProfile">
<input type="submit" value="Profilo">
</form>
<form action="Logout">
<input type="submit" value="Logout">
</form>
<span>
<button class="logInButton" onclick="openForm()">Login</button>
<div id="form-block" class="form-popup">
<form id="signin-form" class="form-container" name="signInForm" action="SignIn" method="post">
<span id="validEmail"></span>
<ul style="list-style: none;">
<li><label for="email">Email</label></li>
<li><input id="email" class="form-field" type="text" name="email"></li>
<span id="validPassword"></span>
<li><label for="password">Password</label></li>
<li><input id="password" class="form-field" type="password" name="password"></li>
<li><button type="submit" class="btn" onclick="return validateForm(signInForm)">Accedi</button></li>
<li><button type="submit" class="btn" formaction="SignUp" formnovalidate onclick="clearForm()">Registrati</button></li>
<li><button type="button" class="btn-cancel" onclick="closeForm()">Back</button></li>
</ul>
</form>
</div>
</div>
function openForm() {document.getElementById("form-block").style.display = "block";}
function closeForm() {document.getElementById("form-block").style.display = "none" ;}
function clearForm() {
var form = document.forms["signin-form"];
form.email.value = null;
form.password.value = null;
}
.logInButton {
background-color: #345059;
margin: 10px 0px 0px 0px;
color: white;
font-size: 16px;
padding: 16px;
border: none;
overflow: hidden;
position: relative;
float: right;
}
.form-popup {
display: none;
position: absolute;
background-color: #f2fcff;
}
.form-popup a {
color: black;
padding: 0;
text-decoration: none;
}
.logInButton:hover ~ .form-popup {
display: block;
}
.logInButton:hover {background-color: #2e3538;}
<div class="dropdown">
<button>Admin</button>
<form action="UserProfile">
<input type="submit" value="Profilo">
</form>
<form action="Logout">
<input type="submit" value="Logout">
</form>
<span>
<button class="logInButton" onclick="openForm()">Login</button>
<div id="form-block" class="form-popup">
<form id="signin-form" class="form-container" name="signInForm" action="SignIn" method="post">
<span id="validEmail"></span>
<ul style="list-style: none;">
<li><label for="email">Email</label></li>
<li><input id="email" class="form-field" type="text" name="email"></li>
<span id="validPassword"></span>
<li><label for="password">Password</label></li>
<li><input id="password" class="form-field" type="password" name="password"></li>
<li><button type="submit" class="btn" onclick="return validateForm(signInForm)">Accedi</button></li>
<li><button type="submit" class="btn" formaction="SignUp" formnovalidate onclick="clearForm()">Registrati</button></li>
<li><button type="button" class="btn-cancel" onclick="closeForm()">Back</button></li>
</ul>
</form>
</div>
</div>
Related
I'm using toggle() but it's not working. My script is in the footer:
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").toggle();
});
});
or I've also tried addClass():
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
Basically I'm just trying to toggle between showing and hiding the form divs.
When product-suggestion-form-container is clicked on, form-div-top should show.
When contact-us-form-container is clicked on, form-div-bottom should show.
Then they should hide when those divs are clicked on again.
Shouldn't clicking on product-suggestion-form-container cause form-div-top to become active and therefore to display: flex? Not sure why nothing's happening.
I was just getting the jQuery from here, but ideally I'd like to add a smooth transition and whatever other best practices you might suggest for doing this.
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
.form-div-outer {
margin: 10px 0;
}
.form-div-top,
.form-div-bottom {
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
/*initial display*/
.form-div-inner-top {
display: none;
}
.form-div-inner-bottom {
display: none;
}
.form-div-inner-top:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-div-inner-bottom:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-input {
margin: 10px 0;
padding: 5px;
border: none;
background-color: #ffffff;
width: 100%;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
<div class="form-div-outer">
<div class="contact-us-form-container">
<span class="form-title">Contact Us Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-bottom">
<form class="form-div-inner-bottom">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group input-group-contact-reason">
<div class="contact-reason-container">
<ul class="radiolist">
<li>
<input class="radio" type="radio"><label>Order question</label>
<input class="radio" type="radio"><label>Website feedback</label>
<input class="radio" type="radio"><label>Trouble finding product</label>
</li>
</ul>
</div>
</span>
</form>
</div>
</div>
It seems you have forgot .s in your code to access the data.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle();
});
});
The submit button is refreshing the page, which leads to showing elements, I don't want to be shown.
I tried having a preventDefault() function but then it wouldn't submit the form.
I tried it without but if I do so, the form would submit but the elements are still shown.
$(".signupbtn").click(function(e){
console.log("Sign up clicked");
document.getElementsByClassName("huhu")[0].style.display = "none";
document.getElementsByClassName("afterForm")[0].style.display = "block";
e.preventDefault();
console.log("Succes")
});
<!-- the output from the form -->
<div class="afterForm" >
<h3 id="output"/>
</div>
<!-- the submiting -->
<form class="modal-content" id="myForm" onsubmit="readForm()">
<div class="container">
<h1 >Order</h1>
<p>Please fill in this form to receive your meal. Required fields: *</p>
<hr>
<label for="email"><b>Email*</b></label>
<input type="text" placeholder="zyxzyx#domain.com" name="email" value="" required>
<label for="adr1"><b>Adress* (Housenumber, Street, City)</b></label>
<input type="text" placeholder="555, Zxy blvd, San zxy" name="adr1" value="" required>
<label for="adr2"><b>Adress* (ZIP, State)</b></label>
<input type="text" placeholder="00000, ZY" name="adr2" value="" required>
<p>By pressing "Order" you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn" >Order</button>
</div>
</div>
</form>
<!-- the ordering -->
<div class="huhu">
<h1 class="ord">Select your order:</h1>
<input onclick="firstIcon()" id="fIcon" type="image" src="https://dl.dropboxusercontent.com/s/kw6l23hm37kzqq8/sushi.png" />
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;vertical-align:middle" class="button">
<span>Next Step </span>
</button>
</div>
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
.signupbtn {
float: left;
width: 50%;
}
I except the class "huhu" to vanish and the class "afterForm" to show after the order button is clicked. If don't fill in the form, click Order and then cancel, the elements hide but don't show.
Is there an other solution than preventDefault() or is the solution easier than I thought?
I have a bunch of forms and to toggle between those forms works just fine. However I think I did my steps backwards.
Ideally, I only want to see my 'generating customer calculations' <a> tag on page load. When I click on it I want to then see the 'calculators' link beneath the first one, and then when I click on that, that's when I want see all form titles.
I am not sure if I need to rearrange my HTML in terms of how my <ul> elements are ordered or what. I have hit a bit of a wall.
$(".calc-nav li a").on("click", function() {
toggleForms($(this).data("id"));
});
$(".calc-nav li:first a").click();
$(".calcs1").hide();
function toggleForms(id) {
$(".forms form").hide();
$(".forms #" + id).show();
}
/* form {
margin-left: 10px;
}
ul {
padding-left: 0;
}
.calc {
background-color: rgb(246, 246, 246);
color: black;
padding: 10px 0px 10px 10px;
border-bottom: 1px solid #dedede;
text-align: left;
font-size: 15px;
line-height: 24px;
cursor: pointer;
list-style-type: none;
margin-bottom: -.1px;
}
.link {
display: block;
color: black;
}
.focus {
color: #005aaa;
}
.title {
background-color: rgb(0, 90, 170);
color: rgb(255, 255, 255);
font-size: 22px;
font-weight: 600;
line-height: 26px;
padding: 10px 0px 10px 10px;
margin-bottom: 0px;
}
.calculatorList {
color: rgb(255, 255, 255);
font-size: 22px;
font-weight: 600;
line-height: 26px;
padding: 10px 0px 10px 10px;
list-style-type: none;
cursor: pointer;
}
p {
padding-top: 10px;
margin-bottom: 0px;
} */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-4">
<ul class="calculatorList">
<li>
<a class="link">Generating Customer Caclulations</a>
</li>
</ul>
<ul>
<li>
<a class="link" data-id="cacls1">Calculators</a>
</li>
</ul>
<ul class="calc-nav">
<li class="calc">
<a class="link" data-id="form1">Lifetime Value Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form2">Breakeven Analysis</a>
</li>
<li class="calc">
<a class="link" data-id="form3">Total Audience Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form4">Number of Offers Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form5">Margin Calculator</a>
</li>
</ul>
</div>
<div class="col-md-8 forms">
<form id="form1">
<h3>Lifetime Value Calculator</h3>
<p>Calculator which determines the lifetime value of a customer</p>
<p>The average dollar amount of a client's reorder: </p>
<input value="" type="text" class='num1' placeholder="$50.00" />
<p> How many times per year does an average client buy from you? </p>
<input value="" type="text" class='num2' placeholder="12" />
<p> On average, how many years does a client continue doing business with you? </p>
<input value="" type="text" class='num3' placeholder="6" />
<p>Customer Lifetime Value: </p>
<input value="" type="text" class='total' placeholder="$3000.00" readonly/>
</form>
<form id="form2">
<h3>Breakeven Analysis Calculator</h3>
<p> Calculator which determines your breakeven analysis</p>
<p> Customer Lifetime Value: </p>
<input value="" type="text" class='num1' placeholder="$3000.00" />
<p> Gross Margin Percentage: </p>
<input value="" type="text" class='num2' placeholder="60.00%" />
<p> Marin Per Customer: </p>
<input value="" type="text" class='total1' placeholder="$1800.00" readonly/>
<p> Monthly Advertising Spend: </p>
<input value="" type="text" class='num3' placeholder="$2000.00" />
<p> Number of Customers to breakeven:
<p>
<input value="" type="text" class='total2' placeholder="1.11" readonly/>
</form>
<form id="form3">
<h3>Total Audience Calculator</h3>
<p>Calculator which determines your total audience</p>
<p> Number of residence mailed: </p>
<input value="" type="text" class='num1' placeholder="50,000" />
<p> Average Number of people per residence: </p>
<input value="" type="text" class='num2' placeholder="4.25" />
<p> Total potential audience </p>
<input value="" type="text" class='total' placeholder="212,500" readonly/>
</form>
<form id="form4">
<h3>Number of Offers</h3>
<p>Calculator which determines your total number of offers</p>
<p>Number of residence mailed: </p>
<input value="" type="text" class='num1' placeholder="50,000" />
<p> Number of Coupons: </p>
<input value="" type="text" class='num2' placeholder="6" />
<p> Total number of coupons </p>
<input value="" type="text" class='total' placeholder="300,000" readonly/>
</form>
<form id="form5">
<h3>Margin Calculator</h3>
<p>Calculator which determines your margins</p>
<p>Revenue: </p>
<input value="" type="text" class='num1' placeholder="$3000.00" />
<p> Cost of Goods Sold: </p>
<input value="" type="text" class='num2' placeholder="$2250.00" />
<p> Margin: </p>
<input value="" type="text" class='total1' readonly placeholder="750.00" readonly/>
<p> Margin Percentage: </p>
<input value="" type="text" class='total2' readonly placeholder="25%.00" readonly/>
</form>
</div>
</div>
To save space I have put this in a fiddle: https://jsfiddle.net/so4y0nb2/15/
I've updated the jsFiddle based on your comment.
This time I took a lot more liberty with what you had and tried to put it together a way I might approach it. It's far from perfect and leaves a lot to be desired, but it should be of some help.
HTML:
<div class="row">
<div class="col-md-4">
<!-- I removed the <ul> and instead created a standalone <a>, I wasn't sure what purpose have everything in a <ul> served -->
Generating Customer Caclulations
<!-- Same container for calculators but I changed the <p> Calculators into an <a> -->
<div id="calc-nav-container">
Calculators
<ul id="calc-nav" class="calculatorList">
<li class="calc">
<a class="link" data-id="form1">Lifetime Value Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form2">Breakeven Analysis</a>
</li>
<li class="calc">
<a class="link" data-id="form3">Total Audience Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form4">Number of Offers Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form5">Margin Calculator</a>
</li>
</ul>
</div>
</div>
<!-- the forms start here... -->
</div>
CSS:
#calc-nav-container,
#forms,
#forms form,
#calc-nav {
display: none;
}
#calc-nav-container.open,
#forms.open,
#forms form.open,
#calc-nav.open {
display: block;
}
jQuery:
$(document).ready(function(){
// Instead of hiding elements on document ready, I set the them to display none in CSS
// Prevent default behavior of anchors with #
$("a[href='#']").on('click', function(e){
e.preventDefault();
})
})
// When 'Generating Customer Calculations' is clicked
$('#gen-cust-calc').on('click', function(){
// Show both the calculator container and the first button
$('#calc-nav-container, #calc-button').toggleClass('open');
});
// When 'Calculators' is clicked
$('#calc-button').on('click', function(){
$('#calc-nav, #forms').toggleClass('open');
});
// Handle click for calculators
$("#calc-nav li a").on("click", function() {
toggleForms($(this).data("id"));
});
// I like to use classes instead of the .show() or .hide() methods because I don't like the inline styles they add
function toggleForms(id) {
// Remove any open class
$('#forms form').removeClass('open');
// Toggle open on the clicked form
$('#' + id).toggleClass('open');
}
Here's my website: http://library.bennington.edu. We use domtabs to organize our search boxes. We're switching cataloging software, so I'm trying to replace the catalog search box with a new search box from Ebsco Discovery Services (EDS). EDS provides their own code, so I didn't have to write anything, should just be cut and paste. But when I drop the new code in, nothing appears at all, just a total blank space. If I place the code BELOW the domtabs box, it works fine. It just blanks when placed within the domtabs box, as if there's some conflict. Here's the relevant DomTab code section:
<div class="domtab">
<ul class="domtabs">
<li><a style="border-top-left-radius:9px" href="#catalog">Catalog</a></li>
<li>Journals</li>
<li>Databases</li>
<li>Reserves</li>
<li>Reference</li>
<li><a style="border-top-right-radius:9px" href="#archive">Archive</a></li>
</ul>
<div>
<h2><a name="#catalog" id="catalog"></a></h2>
<table width="425px">
<tr>
<td valign="top" width="70%">
<!--Insert new code here-->
<!--Code Ends here-->
<span>Search the library's holdings for books, ebooks, movies, music recordings, and more.</span>
<form action="http://library.bennington.edu/search/Y" method="get" style="display:block; padding: 2px 0px; margin: 0;">
<input style="border-radius:3px" type="text" name="SEARCH" size="35" value="" />
<input type="hidden" name="SORT" value="A" />
<script language="javascript">
function iiiDoSubmit_1() {
var name = "iiiFormHandle_1";
if (document.getElementById)
obj = document.getElementById(name);
else if (document.all)
obj = document.all[name];
else if (document.layers)
obj = document.layers[name];
obj.form.submit();
}
</script>
<input type="hidden" id="iiiFormHandle_1"/>
<a href=# onclick="iiiDoSubmit_1();">
<input style="border-radius:3px; width:50px; margin-top:3px; padding:2px; font-size:11px" value="Search" type="Submit" />
</a>
</form>
</td>
<td valign="top" align="right">
<span class="roundedContentInfo">
<span style="font-size:130%; border-bottom:1px solid #000; text-align:left;"><b>Other Searches</b></span>
<span>Advanced </span>
<span>Title </span>
<span>Author </span>
<span>Author & Title </span>
</span>
</td>
</tr>
</table>
</div>
And here's the code that should be dropped in:
<script src="http://support.ebscohost.com/eit/scripts/ebscohostsearch.js" type="text/javascript"></script>
<style type="text/css">
.choose-db-list{ list-style-type:none;padding:0;margin:10px 0 0 0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt;width:340px; }
.choose-db-check{ width:20px;float:left;padding-left:5px;padding-top:5px; }
.choose-db-detail{ margin-left:30px;border-left:solid 1px #E7E7E7;padding:5px 11px 7px 11px;line-height:1.4em; }
.summary { background-color:#1D5DA7;color:#FFFFFF;border:solid 1px #1D5DA7; }
.one { background-color: #FFFFFF;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.two { background-color: #F5F5F5;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.selected { background-color: #E0EFF7;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
#ebscohostCustomSearchBox #disciplineBlock { width:auto; }
#ebscohostCustomSearchBox .limiter { float:left;margin:0;padding:0;width:50%; }
#ebscohostsearchtext { width: 144px; }
#ebscohostsearchtext.edspub { width: 245px; }
.ebscohost-search-button.edspub {
border: 1px solid #156619;
padding: 5px 10px !important;
border-radius: 3px;
color: #fff;
font-weight: bold;
background-color: #156619;
}
.ebscohost-title.edspub {
color: #1c7020;
font-weight: bold;
}
</style>
<form id="ebscohostCustomSearchBox" action="" onsubmit="return ebscoHostSearchGo(this);" method="post" style="width:340px; overflow:auto;">
<input id="ebscohostwindow" name="ebscohostwindow" type="hidden" value="1" />
<input id="ebscohosturl" name="ebscohosturl" type="hidden" value="http://0-search.ebscohost.com.library.bennington.edu/login.aspx?direct=true&site=eds-live&scope=site&type=0&mode=bool&lang=en&authtype=cookie,ip" />
<input id="ebscohostsearchsrc" name="ebscohostsearchsrc" type="hidden" value="db" />
<input id="ebscohostsearchmode" name="ebscohostsearchmode" type="hidden" value="+" />
<input id="ebscohostkeywords" name="ebscohostkeywords" type="hidden" value="" />
<div style="background-image:url('http://support.ebscohost.com/images/logos/eds100.gif'); background-repeat:no-repeat; height:50px; width:340px; font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt; color:#353535;">
<div style="padding-top:5px;padding-left:115px;">
<span class="ebscohost-title " style="font-weight:bold;">Research databases</span>
<div>
<input id="ebscohostsearchtext" class="" name="ebscohostsearchtext" type="text" size="23" style="font-size:9pt;padding-left:5px;margin-left:0px;" />
<input type="submit" value="Search" class="ebscohost-search-button " style="font-size:9pt;padding-left:5px;" />
<div id="guidedFieldSelectors">
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_0" value="" checked="checked" />
<label class="label" for="guidedField_0"> Keyword</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_1" value="TI" />
<label class="label" for="guidedField_1"> Title</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_2" value="AU" />
<label class="label" for="guidedField_2"> Author</label>
</div>
</div>
</div>
</div>
<div id="limiterblock" style="margin-left:-px; overflow: auto; ">
<div id="limitertitle" style="font-weight:bold;padding-top:25px;padding-bottom:5px;">Limit Your Results</div>
<div class="limiter" >
<input type="checkbox" id="chkFullText" name="chkFullText" checked="checked" />
<label for="chkFullText">Full Text</label>
</div>
<div class="limiter" >
<input type="checkbox" id="chkLibraryCollection" name="chkLibraryCollection" />
<label for="chkLibraryCollection">Available in Library Collection</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkPeerReviewed" name="chkPeerReviewed" />
<label for="chkPeerReviewed">Peer Reviewed</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkCatalogOnly" name="chkCatalogOnly" />
<label for="chkCatalogOnly">Catalog Only</label>
</div>
</div>
</form>
I've moved the javascript call to the top of the page, and moved the CSS to my CSS page to thin out the code, but still just getting the domtab box with normal background color as if nothing is there. :-/
I need to replace the original input type="file" with a <button> with bootstrap style. The idea is hide it with jquery hide() at the first place. And then trigger it with a button.
Things works well when there's only one button. But whenever another button is added. The select dialogue keep displaying according to the number of file input.
I need each button to select it's input-file. So I give it a unique id with wildcard selectors. And it still not work. Here's the code.
HTML
<form method="get" action="">File Upload 1.
<input type="hidden" name="sid" value="1" />
<input type="file" name="file1" id="file1" />
<button type="button" id="browse1" class="btn btn-primary"> <i class="glyphicon glyphicon-upload"></i> Upload</button>
</form>
<hr />
<form method="get" action="">File Upload 2.
<input type="hidden" name="sid" value="1" />
<input type="file" name="file2" id="file2" />
<button type="button" id="browse2" class="btn btn-primary"> <i class="glyphicon glyphicon-upload"></i> Upload</button>
</form>
<hr />
<form method="get" action="">File Upload 3.
<input type="hidden" name="sid" value="3" />
<input type="file" name="file3" id="file3" />
<button type="button" id="browse3" class="btn btn-primary"> <i class="glyphicon glyphicon-upload"></i> Upload</button>
</form>
<hr />
Javascript
$(document).ready(function () {
$('input[id^=file]').hide();
$('button[id^=browse]').click(function () {
$('input[id^=file]').click();
})
});
DEMO HERE : http://jsfiddle.net/nobuts/txvq7hxv/4/
Please help me out! :(
You better not use id's if you want more then one!
Try this out http://jsfiddle.net/txvq7hxv/6/
Attention: it's a quick hack, not for reuse.
JavaScript
$(document).ready(function () {
$('input[id^=file]').hide();
$('.browse').click(function () {
console.log(this);
$(this).closest('form').find('input[id^=file]').click();
})
});
HTML
<form method="get" action="">File Upload 1.
<input type="hidden" name="sid" value="1" />
<input type="file" name="file1" id="file1" />
<button type="button" id="browse" class="btn btn-primary browse"> <i class="glyphicon glyphicon-upload"></i> Upload</button>
</form>
<hr />
<form method="get" action="">File Upload 2.
<input type="hidden" name="sid" value="1" />
<input type="file" name="file2" id="file2" />
<button type="button" id="browse" class="btn btn-primary browse"> <i class="glyphicon glyphicon-upload"></i> Upload</button>
</form>
<hr />
<form method="get" action="">File Upload 3.
<input type="hidden" name="sid" value="3" />
<input type="file" name="file3" id="file3" />
<button type="button" id="browse" class="btn btn-primary browse"> <i class="glyphicon glyphicon-upload"></i> Upload</button>
</form>
<hr />
Just try this:
$(document).ready(function () {
$('input[id^=file]').hide();
$('.btn.btn-primary').click(function () {
$(this).prev('input').click();
})
});
Working fiddle: http://jsfiddle.net/robertrozas/cj3fp3dm/1/
$(document).ready(function () {
$('input[id^=file]').hide();
$('.btn').on("click", function () {
$(this).parent('form').find('input[id^=file]').click();
});
});
This JavaScript should work, try it...
http://jsfiddle.net/txvq7hxv/19/
OK, this answer may be slightly offtopic, but it is about the approach. Here's what most of the jQuery Plugins which handle/replace the upload button are doing.
Barebone example..
HTML:-
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<i class="glyphicon glyphicon-file fileupload-exists"></i>
</div>
<span class="btn btn-default btn-file">
<span class="fileupload-new">Select Logo Image</span>
<!--<input type="file" />-->
<input type="file" name="uploadfile" value="" id="filePhoto">
</span>
</div>
</div>
CSS:-
.btn-file>input {
width: 100%;
height: 100%;
padding: 0px;
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
font-size: 23px;
direction: ltr;
cursor: pointer;
}
.fileupload .btn {
vertical-align: middle;
line-height: 21px;
margin-left: -5px;
}
.btn-file {
position: relative;
vertical-align: middle;
}
.btn-default {
background: #e4e7ea;
color: #636e7b;
}
Working Demo: JSFIDDLE.
If you need to further enhance the buttons' features here's the plugin that is doing exactly what you need, maybe not reinventing the wheel would speed up your workflow, if you are learning then you should keep experimenting and also keep the already finished product for a reference.
Assuming that each file input tag is in its own form tag, as your example is structured, you could use the closest() function to get the form and then use that as context to find the file input tag. This means that the structure within the form tag doesn't have to keep the file input just before the button tag, as is required with prev() function, and doesn't nail you down to having the button as a specific depth from the form tag, as is required with the parent() function. Also, the pure HTML/CSS solution from Mohd would be my suggested approach.
$(document).ready(function () {
$('input[id^=file]').hide();
$('button[id^=browse]').click(function () {
console.log("<button> clicked:" + $(this).attr("id"));
console.log("Closest <form>:" + $(this).closest("form").attr("id"));
console.log("File <input> from <form>:" + $(this).closest("form").find('input[id^=file]').attr("id"));
$(this).closest("form").find('input[id^=file]').click();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="get" action="" id="form1">File Upload 1.
<input type="hidden" name="sid" value="1" />
<input type="file" name="file1" id="file1" />
<button type="button" id="browse1" class="btn btn-primary"> <i class="glyphicon glyphicon-upload"></i> Upload</button>
</form>
<hr />
<form method="get" action="" id="form2">File Upload 2.
<input type="hidden" name="sid" value="1" />
<input type="file" name="file2" id="file2" />
<button type="button" id="browse2" class="btn btn-primary"> <i class="glyphicon glyphicon-upload"></i> Upload</button>
</form>
<hr />
<form method="get" action="" id="form3">File Upload 3.
<input type="hidden" name="sid" value="3" />
<input type="file" name="file3" id="file3" />
<button type="button" id="browse3" class="btn btn-primary"> <i class="glyphicon glyphicon-upload"></i> Upload</button>
</form>
<hr />
I don't know why everybody is using JavaScript for this simple task.
Just make use of the HTML <label> Element without any JavaScript like so:
<label>
<span class="btn btn-primary">Button Text</span>
<input type="file" name="photo" style="display:none">
</label>
When i tried your jsfiddle I clicked on 1 button and I had 3 file browser pop-up so your button are triggering evrey file input. Try this instead :
$(document).ready(function () {
$('input[id^=file]').hide();
$('button[id^=browse]').click(function () {
$(this).prev('input[type=file]').click();
})
});
You could use the prev() function to get the file input.
//$(document).ready(functionhz
$(document).ready(function () {
$('input[id^=file]').hide();
$('a[id^=browse]').click(function () {
$(this).prev('input[type=file]').click();
})
});
div.content div.btns_wrapper div.item {
width: 33%;
display: inline-block;
text-align: center;
}
#media screen and (max-width: 1171px) {
/* line 179, -RtixBalkanStudioXConvert */
div.content div.btns_wrapper div.item.index {
display: none;
}
}
/* line 185, -RtixBalkanStudioXConvert */
div.content div.btns_wrapper div.item.first {
text-align: left;
}
/* line 188, -RtixBalkanStudioXConvert */
div.content div.btns_wrapper div.item.last {
text-align: right;
}
/* line 193, -RtixBalkanStudioXConvert */
div.content div.textarea_wrapper {
margin-top: 15px;
margin-bottom: 165px;
}
<script src="https://www.phpclasses.org/browse/download/1/file/52742/name/jquery-1.11.1.min.js"></script>
<div class="item index">
<input type="hidden" name="sid" value="1" />
<input type="file" name="file1" id="file1" />
<i class="glyphicon glyphicon-upload"><img src="https://image.ibb.co/ixV1pn/btn_reset.jpg" alt="">
</div>