I have used this code to show a Google web search box
<form method="get" action="https://google.com/search">
<input type="text" name="q" size="31" value=" ">
</form>
I would like to have the box prefilled with the text
"What to do in" and let the user type the location ( example type only Sydney )
so the query will be:
What to do in Sydney"
Is it possible?
I'm just a beginner and do not know much about HTML.
Your help would be very appreciated.
Thank you
Fernando
use value = "What to do in" and this will work.
If you are in HTML only, then do like this:
<input type="text" name="q" size="31" value="What to do in ">
You should build it in a way it is clear to the user his search will be appened to this line:
What to do in:
something like
<span>What to do in</span><input type="text" id="search" name="q" size="31" value=" ">
and in js or anything else:
$.get('https://www.google.co.il/search?q=what to do in ' + $('#search').val(),function(data){
//Do stuff with seach results
})
You can then append the word to the query
The issue with the above answers is that the user can just delete the whole text and start again..
so if you really want to limit it to "what to do in ..." then you should only offer up the text input for the location.. similar to what raam86's answer was.
<form method="get" action="https://google.com/search">
<label for="whattodo">What to do in</label>
<input type="hidden" name="q" id="real_input" value="what to do in" />
<input type="text" id="whattodo" onkeyup="fillForm(this.value);" />
</form>
<script>
function fillForm( _val )
{
document.getElementById('real_input').value = 'what to do in ' + _val;
}
</script>
Use label where possible - this relates the text to the input area - which means, if a user clicks on the label they'll be focused into the input box ready to type..
You'll notice that there's a hidden input and also a text input
the hidden input gets filled with "what to do in " as well as the text from the text field (as the user types, a bit of javascript is triggered called fillForm() which appends the hidden field (the query field) with the user inputted text.. this ensures that it's always going to have "what to do in" prepended to the query.
You should place
function fillForm( _val )
{
document.getElementById('real_input').value = 'what to do in ' + _val;
}
between the <head> and </head> of your HTML document.
Related
html code:
<div id="1" class="grid-item"> <input type="text" size=1px value=""></div>
After entering the value in input section,i want to access the contents what i have enetered.
can anyone please help me in this question.
i didn't quite understand what you meant but i assume you meant the following ?
let input = document.getElementById('input')
let h1 = document.getElementsByTagName('h1')[0]
input.addEventListener('input', () => {
h1.textContent = input.value
})
<div id="1" class="grid-item"> <input type="text" size=1px value="" id='input'> <h1></h1></div>
Requires JavaScript or BackEnd But if you don't mind I will explain the javascript
...............
First, choose a unique identifier for your input, for example "MyInput":\
<div>
<input type="text" id="MyInput" value="">
</div>
It doesn't matter where it is ( form , input and ... )
Now let's go to JavaScript:( I attach it to a sticker )\
<a onclick=" alert( document.getElementById('MyInput').value ) "> Show Value Input</a>
You may not understand what this command is
I'm just referring to the onclick input
With the "alert" command the browser will show you something and if you know js, you know this
The document.getElementById command takes an ID and finds that tag, which you can access by typing a dot followed by the entry name.
For example, when you write something in your input, the input is a value and the fog is filled with that value.
From now on, every time you click on the a tag, you will be shown the input value
Complete code:
<div>
<input type="text" id="MyInput" value="">
</div>
<a onclick=" alert( document.getElementById('MyInput').value ) "> Show Value Input</a>
If you have any questions, send me an email:
amp.it.ir.go#gmail.com
;-)
i am working on a search function, herefore i need the value of an input to generate the final url (which shows the results)
Let's say the user enters the content he is looking for here:
Name: <input type="text" id="myText">
now i need to generate a hyperlink from
http://constant/constant?query=NAME&someotherconstantthings
here, the NAME needs to be replaced from the content of the input
Try to use PHP, you could add a action to the Form Element to post the entered informations to the PHP file, then generate ur hyperlink.
<form action="phpfilename.php" method="post">
Name: <input type="text" id="myText" name="myText">
<input type="submit" value="Search">
</form>
<?php
$name = $_POST['myText'];
$hyperlink = 'http://constant/constant?query='.$name;
?>
You need something like this:
<form action="URL" method="get">
Enter your name here: <input type="text" name="query" value="">
<input type="submit" value="Search">
</form>
You need to replace the keyword URL with the path to the page which performs the search. You can remove the keyword URL if want to submit the form to the same page.
For example I have a textfield. The field is mandatory, only numbers are required and length of value must be 10. When I try to submit form with value which length is 5, the default error message appears: Please match the requested format
<input type="text" required="" pattern="[0-9]{10}" value="">
How can I change HTML form validation errors default messages?
If the 1st point can be done, is there a way to create some property files and set in that files custom error messages?
This is the JavaScript solution:
<input type="text"
pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Please enter Alphabets.')"
onchange="try{setCustomValidity('')}catch(e){}" />
The "onchange" event needs when you set an invalid input data, then correct the input and send the form again.
I've tested it on Firefox, Chrome and Safari.
But for Modern Browsers:
Modern browsers didn't need any JavaScript for validation.
Just do it like this:
<input type="text"
pattern="[a-zA-Z]+"
title="Please enter Alphabets."
required="" />
When using pattern= it will display whatever you put in the title attrib, so no JS required just do:
<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />
I found this code in another post.
HTML:
<input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" />
JAVASCRIPT :
function InvalidMsg(textbox) {
if(textbox.validity.patternMismatch){
textbox.setCustomValidity('please enter 10 numeric value.');
}
else {
textbox.setCustomValidity('');
}
return true;
}
Fiddle Demo
To prevent the browser validation message from appearing in your document, with jQuery:
$('input, select, textarea').on("invalid", function(e) {
e.preventDefault();
});
you can remove this alert by doing following:
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity(' ')"
/>
just set the custom message to one blank space
you can change them via constraint validation api: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity
if you want an easy solution, you can rock out civem.js, Custom Input Validation Error Messages JavaScript lib
download here: https://github.com/javanto/civem.js
live demo here: http://jsfiddle.net/hleinone/njSbH/
The setCustomValidity let you change the default validation message.Here is a simple exmaple of how to use it.
var age = document.getElementById('age');
age.form.onsubmit = function () {
age.setCustomValidity("This is not a valid age.");
};
I Found a way Accidentally Now:
you can need use this: data-error:""
<input type="username" class="form-control" name="username" value=""
placeholder="the least 4 character"
data-minlength="4" data-minlength-error="the least 4 character"
data-error="This is a custom Errot Text fot patern and fill blank"
max-length="15" pattern="[A-Za-z0-9]{4,}"
title="4~15 character" required/>
I found a bug on Mahoor13 answer, it's not working in loop so I've fixed it with this correction:
HTML:
<input type="email" id="eid" name="email_field" oninput="check(this)">
Javascript:
function check(input) {
if(input.validity.typeMismatch){
input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something nice!!");
}
else {
input.setCustomValidity("");
}
}
It will perfectly running in loop.
This is work for me in Chrome
<input type="text" name="product_title" class="form-control"
required placeholder="Product Name" value="" pattern="([A-z0-9À-ž\s]){2,}"
oninvalid="setCustomValidity('Please enter on Producut Name at least 2 characters long')" />
To set custom error message for HTML validation use,
oninvalid="this.setCustomValidity('Your custom message goes here.')"
and to remove this message when user enters valid data use,
onkeyup="setCustomValidity('')"
As you can see here:
html5 oninvalid doesn't work after fixed the input field
Is good to you put in that way, for when you fix the error disapear the warning message.
<input type="text" pattern="[a-zA-Z]+"
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')" />
I am writing a website and I am currently working on the sign up page. I have a drop down box and I want to have that drop down box open different sign up information for each one. For example: If they picked prime user it would change the sign up information they needed from just username and password to username, password, credit card number, and telephone number . OR if they picked partial user from the drop down list it would ask for username password and telephone. Any clue how to do this in HTML or any other computer language?
Assuming html like this:
Type:<br>
one <input type="radio" name="type" id="type-1" value="1" /><br>
two <input type="radio" name="type" id="type-2" value="2" />
<hr>
<form action="." METHOD="POST">
<input class="second" type="text" name="name" id="name" value="name" />
<input class="second" type="text" name="email" id="email" value="email" />
<input class="second" type="text" name="credit-card" id="credit-card" value="credit card" />
</form>
And css like this: (to hide all the form fields except for type choice)
.second{
display:none
}
You can use jQuery javascript library to show/hide the required form fields dynamically like this:
// when type radio button is pressed
$('#type-1,#type-2').change(function(){
// hide all form fields
$('.second').hide()
// if type is 1
if($('#type-1:checked').length){
// show name and email fields
$('#name,#email').show()
// else if type is 2
}else if($('#type-2:checked').length){
// show name, email and credit-card fields
$('#name,#email,#credit-card').show()
}
})
This is demonstrated here: http://jsfiddle.net/rBvLA/
The result must be processed by server side script using any language you choose.
You might want to look into any of the many fine server side tools available, such as asp.net, php, etc... you could also use javascript.
For instance, using JavaScript, you could have an event fire when they change the drop down and in the code for that event handler, you could modify the DOM in such a way as to display the appropriate form elements for each selection.
another jQuery solution:
Live Demo
$('#reg_type input[type=radio]').change(function() {
var type = $(this).attr('class');
$('#reg_fields div').each(function() {
if ($(this).hasClass(type)) {
$(this).show().removeAttr('disabled');
} else {
$(this).hide().attr('disabled','disabled');
}
});
});
I'm trying to add a search box to my page that will direct users to the search result page on a different site. I have the action and all of the other required data in hidden fields, to ensure it's posting correctly.
The problem is that they tack on extra data to the search term, making it an advanced search type of field. So instead of being searchTerm=X, it's expecting searchTerm=Locale(en):FQE=(KE,None,11)MY_SEARCH_TERM:And:LQE=(AC,None,8)fulltext$
How can I add that extra data around my search term, without having to hit an intermediate page to do the concatenation?
Here's what I have so far:
<form action="http://vendors.address/searchresult.do" method="post">
<input type="hidden" name="type" value="search">
<input type="hidden" name="sort" value="DateDescend">
<input type="text" name="queryId">
</form>
And I need something that can result in this type of thing:
<form action="http://vendors.address/searchresult.do" method="post">
<input type="hidden" name="type" value="search">
<input type="hidden" name="sort" value="DateDescend">
<input type="hidden" name="queryId" value="Locale%28en%2C%2C%29%3AFQE%3D%28KE%2CNone%2C11%29MY_SEARCH_TERM_HERE%3AAnd%3ALQE%3D%28AC%2CNone%2C8%29fulltext%24">
</form>
Any help would be appreciated.
You could use Javascript to do this with a hidden search field. In jQuery, it would be something like:
$("input[name='queryId']").keyup(function() {
$("#hiddenField").val("Locale%28en%2C%2C%29%3AFQE%3D%28KE%2CNone%2C11%29" + $(this).val() + "%3AAnd%3ALQE%3D%28AC%2CNone%2C8%29fulltext%24");
});
But it would break with no JS.
Edit: Yea, beat to it, didn't refresh for the answers.
You can use JavaScript to do the concatenation before the form is submitted. There are a couple ways to do this but here is the recommended approach:
Since I don't see a submit button I'm assuming you counting your users to hit the enter key to submit the form so you will need to listen to the onSubmit event and concatenate the extra info before the post is sent to server.
Give the form element an id:
<form action="..." method="post" id="searchForm">
and give the text input field an id:
<input type="text" name="queryId" id="queryId">
Add this script block after the form
<script>
document.getElementById("searchForm").onSubmit = function(){
var queryField = document.getElementById("queryId");
queryField.value = "prepend_data" + queryField.value + "append_data";
return true;
}
</script>
Or of you can use JQuery (please do) you can drop this anywhere:
<script>
$(function(){
$("#searchForm")
.submit(
function(){
$("#queryId).val("prepend_data" + $(this).val() + "append_data");
}
);
});
</script>
Hope that helps
Two things I can think of:
1. Just put the locale and stuff in hidden inputs:
<input type="hidden" name="locale" value="en" />
2. Use javascript to submit the form (this is a horrible idea -- you don't want to make your site break if Javascript is turned off).