Search Bar, Box - html

I am making some site for personal use.
I am trying to make some search bar, box.
But, all that I found is with PHP.
I do not want PHP search box,
I want something like Ctrl+G or Ctrl+H (Like "Find words in this site").
I want to make search bar for only text in active site,page.
Without PHP.
W3S is helping only with PHP.
If You know what I mean, please respond fast.
Sorry for my bad English. ;)
Thank You!
I tried search codes in Google and did not find how to make search box without PHP.
eg. CTRL+G or CTRL+H
I do not have code.
This is my first question on stackoverflow, sorry for mistakes..
I expect to work only in that site that is code in.(Again, sorry for English)

Any search box that you are creating to get data or information from your site will be using php because it is more then likely in most cases pulling data from your database if you are trying to replicate the default browser functionality for Ctrl+F then you can create a search box with html and JavaScript
Heres a little snippet to send you on the right path
jQuery(document).keydown(function(event) {
// If Control or Command key is pressed and the F key is pressed
if((event.ctrlKey || event.metaKey) && event.which == 70) {
// hide/unhide search box
//or put your custom code here
//Insert code above this line
event.preventDefault();
return false;
}
}
);
<form action="#">
<input type="text" id="search" placeholder="search">
<input type="submit">
</form>

Related

HTML Banning Certain Characters

I am creating an HTML form, and I have text fields in my form that ask people to fill in their name. I don't want to user to fill in any of these characters when filling out their name-
! # # $ % ^ & * ( ) _ - + = { [ } ] | \ : ; " ' < , > . ? / 1 2 3 4 5 6 7 8 9
Is there any certain way I can do this? Thanks!
Ok, well you should really check for these characters at both the client-side using Javascript, and at the server-side using whatever you're using, PHP, ASP.NET, etc. Let me explain why you need each.
You should do the javascript validation because you want your user to see they did something wrong if they type in a disallowed character. For instance, you might make a warning in red test visible if it is not valid.
You might think that would take care of the problem, and it would, unless your users are crafty, and trying to screw with you. They can force a submission to your server that you would have checked for with your javascript if they had actually been using your page unmodified. They can easily rewrite your javascript to be whatever the heck they want. However, they cannot rewrite your validation code if it is running on your server when your server gets a submission.
So the javascript is for user-friendliness, and the server code is for security.
I don't know what back-end you're using, so I can't really help with that, but it will be fairly similar in functionality to the javascript code. Here we go.
Here's an example html document with a form:
<html>
<form
name="signupForm" action="registerUser.asp"
onsubmit="return validateForm()" method="post">
First name: <input id="nameInput" type="text" name="name">
<input type="submit" value="Submit">
</form>
</html>
Ok, now here's some accompanying javascript to implement that validateForm() function we saw:
function validateForm() {
var x = document.forms["signupForm"]["name"].value;
if (x == '!' || x == '#' || x == '#' || ... all your other conditions too ...) {
alert("Name cannot contain ... blah blah blah... characters.");
return false;
}
}
And that right there would do it for ya. Keep in mind please, that using the alert function is frowned upon. It's really antiquated and just not a good user experience. Perhaps instead you could put in a line of javascript to make a hidden text message near the input box visible, that displays the message instead. I'm sure you've seen that kind of thing before, and it's much more pleasant than an obnoxious pop-up message. You're not trying to punish your users for their typing mistakes.
Hope this helps. Also, you might want to consider allowing hyphens, they are really quite common in people's legal names. If this is your method of sanatizing database inputs, you're doing that the wrong way.

html input send information to another website

I'm trying to send a string from an input box to Google's search input to search on my website.
The only way that I can think of is Posting it to my own page which then sends it to google.
Is there a way to cut out that middle page and go straight to google?
Summary: Send input box string to Google's input box and search using Google.
Current thoughts of how to do this are.
Make form with input box
Submit form to seperate page
Seperate page then redirects you to "https://www.google.com/#q=" $_POST['string'] "site:mysite.com"
But I feel like there's a better way to do this.
Thanks
<input type="text" class="foo">
<button onclick="send()">Submit</button>
<script type="text/javascript">
function send(){
var value = $('.foo').val();
window.location.href = "https://www.google.com/#q="+value+" site:mysite.com";
}
</script>

Button to increment contents of html file by one each press

