I am trying to make a search engine.
I was expecting it to redirect me.
Heres my code
<!doctype html>
<script>
function show(){
s=searchForm.searchField.value;
window.location.replace("https://www.google.com/search?q="+searchField);
}
</style>
<form id="searchForm">
<input type="search" name="searchField" placeholder="Search QuickSearch">
<input type="submit" value="Search" onclick="show()">
</form>
I think what you are trying to do is something like this:
JS:
function show() {
const s = document.getElementById('inputId').value;
window.location.replace("https://www.google.com/search?q=" + s);
}
HTML:
<form id="searchForm" onsubmit="event.preventDefault()">
<input type="search" name="searchField" id="inputId" placeholder="Search QuickSearch">
<input type="submit" value="Search" onclick="show()">
</form>
Related
I am doing the following:
<form action="https://www.google.com/search">
<div>
<input type="text" name="q" id="corners">
</div>
<div>
<input type="submit" value="Google Image Search">
</div>
</form>
However, I want to add additional default text to the URL after the user's input like this:
https://www.google.com/search?q=searchterm&some-additional-text
How can I do this?
The following code uses JavaScript to concatenate https://www.google.com/search?q=, the input value and any additional text, then assigns that string to the action attribute of the form, before submitting the form.
function submitForm() {
var form = document.getElementById("form");
var search = document.getElementById("corners").value;
var additional = "&";
form.setAttribute("action", "https://www.google.com/search?q=" + search + additional);
form.submit();
}
<form action="https://www.google.com/search" id="form">
<div>
<input type="text" name="q" id="corners">
</div>
<div>
<input type="button" value="Google Image Search" onclick="submitForm()">
</div>
</form>
I ended up just using the following:
<div>
<input type="hidden" name="test" value="test" style="display: none;">
<input type="text" name="test">
</div>
::-webkit-validation-bubble-message {
display: none;
}
'
<form>
<input type="text" name="" required="">
<input class="button" type="submit" name="submit" value="Submit">
</form>
How to remove validation-bubble-message in form validation, I have used
::-webkit-validation-bubble-message {
display: none;
}
But it is not working. And request to without using novalidate attribute.
form novalidate="novalidate">
...
form>
and need to used
input required="required"
How to solve this?
You can do it with Javascript like so
Reference: here
document.addEventListener('invalid', (function () {
return function (e) {
e.preventDefault();
document.getElementById("fname").focus();
};
})(), true);
<form action="/action_page.php" method="post">
<input type="text" id="fname" name="fname" required>
<input type="submit" value="Submit">
</form>
I'm trying to append the form action with what the user puts in the text box and having some problems, could someone help me out of this jam?
<form action="http://wfbscd13.cadence.com/cgi-bin/motd.cgi?msg=1&cmd=replace&text=" method="get">
<label for="mestext1"></label>
<input type="text" size="100" maxlength="80">
<input type="submit" name="button1" id="button1" value="Replace">
</form>
If, for some reason, you need your action to be hardcoded:
<form id="myForm" action="http://wfbscd13.cadence.com/cgi-bin/motd.cgi?msg=1&cmd=replace&text=" method="get">
<label for="mestext1"></label>
<input type="text" id="mestext1" size="100" maxlength="80">
<input type="button" name="button1" id="button1" value="Replace" onclick="submitForm();">
</form>
<script type="text/javascript">
function submitForm()
{
var myForm = document.getElementById("myForm");
myForm.action = myForm.action + document.getElementById("mestext1").value;
myForm.submit();
}
</script>
This is not the right way to do it though. You should be adding inputs named msg and cmd and hide them if needed. Then your code will look like this:
<form id="myForm" action="http://wfbscd13.cadence.com/cgi-bin/motd.cgi" method="get">
<label for="mestext1"></label>
<input type="hidden" name="msg" value="1">
<input type="hidden" name="cmd" value="replace">
<input type="text" name="mestext1" id="mestext1" size="100" maxlength="80">
<input type="submit" name="button1" id="button1" value="Replace">
</form>
I have a simple search form with 2 text input fields. Here is the code;
<div id="mini-search-wrapper">
<form role="search" action="/" method="get">
<input type="search" id="s" name="s" class="s-input" required/>
<input type="hidden" name="post_type" value="artist"/>
<input type="submit" class="s-submit" value="Şarkıcı Ara"/>
</form>
<form role="search" action="/" method="get">
<input type="search" id="s" name="s" class="s-input" required />
<input type="hidden" name="post_type" value="lyrics" />
<input type="submit" class="s-submit pos-center" value="Şarkı Ara"/>
</form>
</div>
It looks like that;
Form Image
My problem is;
Position of the cursor starts from second input box when you open this form. I want to change the cursor (caret) position such that when a user click this form, position of the cursor will be in first input box, not second.
How can I choose starting position of cursor when you have many inpux text boxes in a HTML form?
Thanks.
To focus onload:
window.onload=function() {
document.getElementById("s").focus(); // remember IDs must be unique
}
Alternative if you have fields of same name:
window.onload=function() {
document.getElementsByName("s")[0].focus(); // focus first of this name
}
But why two forms?
<form role="search" action="/" method="get">
<input type="search" id="s" name="s" class="s-input" required/>
<input type="hidden" name="post_type" value="artist"/>
<input type="submit" class="s-submit" value="Şarkıcı Ara"
onclick="this.form.post_type.value='artist'"/>
<input type="submit" class="s-submit pos-center" value="Şarkı Ara"
onclick="this.form.post_type.value='lyrics'"/>
</form>
Try to add autofocus attribute to input, like this:
<div id="mini-search-wrapper">
<form role="search" action="/" method="get">
<input type="search" id="s" name="s" class="s-input" required/>
<input type="hidden" name="post_type" value="artist"/>
<input type="submit" class="s-submit" value="Şarkıcı Ara"/>
</form>
<form role="search" action="/" method="get">
<input type="search" id="s" name="s" class="s-input" required autofocus="true"/>
<input type="hidden" name="post_type" value="lyrics" />
<input type="submit" class="s-submit pos-center" value="Şarkı Ara"/>
</form>
</div>
Give your input an unique ID and set the focus onLoad with JQuery's .focus
Like
<div id="mini-search-wrapper">
<form role="search" action="/" method="get">
<input type="search" id="s" name="s" class="s-input" required/>
<input type="hidden" name="post_type" value="artist"/>
<input type="submit" class="s-submit" value="Şarkıcı Ara"/>
</form>
<form role="search" action="/" method="get">
<input type="search" id="s2" name="s" class="s-input" required autofocus="true"/>
<input type="hidden" name="post_type" value="lyrics" />
<input type="submit" class="s-submit pos-center" value="Şarkı Ara"/>
</form>
</div>
JS:
$('input').click(function(){
$('#s').focus();
});
I want to create a form like popup that has a input and a button. When i type in an input Ex.: "good" and click on button it go to the url "good.mydomain.com"
i did this but it doest work
<html>
<form action="firstname.mydomain.com">
Go to URL:<br>
<input type="text" name="firstname" value="">.mydomain.com
<br>
<p>
<input type="submit" value="go">
</p>
</form>
</html>
You could achieve this with jQuery.
The HTML:
<input type="text" id="goTo" name="firstname">.mydomain.com
<input type="submit" id="myButton" value="Go">
Then the jQuery:
$('#myButton').click(function() {
var goTo = $("#goTo").val();
window.location.href = 'http://'+goTo+'.mydomain.com/';
return false;
});
please try below code using javascript.
<html>
<head>
<title>Submit</title>
<script>
function Submit() {
var url = "http://www." + document.getElementById("firstname").value + ".mydomain.com";
window.location.assign(url);
}
</script>
</head>
<body>
Go to URL:<br>
<input type="text" name="firstname" id="firstname" value="">.mydomain.com
<br>
<p>
<input type="button" value="go" onclick="Submit()">
</p>
</body>
</html>