<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
Related
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'm trying to edit my search bar so that when the user searches, it automatically adds a wildcard to either side.
The following code almost does the trick, in that it adds the wildcards either side. Unfortunately, it adds them to a blank search term, resulting in '**'. Confused as to why it seems to be unable to find the value of the search input.
Edit: Just to be clear, the issue is that on the site the value of searchfield is coming back as blank, even though the user has entered text.
$('.search-bar').submit(function() {
var self = this;
event.preventDefault ? event.preventDefault() : event.returnValue = false;
var searchfield = $('.search-input');
searchfield.val("*" + searchfield.val() + "*");
self.submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/search" method="get" class="input-group search-bar" role="search" style="position: relative;">
<input type="search" name="q" value="" placeholder="Search our store" class="input-group-field search-input" aria-label="Search our store" autocomplete="off" data-old-term="test">
<span class="input-group-btn">
<button type="submit" class="btn icon-fallback-text">
<span class="icon icon-search" aria-hidden="true"></span>
<span class="fallback-text">Search</span>
</button>
</span>
<ul class="search-results" style="position: absolute; left: 0px; top: 35px; display: none;"></ul>
</form>
For your this problem:
Unfortunately, it adds them to a blank search term, resulting in '**'
Just add a check, if input is not empty then only submit and search.
Check below:
$('.search-bar').submit(function() {
var self = this;
event.preventDefault ? event.preventDefault() : event.returnValue = false;
var searchfield = $('.search-input');
if (searchfield.val()) {
searchfield.val("*" + searchfield.val() + "*");
self.submit();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/search" method="get" class="input-group search-bar" role="search" style="position: relative;">
<input type="search" name="q" value="" placeholder="Search our store" class="input-group-field search-input" aria-label="Search our store" autocomplete="off" data-old-term="test">
<span class="input-group-btn">
<button type="submit" class="btn icon-fallback-text">
<span class="icon icon-search" aria-hidden="true"></span>
<span class="fallback-text">Search</span>
</button>
</span>
<ul class="search-results" style="position: absolute; left: 0px; top: 35px; display: none;"></ul>
</form>
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
}
Hi i need to hide the text once i click on add button and the form should be displayed.Here is my code.
<h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for self occupied property</h2>
<div class="last" style="margin-right: 0; padding-right: 0;">
<div class="last" style="width: 710px;">
<p class="narrate quiet" style="margin-left: 2%; width: 100%;margin-bottom: 0.75em;"> <b>Would you like to add Co-owner? </b></p>
</div>
</div>
//Here is add button and go back button if i click in this add button form should be displayed else t should show the same text.//
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:2%;">
<a class="large awesome oranges" >Add a property Co-owner</a>
</div>
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:51%;">
<a class="large awesome orange" href="property.php">Go Back </a>
</div>
<p>You haven't added any Co-owners Yet.</p>
//My form starts from here//
<h2>Owner Property details</h2>
<input type='hidden' value="<?php echo $username; ?>" name='email'>
<p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text" name="name_coowner" /></p>
<p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text" name="pan_coowner" /></p>
If i open the page iam getting this form but in this Owner Property details should be shown only when i click on add a property owner.Remaining all other should be Hidden it should show only form thats it.
Replace your code with this:
Note: This requires a working internet connection for fetching JQuery library over internet
<html>
<head>
<title>Title of website</title>
<style>
.hidden
{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('.add-property').click(function () {
$('.hidden').toggle('slow');
$('#add-owner-div').addClass('hidden');
$('#go-back-div').addClass('hidden');
});
});
</script>
</head>
<h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for self occupied property</h2>
<div class="last" style="margin-right: 0; padding-right: 0;">
<div class="last" style="width: 710px;">
<p class="narrate quiet" style="margin-left: 2%; width: 100%;margin-bottom: 0.75em;"> <b>Would you like to add Co-owner? </b></p>
</div>
</div>
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:2%;" id="add-owner-div">
<a class="large awesome oranges add-property" >Add a property Co-owner</a>
</div>
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:51%;" id="go-back-div">
<a class="large awesome orange" href="property.php">Go Back </a>
</div>
<p>You haven't added any Co-owners Yet.</p>
<h2>Owner Property details</h2>
<div class="hidden" style="display:none">
<form>
<input type='hidden' value="<?php echo $username; ?>" name='email'>
<p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text" name="name_coowner" /></p>
<p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text" name="pan_coowner" /></p>
</form>
</div>
</html>
If you have any other css libraries or bootstrap you can include in head tag
PHP is not an option to do this. If you want it to do with PHP dependent value you can use JQuery ajax.
Your add button should be like this
<a class="large awesome oranges" id="add_btn">Add a property Co-owner</a>
Put your form elements inside form
<form nam="myform" id="myform" style="display:none">
<input type='hidden' value="<?php echo $username; ?>" name='email'> <p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text" name="name_coowner" ></p> <p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text" name="pan_coowner" ></p></form>
Js:
$("#add_btn").on('click',function(){
$("#myform").show();
}
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?