Im currently creating a website for my chickens that will have an "egg counter". I have a hidden part of the site that is password protected where I want to put a button that every time I press it, adds one to the egg value. Currently, I have an html file that has just the number in it which I have embedded into the site.
(this is the code that embeds the .html file)
<h2><b>Egg Counter!<b/></h2>
<p>So far our chickens have laid</p>
<font size="20" color="#FFFFFF"><embed src="./eggs.html"></embed></font>
I'm a novice programmer and I'm not sure whether this is the right approach but I have no idea how to make the button that changes the egg value.
Any help is greatly appreciated!
You can use the javascript onclick event to increment the number by 1 per click.
place this in your head section.
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
Place this where you want the button to display.
<form>
<input type="text" id="number" value="0"/>
<input type="button" onclick="incrementValue()" value="Increment Value" />
</form>
I think you want the number to be stored, so it's always showing and you can update it as and when your hipster chickens lay eggs. The previous answer will allow you to increment the number but only while you have the browser open.
I think the best way to do this is with PHP.
So first of all you want your page to be .php , lets say admin/loggedin.php.
You want to create a blank file in the same directory called eggs.txt , with the permissions 0755.
Then you want your form to look like this
<form method="POST" action="loggedin.php">
<input type="text" name="num" value="0"/>
<input type="submit" value="Chicken came first" name="eggs">
</form>
To explain the method / action:
method
is how you want to send the data to the
action
page.
Options are $_POST and $_GET, I don't think going into too much detail here will help.
action= is to tell the form what page to send this data to, in this case we've chosen to send it to the same page the form is on (loggedin.php).
So now once you submit that form we will have a $_POST['num'] available to us which contains the number you entered into the form input field.
To get this, you want to add at the top of your page: EDIT (have changed the section of code below - file_put_contents should of been inside the if($_POST['eggs']) {
<?php
//this checks to see if the form was submitted by checking 'eggs' is set.
if($_POST['eggs']) {
// create a nicer variable for our egg number, it deserves a nice name.
$egg = $_POST['num'];
//this will put the new number of eggs in our eggs.txt file
file_put_contents('eggs.txt',$egg);
}
?>
file_put_contents() writes to a file
Next you want to be able to get that number from the file on your display page. To do this:
<div class="my_egg_count">
<?php echo file_get_contents('eggs.txt'); ?>
</div>
file_get_contents() reads a file, echo 'echo's' from the server to client side.
Let me know if you have trouble with this, you don't want to end up with egg on your face.
EDIT:: try this
if(is_writeable('eggs.txt')) {
if(file_put_contents('eggs.txt',$egg)) {
echo 'File Updated';
}else {
echo 'Error Updating File';
}
}else {
echo "Error: File Isn't Writeable [possibly named incorrectly, isn't in the correct location, or wrong permissions]";
}

HTML Submit-button: Different value / button-text?

I'd like to create an HTML form submit button with the value 'add tag', however, the web page is in Swedish, so I'd like to have a different button text.
That is, I want to have a button like
but I want to have my code like
if (request.getParameter(cmd).equals("add tag"))
tags.addTag( /*...*/ );
Is this possible? If so, how?
It's possible using the button element.
<button name="name" value="value" type="submit">Sök</button>
From the W3C page on button:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content.
Following the #greg0ire suggestion in comments:
<input type="submit" name="add_tag" value="Lägg till tag" />
In your server side, you'll do something like:
if (request.getParameter("add_tag") != null)
tags.addTag( /*...*/ );
(Since I don't know that language (java?), there may be syntax errors.)
I would prefer the <button> solution, but it doesn't work as expected on IE < 9.
There are plenty of answers here explaining what you could do (I use the different field name one) but the simple (and as-yet unstated) answer to your question is 'no' - you can't have a different text and value using just HTML.
I don't know if I got you right, but, as I understand, you could use an additional hidden field with the value "add tag" and let the button have the desired text.
If you handle "adding tag" via JScript:
<form ...>
<button onclick="...">any text you want</button>
</form>
Or above if handle via page reload

post html form fields to google map and get back result page

I'm not an expert but i know a little about HTML forms, here is my problem
i want to create a simple html page with form for my customers to enter a gps values to maps.google.com and get back the result page embedded in the same html
here is the exact format of my string
as an example : 32 06 12.66N, 20 12 22.65E notes that there is spaces between values
that should be post to ( maps.google.com/?q=32 06 12.66N, 20 12 22.65E ) and take the result page and embed it back in the same html page
i want to create a from with separated input fields for every value (drop down menu for the "N" "W" and "S" "E")
would you plz tell me what is exactly the html code for that , appreciate any help guys
You'll need to combine multiple elements into one form element. Use a hidden and some javascript to populate it before submitting.
Something along these lines
<form id="myForm" method="post" action="http://maps.google.com">
<input id="q" type="hidden" name="q" />
<!-- all your other inputs -->
</form>
Then some javascript:
<script type="text/javascript">
function Bind()
{
// bind FillQ to the submit event of the form
}
function FillQ()
{
var q = document.getElementById("q");
q.value = ... // the combination of your other form fields
}
Bind();
</script>
You need to do some scripting to achieve this. Either server side or client side. Consider either hiring someone out or doing some research and learning some coding. I'd recommend your local junior college, or a free online web programming course.
If you have a specific problem with your implementation, post your question here and we will be happy to help, don't expect us to do all the work for you though ;)
Here are some hints to get you started:
Use javascript to collect the drop down fields, and create the google maps url string.
You can search google maps developer site to find code on embending this into your page.