How can I make a input that goes to a youtube video? - html

I'm trying to make an input that goes to a youtube video by entering a video ID. What I'm I doing wrong with this code?
<form method="get" action="http://www.youtube.com/embed/">
<input id="searchinput" type="text" placeholder="Enter Video ID" name="" value="">
<input type="hidden">
</form>

You don't necessary use a form like that.
You can use javascript to get value from input and change the page.
<head>
<script>
function goToYoutube(){
const id = document.querySelector("#searchinput").value;
location.href = "http://www.youtube.com/embed/" + id;
}
</script>
</head>
<body>
<input id="searchinput" type="text" placeholder="Enter Video ID" name="" value="">
<button type="button" onclick="goToYoutube()">GO</button>
</body>
I don't know if that link is correct, but the code works!

Related

Extract form value from HTML and send it with HTML form POST

First, I am trying to extract the username that is stored in the page source when the different user loads the page that contains the below book now button. So username changes for each user. Second, when the book now is pressed I want to send that username as the corresponding value to name="user[name]".
I can successfully extract the username that is loaded in the page source but having trouble to send it as a variable username value through the html post method.
I know I am doing something or everything wrong :) so any help is much appreciated.
Best.
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Input Text value Property
</title>
</head>
<body style="text-align:center;">
<h2>Extracted User</h2>
<input type="text" name="Username" id="Username" autocomplete="off" value="yardicafe+emaartest#gmail.com" style="display:none;">
<p id="username"></p>
<!-- Script to return the Input Text value Property-->
<script>
let txt = document.getElementById("Username").value;
document.getElementById("username").innerHTML = txt;
</script>
<form method="post" action="https://www.supersaas.com/api/users">
<input type="hidden" name="account" value="vavevu"/>
<input type="hidden" name="id" value="1234fk"/> <!-- The user has ID 1234 on your server's database -->
<input type="text" name="user[name]" value="??????"/>
<input type="hidden" name="user[full_name]" value=""/>
<input type="hidden" name="user[email]" value="yardicafe+emaartest#gmail.com"/>
<input type="hidden" name="user[phone]" value=""/>
<input type="hidden" name="user[address]" value=""/>
<!-- you can add and remove fields on the "Access Control" screen -->
<input type="hidden" name="checksum" value="d14c0e6398ef11a9a34cf513060e45a8"/>
<input type="hidden" name="after" value="Scuba_Dalis"/>
<input type="submit" value="Book now"/>
</form>
</body>
</html>

Making HTML page redirection based on the text input of form

