I am playing with the Ajax Live Search functionality from the W3Schools website. It is working fine except I would like the results div, #livesearch, to hide again when the user clicks away from it. I have found an example piece of code which does this but I cannot comdine the two successfully. If I add the code the search results can be hidden when the user clicks away but the user has to click first to see them, which obviously wont work.
http://www.w3schools.com/php/php_ajax_livesearch.asp
http://bytes.com/topic/javascript/answers/676788-hide-div-tag-if-outside-div-clicked
Can anyone point me in the right direction?
Thanks
Chris
Checkout the javascript 'onblur' event.
You could create a new function which cleared the div:
blurFunction() {
document.getElementById("livesearch").innerHTML = ''
}
The onblur event:
<input type="text" size="30" onkeyup="showResult(this.value)" onblur="blurFunction()" />
EDIT: Actually I just noticed the showResult function already caters for clearing the div, so just insert:
<input type="text" size="30" onkeyup="showResult(this.value)" onblur="showResult('')" />
If I'm reading this right, you want the dropdown to disappear when the input loses focus and reappear when the mouse is moved over it, not just clicked?
I was able to achieve this by using an onblur event to hide the box (your example that you found works equally well, I believe). onblur="hide(this)" to hide the dropdown div. Hide js function is the same: function hide(id)
{
document.getElementById("livesearch").style.display = "none";
}
To make it reappear on mouseover, I added an onmousemove event to the input: <input type="text" size="30" onkeyup="showResult(this.value)" onblur="hide(this)" onmousemove="showResult(this.value)" />
.
Most importantly I added this line document.getElementById("livesearch").style.display = "block"; in the xmlhttp.onreadystatechange=function() to make the div reappear.
Related
I have a form table with checkboxes. I want the user to check whichever url (element) they want to delete, press a button which then calls a "delete.php" file which deletes that record in mysql.
What I am trouble finding out how to do is to call the delete.php file with a button outside of the form. I know that you would typically use a submit button inside the form but in this situation, I am exploring whether it is possible to do it with a button that is outside it.
An image is attached to illustrate why I want to do that. The url menu on the bottom is called by a function because I want it to be modular. So I think the "Delete BM" question needs to be able to action the deletion of the checked checkbox.
I have googled a variety of search cases which dont really answer my question:
How to send checkbox state through form in a table
Search "php how to call php file outside form"
Search "how to call php file without submit button"
Call php file without using form action
Submit without submit button
Use following code for submitting your form.
and use search keyword in google "submit form without submit button in php".
<form id="jsform" action="whatever you want">
// input fields
</form>
<script type="text/javascript">
document.getElementById('jsform').submit();
</script>
For Your Problem. Below are Sample code
<input type='checkbox' class='test' name='test' value='1'>
<input type='checkbox' class='test' name='test' value='2'>
<input type='checkbox' class='test' name='test' value='3'>
<input type='checkbox' class='test' name='test' value='4'>
is somthing your checkboxes then following is the script
<script>
$(function(){
$(".test").click(function(){
var checkBoxValue = $(this).val(); // value of checkbox
$.ajax(
{
url: "" // url of page where delete funcnality is written
// and id of field
})
.done(function(data)
{
// success
});
});
});
</script>
In the past I have come across this sort of issue, of wanting a submit button outside of a form for layout/presentation reasons.
Having given it some thought and reading around, I learned there were some very good reasons to avoid doing so;
Changing the default behaviours of the browser is generally a bad idea, you make extra work for yourself and in the end is likely to complicate things and often also lead to confusing users. (for example: what happens if user clicks enter, will it still submit the form?)
Users that do not have up to date javascript or do not have it switched on, will not be able to use your form / site.
You can achieve what you want and still use the standard html submit button. Using CSS to make it appear as a text link, great example;
How to make a submit button display as a link?
In your example I personally would just have the submit button appear as a button (styled to match sites design) directly under the checkboxes, separate from your menu below. As this makes the most sense to me, and would save you some work as you wouldn't need to fiddle with your menu function.
However if you wanted to achieve exactly as you set out, you could pass the button (html string) as a paramenter into your function so that it can be entered into the menu list, then return all the menu html string and print it inside your form;
<form>
<input type="checkbox" name="1" /><br />
<input type="checkbox" name="2" /><br />
<input type="checkbox" name="3" /><br />
<?php
$buttonHtml = '<input type="submit" name="delete_bm" value="delete bm" class="submitLink" />';
echo navMenu($buttonHtml);
?>
</form>
Now the submit tag is within the form tag (and will behave as as intended), it is simply a case of using CSS to style these and any other elements to give you the presentation that you desired (might need to remove padding, margin etc. from form element).
.submitLink {
font: inherit;
background-color: transparent;
text-decoration: underline;
border: none;
color: blue;
cursor: pointer;
}
.submitLink:focus {
outline: none;
}
form{
padding: 0;
margin: 0;
}
The big upside is that now you do not need any un-necessary javascript, giving maximum accessibility and maintaining the functionality that users expect.
Also feels less complicated to me and that it is less likely to need updating.
Side note: if your form allows users to delete multiple bookmarks at once (seems like it should) you might want the text on the button to read; delete bookmark(s) Hope you had considered that ;)
You can use jQuery AJAX for this.
Because, calling PHP script with form submit will cause total page refresh.
you need to just delete the selected checkbox row and delete the entry from database.
I will explain the pseudo logic for it.
On click of the link Delete BM, call javascript for AJAX.
First open a confirm dialog.
Through AJAX, pass the id to be deleted to backend PHP file.
In PHP file, write the code to delete the record.
If record gets deleted, echo success there else failure.
If in AJAX, we get results success, delete the respective rows.
jQuery $.ajax()
Have a query that should hopefully be nice and simple to answer.
I have a form that will be used to add rows into a database. The default number of rows to show when loading the page is 6. I would like to add the option to add more rows to the form, by changing a field, or clicking a button etc.
I currently use a while loop to print out the form. I simply say:
while($rows > 0) {
echo "FORM INPUTS HERE";
$rows = $rows - 1;
}
So the loop goes through a prints a set of inputs for record 1, and then takes one off the count, then prints a set of inputs for record 2, and so on.
Is there a way I can get the while loop to print more without refreshing the page? The simplest way would be to have a small form at the top of the page, with an extra columns field, and submit button. This would then post the value back to the same page, and add it to the default number of rows.
I would like to do this without having to submit, post or GET anything, but to have it happen then and there.
I think it may be tricky, as the while loop will have already run, and I dont know how to get it to run a second time.
Cheers
Eds
If you need an empty form, use Javascript and add this new form elements to the DOM on the fly! :)
Do you need to load some information on that form?
You can use ajax to make your wish. It doesn't refresh page, but sends out a request to the server asynchronously and fetches the content and appends to the form.
Example, if you have a code this way:
<form method="post">
<ul>
<li><label><strong>Field 1:</strong> <input type="text" /></label></li>
<li><label><strong>Field 2:</strong> <input type="text" /></label></li>
<li><label><strong>Field 3:</strong> <input type="text" /></label></li>
<li><label><strong>Field 4:</strong> <input type="text" /></label></li>
<li><label><strong>Field 5:</strong> <input type="text" /></label></li>
</ul>
</form>
Now using jQuery's $.getScript function, you can fetch a script, which is similar to this:
$("form ul").append('<li><label><strong>Field ' + $currentValue + ':</strong> <input type="text" /></label></li>');
This works out for you.
Thanks for all the suggestions guys.
I decided to just go for a small 1 filed form at the top of my page, where a user enters the number of rows they want to add, and then press the add button.
It should suffice, as the page doesnt NEED to be too fancy, and is much quicker and simpler to implement.
Thanks very much
Eds
I have a jQuery colorpicker that the visitor can change and I am trying to figure out, how can I pass whatever value they enter / pick so that I can use it as a url query?
With what I have right now, you can click the color wheel to get a hex code in the input (such as #ffffff) or you can just type it into the input, but what I need to do is then take this value and make a link that links to the website's url plus ?color=#ffffff. I can just make a link next to the color picker to do this but I don't know how I can have it link to whatever the visitor chose in the color input.
Here is the live site: http://www.brainbuzzmedia.com/themes/vertex/
Here is the html for the input:
<input type="text" name="color-demo" id="color-demo" value="#ff0000" class="colorfield regular-text" data-hex="true" />
This can show you your value
alert(document.getElementById('color-demo').value);
So just add it to your link:
LINK
like this:
document.getElementById('mylink').href += document.getElementById('color-demo').value;
the JS code above should be invoked when onChange for color-demo fires. For example, change:
<input id="color-demo" class="colorfield regular-text" type="text" data-hex="true" value="#ff0000" name="color-demo">
to
<input id="color-demo" class="colorfield regular-text" type="text" data-hex="true" value="#ff0000" name="color-demo" onChange="myfun()">
and create myfun():
function myfun()
{
document.getElementById('mylink').href += document.getElementById('color-demo').value;
}
I'm having an issue with a javascript interaction on a site, and I can't figure out what's going on.
The basic gist of this site is this: One single .php page that has multiple includes contained within hidden divs. When the next or back buttons are clicked one of the divs becomes active (visible), and it contains questions with image links for answers. When one of these links is clicked a javascript function is called which is supposed to set a value in a hidden form field equal to the value that's passed to the function from the link.
I've got no idea why it's not working. I've done stub testing using alerts, and everything is being passed correctly. Occasionally it'll work on one question, but never all of them. Any help would be greatly appreciated. You can find the source code here:
http://3-1.faile-test.appspot.com/kilt_page.php
It looks to me that you are setting the wrong value in the hidden fields.
For example if I enter a company name "foo inc", the field is set as:
<input type="hidden" value="company_name" id="company_name_answer">
Should it not be?
<input type="hidden" value="foo inc" id="company_name_answer">
I think that the change_selection function is wrong, you have:
function change_selection(selection, answer)
{
var selection = selection;
var answer = answer;
document.getElementById(answer).value = selection;
}
It should presumably be...
function change_selection(selection, answer)
{
document.getElementById(answer).value = document.getElementById(selection).value;
}
In case anyone else has this issue, here's how I solved it:
I added default values to the hidden form inputs. So, instead of:
<input type='hidden' name='answer_name' value='' />
I have:
<input type='hidden' name='answer_name' value='default' />
I am using an image instead of a submit button for search option and use onclick events to load the results using ajax in php.Now I need to load results by hit enter also.Is their any ways to update my application without changing the image.
Thanks
Sure, add <input type="submit" style="display:none;" /> to the end of your form, should trick the browsers into allowing the Enter key to submit your form.
As far as getting the same functionality as your AJAX onclick event: You should be tying your ajax function to the <form>'s submit event instead of the <input>'s click event.
jsfiddle demonstration (uses jQuery for ajax ease, but your event doesn't have to)
I don't know what javascript library you're using, but I'll use jQuery in my example.
<script>
$(document).ready(function() {
$("form#interesting").bind("submit",function() {
$.get("target_page.php".function() {
// Callback functionality goes here.
});
});
});
</script>
<form id="interesting">
Enter your input: <input type="text" name="interesting_input" />
<!-- input type="image" is a way of using an image as a submit button -->
<input type="image" src="submit_button_image.gif" />
</form>
Hmm, There are several things I can think about.
fitst one - someone mentioned that you can style submit button as an image. Good idea and it's easy. this tutorial was posted as an answer some time ago http://www.ampsoft.net/webdesign-l/image-button.html .
Another problem is, you bind your submit event to onclick, but the natural submit for form is onsubmit. So if you hit enter on form input the form receives onsubmit event. You have to bind your JS to it.
It works genrally as in answer from #phleet when you use jquery, when you don't use any library, you can do something like
<form onsubmit="YOUR_JS_HERE">.....</form>
like in onclick. I also recommend using jQuery, though.