I have the following HTML Structure
<div style="float: left; padding-top: 10px;">
<a id="changeProfilePicture" class="linkOne" style="font-family: 'Ubuntu', sans-serif; color: #FA5882;" href="javascript:void">Change Profile Picture</a>
</div>
<div style="clear: both;"></div>
<div style="display: none;" id="changeProfile">
<div id="fSpace"></div>
<form id="upload_form" enctype="multipart/form-data" method="post">
<button id="openOpen">Select File</button>
<input type="file" name="file1" id="file1"><br>
<input type="button" value="Upload File" onclick="uploadFile()">
<div id="fSpace"></div>
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<div id="fSpace"></div>
<div id="status"></div>
</form>
</div>
So when I click on the div changeProfilePicture the div changeProfile slides down. I also have another jQuery function to click the file1 div when click the button openOpen, But when I click that button the function to toggle the changeProfile div occurs. My Jquery as follows
$(document).ready(function(){
$("#changeProfilePicture").click(function(){
$("#changeProfile").slideToggle("slow");
});
$("#openOpen").click(function(){
$("#file1").click();
});
});
JSFiddle
http://jsfiddle.net/L7dLN/1/
Any idea how to overcome this ? Thanks in advance.
Actually, you need just this:
$("#openOpen").click(function(event){
event.preventDefault();
$("#file1").click();
});
Default action/behavior for button in form is submit, that was problem... More: what's the standard behavior when < button > tag click? will it submit the form?
Related
I have used the Thymeleaf foreach to traverse all posts where each post has a "Comment" button. I would like to display the comment list after click this "Comment" button.
The default is hidden
The following is my codes:
<div th:each="post:${posts}">
<div class="panel panel-default" th:object="${post}">
<div class="panel-body">
<p th:text="*{user.username}">username</p>
<p th:text="*{createTime}">time</p>
<p th:text="*{content}">content</p>
<div>
<form th:action="#{/posts/liked/input}" method="post"
style="display: inline">
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">like</button>
</form>
<button class="btn btn-primary commentBt"
style="display: inline">Comment</button>
</div>
</div>
<!-- This is the part I want to show after click Comment -->
<div style="display: none">
<form th:action="#{/posts/comment/input}" method="post">
<textarea class="form-control" name="content" id="contentId"
rows="1"></textarea>
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">Reply</button>
</form>
<div th:each="comment:*{comments}">
<div th:object="${comment}">
<p th:text="*{content}">content</p>
</div>
</div>
</div>
</div>
</div>
How to do this in the foreach loop?
You can do this by using js, below are example codes.
First, you need to add onclick to commit button:
<button class="btn btn-primary commentBt"
style="display: inline" onclick="showDiv()">Comment</button>
Then, get the hidden div and edit function showDiv to dispaly the div.
<!-- set id -->
<div id="test" style="display: none">
<script>
<!-- function to change display to block -->
function showDiv(){
var div = document.getElementById("test");
div.style.display="block";
}
</script>
Hope this will help you!
I am creating search form, when user click search icon, i need to show textbox, once i entered content, and again clicked same search icon, it needs to display search results. Below is the code i used.
HTML & Javascript
<div class="search_right">
<div class="search-top-container">
<div class="search-top"></div>
<div class="search-form">
<div class="search-form-border"></div>
<div class="search-top-title"><span class="icon"></span>Search</div>
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
<div class="form-search">
<input id="search" type="text" name="q" value="" class="input-text" style="display:none;" autocomplete="off">
<button type="submit" title="Search" id="but" onclick="tog_input();" >
</button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
function tog_input(){
if(jQuery("#search").is(':visible'))
{
if(jQuery("#search").val()!=''){ jQuery("#search_mini_form").submit();
}else{
jQuery("#search").animate({ width: 'hide' });
}
}
else
{
jQuery("#search").animate({ width: 'show' });
}
}
</script>
</form>
</div>
<div class="clear"></div>
</div>
Right now issue is, when i clicked search icon, it showing search page instead of textbox, any assistance would be appreciated.
Change the inline code from:
<button type="submit" title="Search" id="but" onclick="tog_input();">Submit</button>
To:
<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit</button>
Avoid this line:
jQuery("#search_mini_form").submit();
Prevent the form submission only when needed.
So:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="search_right">
<div class="search-top-container">
<div class="search-top"></div>
<div class="search-form">
<div class="search-form-border"></div>
<div class="search-top-title"><span class="icon"></span>Search</div>
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
<div class="form-search">
<input id="search" type="text" name="q" value="" class="input-text" style="display:none;"
autocomplete="off">
<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit
</button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
function tog_input(obj, e) {
if (jQuery("#search").is(':visible')) {
if (jQuery("#search").val() == '') {
jQuery("#search").animate({width: 'hide'});
e.preventDefault();
}
}
else {
e.preventDefault();
jQuery("#search").animate({width: 'show'});
}
}
</script>
</form>
</div>
<div class="clear"></div>
</div>
</div>
I'd suggest that it is because your button type is submit. If you change it to button type = "button" then it should work, although you may need another button to submit your form.
You need to prevent default behaviour of submit button else it will end up in action page. To achieve it you need to do as -
function tog_input(e){
e.preventDefault();// prevents default action
... other code
}
<form id="search" action="#" method="post" style="float: left">
<div id="input" style="float: left; margin-left: 10px;" >
<input type="text" name="search-terms" id="search-terms" placeholder="Search websites and categories..." style="width: 300px;">
</div>
<div id="label" style="float: left; margin-right: 10px;">
<button type="submit" onclick="searchbox()" for="search-terms" id="search-label" class="glyphicon glyphicon-search"></button>
</div>
</form>
When the user clicks on div id label, I want to toggle the display property of div input. which is working fine. I have used following code to implement the functionality.
function searchbox(){
if ($("#input").css('display') == 'none') {
$('#input').css('display','block');
} else {
$('#input').css('display','none');
}
}
I want to to submit the form data via POST but that functionality is not working, neither by pressing enter key nor when submit button is clicked.
Please help me with this.
Try submitting through JS
HTML
<form id="search" action="#" method="post">
<div id="input" style="float: left; margin-left: 10px;" >
<input type="text" name="search-terms" id="search-terms" placeholder="Search websites and categories..." style="width: 300px;">
</div>
<div id="label" style="float: left; margin-right: 10px;">
<button type="submit" for="search-terms" id="search-label" class="glyphicon glyphicon-search">click</button>
</div>
</form>
JS
$(".glyphicon").click(function(e){
e.preventDefault();
if ($("#input").css('display') == 'none') {
$('#input').css('display','block');
} else {
$('#input').css('display','none');
}
$( "#search" ).submit();
});
you have to use <input type=submit> for submitting
I'm having problems simulating a click via javascript on a mailchimp pop-up subscribe form and i need your help.
<!-- Title & Description - Holds HTML from CK editor -->
<div class="content__titleDescription" data-dojo-attach-point="descriptionContainer"><strong>Unlock the content </strong>by subscribing to our page.</div>
<!-- Form Fields -->
<form action="//mc.us7.list-manage.com/subscribe/form-post?u=bcd9828fa83ea7a231ffbee26&id=1928481ac4" accept-charset="UTF-8" method="post" enctype="multipart/form-data" data-dojo-attach-point="formNode" novalidate="">
<div class="content__formFields" data-dojo-attach-point="formFieldsContainer">
<div class="field-wrapper" id="uniqName_3_0" widgetid="uniqName_3_0">
<label for="mc-EMAIL">Email Address</label>
<input type="text" name="EMAIL" value="" id="mc-EMAIL" class="invalid">
<div class="invalid-error" style="display: block;">This field is required.</div>
</div>
<div class="field-wrapper" id="uniqName_3_1" widgetid="uniqName_3_1">
<label for="mc-FNAME">First Name</label>
<input type="text" name="FNAME" value="" id="mc-FNAME" class="valid">
<div class="invalid-error" style="display: none;"></div>
</div>
<div style="position:absolute;left:-5000px;">
<input type="text" name="b_bcd9828fa83ea7a231ffbee26_1928481ac4" tabindex="-1" value="">
</div>
</div>
<div class="content__button">
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
</div>
</form>
<!-- Footer - Holds HTML from CK editor -->
<div class="content__footer" data-dojo-attach-point="footerContainer"></div>
</div>
<div class="modalContent__image" data-dojo-attach-point="formImageContainer"></div>
The code that i'm trying to target is:
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
It's the submit button "Subscribe" that you can also see in
http://www.aspeagro.com/EN_Program_Abricot.html
Thank you!
How about this? I think is should do what you're after?
HTML
<input id="submit-button" class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
JS
$('#submit-button').on('click', function(e){
e.preventDefault();
// Do what you want to do
});
set id="btn" attribute to your submitting button and using jQuery you can trigger click with $("#btn").click(); call
If your aim is to submit the form, then don't bother sending a click event, but use the form's submit method:
var form = document.getElementById('uniqName_3_0').parentNode.parentNode;
form.submit();
The code is of course easier if you give the form an id attribute:
<form id="myform" ...
and then:
document.getElementById('myform').submit();
That button is inside an iframe. To access it from the parent page you would trigger it like this:
$('iframe').contents().find('input:submit').click()
HTML:
<footer>
<a href="#"><div class="footbut" id="chooseFile" onclick="">
<div class="done2 gradGreen" data-bind="visible: picsCount(objectInRoute())>0">
<div class="typcn typcn-tick indone"></div>
</div>
<div class="typcn typcn-camera bigblack"></div>
<span data-bind='text: pickONE("aside",18)'></span>
</div></a>
</footer>
<form class="uppform" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" id="file" name="image" data-bind="value: upload"/>
<input type="hidden" name="imageObject" data-bind="value: objectInRoute()"/>
<div data-bind="if: upload()">
<div class="first stripe40 gradGold tGold">
<h1 data-bind="text: pickONE('aside',41)"></h1>
</div>
<input type="submit" data-bind="value: upload" id="submit" class="gradGreen"/>
</div>
</form>
JS:
$('#chooseFile').click(function(){
alert ("here");
$('#file').click();
});
(CSS:
#file {
display: none;
}
On PC alert works, clicking at #file (=opening choose file) works.
On my touchscreen (android, mobile phone): alert works, but it does NOT open the popup with camera/documents/gallery....
How can I do it to use on touchscreen or is error somewhere else? Thank you!
If anyone would be interested in this particular situation, it seems that this code solves the problem:
#file {
width: 0;
height: 0;
float: left;
visibility: hidden;
}
Instead of display: none;
I am not really sure, that it will work on all devices, but on my testing one it does.