I want that if you click on text the search button appears, I try to do that by using this code:
<a class="gn-icon gn-icon-search" style="width:200%;" onClick="CLICK ON THE BUTTON DIV">Search with style</a>
<ul id="sb-search" class="sb-search" style="margin-right:30px;">
<span class="sb-icon-search"></span>
<form>
<input class="sb-search-input" placeholder="Please enter search terms" type="text" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="" id="search-submit">
</form>
</div>
Does someone knows how to fix this? Maybe with jQuery? Thank you very much!
Using JQuery you can show the button on link click.
The HTML:
<a class="gn-icon gn-icon-search" id="search-text" style="width:200%;">Search with style</a>
<ul id="sb-search" class="sb-search" style="margin-right:30px;">
<span class="sb-icon-search"></span>
<form id="search-form">
<input class="sb-search-input" placeholder="Please enter search terms" type="text" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="" id="search-submit">
</form>
</ul>
The JQuery:
$(document).ready(function() {
$('#search-form').hide();
});
$('#search-text').click(function() {
$('#search-form').show();
});
Related
I need to display the search results page in an overlay. now when I submit the search button I lost focus on my site and the results open on a new page. how can I show results overlay?
<form action="https://google.com/search" method="get" class="form-inline d-flex justify-content-
center md-form form-sm active-cyan active-cyan-2 mt-2">
<input type="hidden" name="q" value="site:www.forexample.com" />
<input type="text" name="q" class="form-control form-control-sm ml-3 w-75" />
<a onclick="this.closest('form').submit();return false;"></a>
</form>
Anchor tag acts as a form submit button?
<form method="get" action="<?php bloginfo('url'); ?>/">
<div class="field-search">
<input type="text" class="form-control input-lg" placeholder="Search for..." value="<?php the_search_query(); ?>">
<i class="fa fa-search font-16"></i>
</div>
<form action="test.aspx" type="POST">
<label>
<span>Username</span>
<input type="text" name="UserName" id="UserName" class="input-text required" />
</label>
<label>
<span>Password</span>
<input type="password" name="Password" id="Password" class="input-text required" />
</label>
<label>
<input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
<span class="checkboxlabel">Remember Me</span>
</label>
<div class="spacer">
Login
</div>
</form>
jquery
$(document).ready(function(){
$(document).on("click",".login-button",function(){
var form = $(this).closest("form");
//console.log(form);
form.submit();
});
});
possible duplicate of
(Anchor tag as submit button?)
(This is a copied answer)
Try this approach see if it works.
Add a click event to your anchor tag as below and do a event.stopPropagation()
$('a').on('click', function(e){
e.stopPropagation();
})`
See if this works
I'm trying do a few customizations to the wordpress default search form and I would like to replace the text "Search" in the value="Search" string with an icon.
Currently I have the following form:
<form role="search" method="get" id="searchform" class="searchform" action="//example.com/">
<div class="box">
<div class="container-1">
<input type="text" value="" name="s" id="s" placeholder="Search..." />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</div>
</form>
How can I put in the following icon instead? <i class="fa fa-search"></i>
Here is a bit of a workaround, I replaced the input with button, removed value completely
<form role="search" method="get" id="searchform" class="searchform" action="//example.com/">
<div class="box">
<div class="container-1">
<input type="text" value="" name="s" id="s" placeholder="Search..." />
<button type="submit" id="searchsubmit" />
<span class="icon"><i class="fa fa-search"></i></span>
</button>
</div>
</div>
</form>
Form seems to work just fine ..
Instead of using anchors or buttons in a drop down menu, I want to have a form for each item. The form contains some hidden fields and a submit button. When I put the form in each <li> of my mark up, the UI was messed up. Does Bootstrap support this natively? If not, I'm going to re-code my application to work with links.
Update 1: screen shot
Update 2: mark up
<div class="btn-group open">
<button class="btn">Action</button>
<ul class="dropdown-menu">
<li>
<form action="#" method="post">
<fieldset>
<input type="submit" value="Favorite"/>
</fieldset>
</form>
</li>
<li>Message</li>
<li>
<form action="#" method="post">
<fieldset>
<input type="submit" value="Smile"/>
</fieldset>
</form>
</li>
<li>
<form action="#" method="post">
<fieldset>
<input type="submit" value="Block"/>
</fieldset>
</form>
</li>
<li>
<form action="#" method="post">
<fieldset>
<input type="submit" value="Friend"/>
</fieldset>
</form>
</li>
<li>
<form action="#" method="post">
<fieldset>
<input type="submit" value="Exclude From Future Search Results"/>
</fieldset>
</form>
</li>
</ul>
</div>
Update 3: icons
I want the submit buttons to have an icon. Not sure what's the best way to do that, but this is my solution:
<label for="foo">
<i class="icon-ok></i> Favorite
</label>
<input id="foo" style="display:none;" type="submit" value="Favorite"/>
The submit form is hidden, the label is shown with icon, and when user clicks on the label, it works. No JS required.
Not quite sure if I understand what you mean about the submit form being hidden but the label showing an icon however I was able to override the buttons with an image. Please see the attached jsBin. I did it by adding a class to the input's
http://jsbin.com/eboqij/1/edit
.button{
background-image:url('http://www.nyanicorn.com/res/img/icon_nyan.png');
background-repeat:no-repeat;
text-indent:-9999px;
width:40px!important;
}
Or just use Javascript to store the value in a hidden field and submit the form -- you're probably using JS anyways handle the open/close of the dropdown.
I had the exact same problem and I've created this new "submit" plug-in:
!function ($) {
"use strict"; // jshint ;_;
$(document).on('click.submit.data-api', '[data-submit]', function (e) {
e.preventDefault()
var form= $('#'+$(this).data('submit'))
form.find('input[name="'+$(this).data('name')+'"]').val($(this).data('value'))
form.submit()
})
}(window.jQuery);
Which I can use thus:
<form id="myform" ...>
<input type="hidden" name="myparam">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a data-submit="myform" data-name="myfield" data-value="myvalue>
Click here
</a>
</li>
</ul>
</div>
</form>
I'm trying to submit a form with zombie.js, and pressButton() is failing with "Error: No BUTTON 'xxx'", where xxx is the selector. Here is the app:
var Browser = require('zombie');
b = new Browser();
b.visit('https://www.example.com/login/', function() {
b.
fill('name', 'My Name').
fill('code', 'My Code').
pressButton('submit', function() {
console.log(b.html());
});
});
And here is the form:
<form method="post" class="login">
<p> <label for="name"> <span id="nameprompt">Your Name:</span> </label> </p>
<input name="name" id="name" value="" size="40" maxlength="40" />
<p> <label for="code"> <span id="codeprompt">Bar Code</span> </label> </p>
<input name="code" id="code" type="PASSWORD" value="" size="40" maxlength="40" />
<div class="formButtonArea">
<input type="image" src="/screens/pat_submit.gif" border="0" name="submit" value="submit" />
</div>
</form>
I've tried a bunch of selectors including things like ".formButtonArea input" in addition to the obvious "submit" with no success.
What am I doing wrong?
It seems like you need the input to be of type="submit" (or type="button" perhaps). According to https://groups.google.com/forum/?fromgroups=#!topic/zombie-js/8L0_Cpn8vVU, where the author comments on clickLink, it's likely that clickButton will do the same: find buttons and then fire click.
Hope it helps.