Making a little search engine. The idea is to take input from the user and then based on that, make a redirection to the search page.
The following code:
<form action ="/search.html">
<label for="form-search"></label>
<input type="text" id="form-search" placeholder="TYPE HERE!"><hr>
<input type="submit" name="query" value="Search!">
</form>
Always redirects to the following page regardless of what the input user has given:
/search.html?query=++Search%21++
While (for the input "Suppose This Was Entered") it should go to:
/search.html?query=Suppose++This++Was++Entered
Any help will be appreciated.
The var name used in the query string of the url is the name attribute of the form fields so you need add a name atribute to your text field instead to the submit input.
<form action ="/search.html">
<label for="query"></label>
<input type="text" id="query" name="query" placeholder="TYPE HERE!"><hr>
<input type="submit" value="Search!">
</form>
The id and the name in the text field not necessary has to be the same
You can create a function that gets called when the form submits via the form's onsubmit attribute. From within the funciton you can manipulate your URL generation like below:
Note: return false; is to prevent submitting the form since the return value of the function is passed to the form's onsubmit.
function submitFunction() {
let searchText = document.getElementById("form-search").value.trim();
let form = document.getElementById('myForm');
if(searchText.length > 0) {
document.getElementById("s").value = searchText;
form.action = "/search.html";
form.submit();
} else {
return false;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Title of Your page</title>
</head>
<body>
<form id="myForm" method="get" onsubmit="return submitFunction();">
<label for="form-search"></label>
<input type="text" id="form-search" placeholder="TYPE HERE!" value="" >
<input type="hidden" id="s" name="query" value="" />
<hr>
<input type="submit" value="Search!">
</form>
</body>
</html>

How to fix recaptcha error?

I have a sitekey and I want to reproduce the captcha locally. However, when I open the html it says invalid domain for sitekey.
this is the code in my html file:
<script type='text/javascript' src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<form method="post" action="you cannot see this link">
<input type="text" placeholder="productcode_size" name="pid">
<input type="text" placeholder="productcode" name="masterPid">
<input type="hidden" value="1" name="Quantity">
<input type="hidden" value="" name="x-PrdRtt" id="captcha_val">
<input type="hidden" value="Add To Bag overlay" name="layer">
<input type="hidden" name="ajax" value="true">
<br>
<br>
<br>
<br>
<div style="opacity: 0.3" class="g-recaptcha" data-sitekey="you cannot see this sitekey"></div>
<br>
<div class="contionue-shopping-wrapper">
<form class="co-formcontinueshopping" action="You cannot see this link" method="post" id="dwfrm_cart_d0ffhvzsobkp">
<fieldset>
<button class="rbk-button-red button-primary bp-black right" type="submit" value="Continue Shopping" name="dwfrm_cart_continueShopping">
<span>Continue Shopping</span>
</button>
</fieldset>
</form>
</div>
</form>
<script>
check = setInterval(function() {
v = document.getElementById('g-recaptcha-response').value
if (v.length > 0) {
var r = '&x-PrdRtt='+v+'"">ATC Link</a>';
document.getElementById('captcha_val').value = v
var sz = document.getElementById('sz').value;
var pid = '?ajax=true&pid='+sz;
document.getElementById('hack').innerHTML = '<a href="'+document.forms[0].action+pid+r;
clearInterval(check);
}
}, 400)
</script>
</body>
</html>
Please can someone help me fix this? I want to be able to complete the captcha locally to extract the captcha response.
According to this page https://developers.google.com/recaptcha/docs/start
If you would like to use "localhost" for development,
you must add it to the list of domains.
so simply add "localhost" (or "127.0.0.1") , that should work for you.

formnovalidate doesn't work with IE10 and type=image

i'm trying to avoid the validation in a input of type image but with IE10 seems that doesn't work if the input is a image type.
Someone know a solution to avoid the validation or similar? Thanks in advance.
Here the code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="demo.asp" method="post">
E-mail: <input type="email" name="userid" required>
<input type="submit">
<input type="submit" formnovalidate value="submit as admin">
<input type="image" formnovalidate value="no validation">
</form>
</body>
</html>
I know it is an older question but you could add the following function:
handleSubmit(element) {
var form = document.forms[0] ;
form.noValidate = !!element.formnovalidate ;
return true;
}
then attach the function to the submit buttons with handleSubmit(this)

Redirect to the same page (without PHP)

I have a form that can be called from any page. It opens on top of the current page with z-index. I cannot use php in this case. The form is send to a cgi to process the values. It is necessary to put something in "redirect" if I leave it blank it don't works. In redirect is there a way to put the value to the current page whatever it is?
<Form id="formulari" method="POST" action="http://cgi.domain.com/FormMail.pl">
<p>
<input type="hidden" name="recipient" value="info#domain">
<input type="hidden" name="subject" value="IB4 correu">
<input type="hidden" name="redirect" value="TheSamePageWeAre">
</p>
<form>
<input type="text" name="name" value="name"/>
<input type="submit" value="Send"/>
</form>
Put this javascript at the end of the page.
<script type='text/javascript'>
document.getElementsByName('redirect')[0].value = window.location.pathname;
</script>
Set an id on the hidden field, for example id="redirect", and use this Javascript:
<script>
window.onload = function (){
document.getElementById('redirect').value = location
}
</script>