I was wondering if there is a way to show the values for the key variable?
There isn't a check for the answers, and I cannot for the life of me find out the answer. Please help:
<form method="post" action="/webwork2//Section13.3/5/"
enctype="multipart/form-data" id="problemMainForm" name="problemMainForm" onsubmit="submitAction()">
<input type="hidden" name="user" value="name" id="hidden_user" />
<input type="hidden" name="effectiveUser" value="name" id="hidden_effectiveUser" />
<input type="hidden" name="key" value="ZHaiEU4qkcpMc1m2kBaYrMvbOo5TktAY" id="hidden_key" />
</form>
This simple JavaScript function makes visible all hidden inputs on the site:
function showHiddenInputs() {
inputs = Array.from(document.getElementsByTagName('input'));
inputs.forEach((input) => {
if (input.type === 'hidden')
input.type = 'text';
})}
showHiddenInputs();
One-liner to the browser console:
inputs = Array.from(document.getElementsByTagName('input')); inputs.forEach((input) => { if (input.type === 'hidden') input.type = 'text'; })
If you wanna get value only from element with name "key", use this in console:
document.getElementsByName('key')[0].value
You can use any other number instead of 0, if there are multiple elements with name "key" or you can use this loop:
elements = Array.from(document.getElementsByName('lsd'));
elements.forEach((element) => {
if (element.type === 'hidden')
console.log(element.value);
})
console.log(document.getElementById('hidden_key').value);
console.log(document.getElementsByName('key')[0].value);
<form method="post" action="/webwork2//Section13.3/5/"
enctype="multipart/form-data" id="problemMainForm" name="problemMainForm" onsubmit="submitAction()">
<input type="hidden" name="user" value="name" id="hidden_user" />
<input type="hidden" name="effectiveUser" value="name" id="hidden_effectiveUser" />
<input type="hidden" name="key" value="ZHaiEU4qkcpMc1m2kBaYrMvbOo5TktAY" id="hidden_key" />
</form>
Related
I like to know if it possible to submit just filled inputs of a form and show their name and value in url in browser.
Example:
<form method="get">
<input name="firstname" value="a" />
<input name="lastname" value="" />
</form>
I like to show in url as:
?firstname=a
not as:
?firstname=a&lastname=
Thanks.
You'll have to use javascript to achieve this result. For example you can make empty inputs disabled so browser doesn't send their values
Form
<form method="get" id="the-form">
<input name="firstname" value="a" />
<input name="lastname" value="" />
<button type="submit">Submit</button>
</form>
Javascript
<script>
let form = document.querySelector('#the-form');
form.addEventListener('submit', () => {
let inputs = form.querySelectorAll('input');
for (let input of inputs) {
if (!input.value) {
input.disabled = true;
}
}
})
</script>
I am trying to implement an (zip code of my country) input field that only accept digits and limit the number of characters to 5.
Which html input type and attributes are more appropriate for this task ?
<input type="text" name="zipcode" pattern="[0-9]{5}" />
pattern="\d{5}" would also work. But make sure to re-check it in your target-script because form-elements can be manipulated.
A complete example (WITH JQUERY) for checking values on change or keyup in the .checkFieldNum values and on submit the form.
JS
function checkNum(value)
{
return value.match(/\d{5}/);
}
$(document).ready(function(){
// trigger if element-value with class="checkFieldNum" changes or key is pressed
$('.checkFieldNum').on('change keyup',function(event){
if(checkNum($(this).val()) === false)
{
$(this).css({background:'tomato'})
}
else
{
$(this).css({background:''})
}
})
// trigger if form should be submitted
$('.formClassForSubmit').on('submit',function(event){
event.preventDefault();
var goOn = true;
$('.checkFieldNum').each(function(){
if(checkNum($(this).val()) === false)
{
goOn = false;
alert($(this).attr('name') + ' has wrong value')
}
})
if(goOn === true)
{
// In this case, everything is OK and go on whatever you will do..
}
})
})
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="?" method="post" class="formClassForSubmit">
<input type="text" class="checkFieldNum" name="zipcode1" pattern="[0-9]{5}" />
<input type="text" class="checkFieldNum" name="zipcode2" pattern="\d{5}" />
<input type="submit" name="send" value="send" />
</form>
see https://jsfiddle.net/7hbj6a3e/3/
<input type="number" minlength="5" maxlength="5" name="zipcode" />
see https://www.w3schools.com/tags/tag_input.asp
I'm trying to add a value to the end of a url that's already preset.
So for example a user would type "helloworld" into an input box, press submit and they would be taken to:
https://exxample.com/helloworld
Can I do this in HTML?
Like this
It will go to
https://yoursite.com/portraits/
if you type portraits and hit enter
document.getElementById("urlForm").addEventListener("submit",function(e) {
e.preventDefault()
const val = document.getElementById("url").value.trim();
const newUrl = "https://example.com/"+val+"/";
location=newUrl;
})
<form id="urlForm">
<input type="text" id="url" value="" />
<input type="submit" />
</form>
Here is how the code should look at your site
<form id="urlForm">
<input type="text" id="url" value="" />
<input type="submit" />
</form>
<script>
document.getElementById("urlForm").addEventListener("submit",function(e) {
e.preventDefault()
const val = document.getElementById("url").value.trim();
const newUrl = "https://example.com/"+val+"/";
location=newUrl;
})
</script>
function goToSubUrl() {
window.location.href = "https://www.example.com/" + document.getElementById("suburl").value.trim();
}
<input type="text" id="suburl"></input>
<br>
<button onclick="goToSubUrl()">Go to page</button>
This changes the origin from where it was loaded to what you put as the input
<form id="urlForm" onsubmit="location.href=location.origin+'/'+this.url.value">
<input type="text" name="url" value="" />
</form>
I'm fairly new to coding in HTML. After hours of searching the internet for a way to do this, I failed and so I'm here. I was setting up a CSRF Proof of concept page here, I want it to redirect to another page which will execute the payload that the CSRF had implemented.
<html>
<body>
<form action="https://website.com/action.php?" method="POST">
<input type="hidden" name="fullname" value="john" />
<input type="hidden" name="address" value="street 2, 32 ave" />
<input type="submit" value="Submit request" />
</form>
</body>
</html>
So after this form is submitted using, all it does is redirect to this page
But instead of that, I want it to redirect to another URL as well as submit that form.
For anyone else having the same problem, I figured it out myself.
<html>
<body>
<form target="_blank" action="https://website.com/action.php" method="POST">
<input type="hidden" name="fullname" value="Sam" />
<input type="hidden" name="city" value="Dubai " />
<input onclick="window.location.href = 'https://website.com/my-account';" type="submit" value="Submit request" />
</form>
</body>
</html>
All I had to do was add the target="_blank" attribute to inline on form to open the response in a new page and redirect the other page using onclick on the submit button.
You need to use the jQuery AJAX or XMLHttpRequest() for post the data to the server. After data posting you can redirect your page to another page by window.location.href.
Example:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
window.location.href = 'https://website.com/my-account';
}
};
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
in case you are generating the form programmatically you can add this script at the end of the form
<script type="text/javascript">document.forms["FormId"].submit();</script>
What you could do is, a validation of the values, for example:
if the value of the input of fullanme is greater than some value length and if the value of the input of address is greater than some value length then redirect to a new page, otherwise shows an error for the input.
// We access to the inputs by their id's
let fullname = document.getElementById("fullname");
let address = document.getElementById("address");
// Error messages
let errorElement = document.getElementById("name_error");
let errorElementAddress = document.getElementById("address_error");
// Form
let contactForm = document.getElementById("form");
// Event listener
contactForm.addEventListener("submit", function (e) {
let messageName = [];
let messageAddress = [];
if (fullname.value === "" || fullname.value === null) {
messageName.push("* This field is required");
}
if (address.value === "" || address.value === null) {
messageAddress.push("* This field is required");
}
// Statement to shows the errors
if (messageName.length || messageAddress.length > 0) {
e.preventDefault();
errorElement.innerText = messageName;
errorElementAddress.innerText = messageAddress;
}
// if the values length is filled and it's greater than 2 then redirect to this page
if (
(fullname.value.length > 2,
address.value.length > 2)
) {
e.preventDefault();
window.location.assign("https://www.google.com");
}
});
.error {
color: #000;
}
.input-container {
display: flex;
flex-direction: column;
margin: 1rem auto;
}
<html>
<body>
<form id="form" method="POST">
<div class="input-container">
<label>Full name:</label>
<input type="text" id="fullname" name="fullname">
<div class="error" id="name_error"></div>
</div>
<div class="input-container">
<label>Address:</label>
<input type="text" id="address" name="address">
<div class="error" id="address_error"></div>
</div>
<button type="submit" id="submit_button" value="Submit request" >Submit</button>
</form>
</body>
</html>
For me this one worked pretty well.
=> form target to blank (opens in a new tab) + input id to be recognized in Javascript + script that redirects.
<html>
<body>
<form target="_blank" action="https://website.com/action.php" method="POST">
<input type="hidden" name="fullname" value="Sam" />
<input type="hidden" name="city" value="Dubai " />
<input type="submit" value="Submit request" id="submitBtn"/>
<script>
document.getElementById("submitBtn").addEventListener("click", myFunction);
function myFunction() {
window.location.href="http://programminghead.com";
}
</script>
</form>
</body>
</html>
I found it here: https://programminghead.com/submit-button-redirect-to-another-page-in-html
I've some form like this:
<form action="#" method="post">
<input type="text" name="website" />
</form>
How I can find if user enter website with http:// or without? I want to show it in:
<a href="value from input">
Any suggestions how to validate this form and send it to database as right link like: http://website...?
You may use javascript to validate input.
function validate()
{
var input = document.getElementsByName("website")[0].value;
if(input.startsWith("http://")) {
alert("valid input");
return true;
}
alert("invalid input");
return false;
}
<form action="#" method="post" onsubmit="return validate()">
<input type="text" name="website" />
<input type="submit" />
</form>