I have Google Maps with properties pins, and a search box below it. After the user clicks on "sort", pins are shown based on user's criteria. I'm looking for a solution that would allow me to hide the search box, and only leave the box "Show search", instead of "Sort".
Here is the image how it currently looks:
http://i.imgur.com/S1q1xNH.jpg
And here is part of the search box code:
<div class="main-search">
<form id="main-search" method="post" action="#">
<!-- search box fields here -->
<input type="submit" value="Sort" class="search-submit" id="search-submit" />
</form>
</div>
How can I fix this problem?
A simple demo is at http://jsfiddle.net/xekR9/1/.
Don't forget to change return false to return true to allow PHP post.
I am not sure what you mean to leave the show search, but to hide the button do this:
$('.search-submit').on('click',function(){
$(this).hide();
});
Related
I am struggling with a problem to show a form conditionally using Thymeleaf. I want to show a form as in the image below: Hide form using Thymeleaf
Initially the pick up id column should show some text like 'edit' or 'n/a' with a link and when the user clicks on the link(or button) then only the edit box should be visible as in the image.
As you can see I have already created the form but I am having trouble with hiding the form and showing it only upon clicking a link or button and when user clicks on save, the id is saved to database(already done) and the entered id should be shown instead of the form.
I searched a lot about it but could not find anything using thymeleaf. I had found some related answers using JavaScript/jQuery but I need Thymeleaf.
The relevant part of the code
<td>
<a><span th:if="${ticket.pickedUp} ? ${ticket.pickUpId} : 'N/A'"></span>
<form th:action="#{/updatePickupId/{id}(id=${ticket.id})}"
th:method="post" th:style="'display: hidden'">
<div class="checkbox-list w-150px">
<input type="text" name="pId" value=""
placeholder="Pick Up Id"
th:classappend="${ticket.pickedUp} ? 'required' : ''">
<input type="submit" value="Save"/>
</div>
</form>
</a>
</td>
As you can see I have used th:style="'display: hidden'" in the form but I don't know why its not working and the form is visible all the time.
I am trying to get the input from my main sites search bar to be sent to the search bar of my second site and have the results of the second sites search appear.
I have played around with some code that almost works, however instead of searching the second site it instead adds the search input onto the url.
<div class="form-group">
<form id="search-products" method="get">
<input type="search" class="form-control input-thick-border" id="test" placeholder="Search..." name="keyword">
</form>
<script type="text/javascript">
document.getElementById('search-products').onsubmit = function() {
window.location = "http://website.com/Search" + document.getElementById('test').value;
return false;
}
</script>
</div>
So if I type "pen" into the first search bar then it will link to "website/searchpen" which doesn't exist so it redirects to the "not found" page. I feel like I am very close I am just missing some code that takes the input from the first search bar and searches for it in the second search bar. Any help or ideas will be much appreciated.
You don't actually need JavaScript for this. A normal form submit does exactly what you're looking for. Just set the form action.
<form method="get" action="https://example.com/search">
<input type="search" name="keyword" />
</form>
On form submit, it will go to something like:
https://example.com/search?keyword=Whatever+the+user+typed+in
I'm trying to create a search box with button inside as Google map. For the search box, it is very easy to create by following this example. However, I couldn't find out how to add a menu button as what they did in Google map. See the following picture for more details.
Thanks.
EDIT: To be clear, I'm referring to the menu button on the left which lies inside the search box. It is not the blue arrow button on the right.
Add the last line into your example to add a button that will appear next to your search box. You will need to write a function that will tell the button what to do when it is clicked.
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box"
<button onclick="doStuff()">Press to Search</button>
I want the user to be able to change the name of a list/table
<div class="col-md-6">
<form method="post">
<h1>
<b>
<input type="text" value="Group" id="groupName">
</b>
</h1>
<input type="submit" value="Change Name">
</form>
</div>
https://jsfiddle.net/bqgqhxs2/
i only put up the bare minimum code to hopefully get my point across.
i have a "hidden" text box and a submit button and i want the value that the user inputs into the text box to become the new value preferably without having to reload the page.
how would i go about implementing that? or is what I'm asking for even possible?
also if anyone has any other suggestions for a "rename" feature I'm all ears, the overall project is going to be implemented into meteor so if someone has a meteor solution that would be great but I'm only worrying about one problem at a time.
You can use the blur method to take the new name typed into the input.
$("#groupName").on( "blur", function() {
//change the id here
$("table").attr("id", $(this).val() )
//or the value of an element
$("table").attr("value", $(this).val() )
})
No need for the button to change the name of the table
fiddle https://jsfiddle.net/bqgqhxs2/2/
I am using label for attribute for input elements in my website that will help blind users.
Currently when user click on label, the corresponding input is getting activated. That means if there is textbox for name, then cursor will
go in the start of textbox.
For example, if name in textbox is "John", then on click label, cursor will enter in textbox and will show before "John".
But what I want is that it should select "John". That means text of textbox should be selected.
Can anyone help me how I can implement this?
My code is shown below:
<div class="editor-label">
<label for="ContactName">*Name</label>
</div>
<div class="editor-field">
<div>
<input id="ContactName" maxLength="40" name="ContactName" type="text" value="John" />
</div>
</div>
I am unsure if you can achieve this by just using html/css, so it's very likely that you need to use a JS lib, such as jQuery.
By using jQuery, you can use the select() method when the label is clicked, using something like this;
$(function() {
$('label').click(function() {
var id = $(this).attr('for');
$('#'+id).select();
});
});
A working example can be found here: http://jsfiddle.net/sf3bgwxr/