<head>
<script language='javascript' type='text/javascript'>
function insertTemplate() {
console.log('something is coming out');
if (document.getElementById('template').checked) {
var test = "lore ipsum";
document.getElementById('message') = test;
alert(test);
}
else (
var nothing = '';
document.getElementById('message') = nothing;
)
}
</script>
</head>
<body>
<form class='form-horizontal' role='form' method='post'>
{{ csrf_field() }}
<input type='text' name='address'><br>
<input type='text' name='subject'><br>
<input type='checkbox' name='template' id='template' onclick = "insertTemplate()"> Insert in template</br>
<input type='text' name='message' id = 'message' style='width:500px;height:500px;'><br>
<button type='submit'>Submit</button>
</form>
</body>
I am creating an application using Laravel. I am trying to populate a text field with text when the user clicks on a checkbox. However, I keep on getting "Uncaught ReferenceError: insertTemplate is not defined" as an error whenever I check the box. I seem to have stated the function on the "onclick" attribute of the input and have defined the function. I have no idea what I am doing wrong.
Your else block was delimited by parentheses instead of curly braces.
<form class='form-horizontal' role='form' method='post'>
{{ csrf_field() }}
<input type='text' name='address'><br>
<input type='text' name='subject'><br>
<input type='checkbox' name='template' id='template' onclick = "insertTemplate()"> Insert in template<br>
<input type='text' name='message' id = 'message' style='width:500px;height:500px;'><br>
<button type='submit'>Submit</button>
</form>
<script>
function insertTemplate() {
console.log('something is coming out');
var test = "lore ipsum"
var nothing = "";
if (document.getElementById('template').checked) {
document.getElementById('message').textContent = test;
alert(test);
} else {
document.getElementById('message').textContent = nothing;
}
}
</script>
Related
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'm trying to complete or submit an input on enter press instead of clicking a submit button. Is this possible purely through a directive? Or must I add some JS?
Here's my input:
<input type="text" ng-model='main.input' placeholder='some text' required=''/>
Use ng-keyup native directive on the input and fire up ng-submit on the form:
<form ng-submit="submitFunc()">
<input type="text" ng-model='main.input' placeholder='some text' required='' ng-keyup="$event.keyCode == 13 && submitFunc()"/>
</form>
You can use ng-submit to submit your form on enter button click. See the example below,
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.text = 'hello';
$scope.submit = function() {
if ($scope.text) {
$scope.enterText = this.text;
$scope.text = '';
}
};
}
]);
</script>
<div ng-app="submitExample">
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{enterText}}</pre>
</form>
</div>
i'm not a very good programmer at all but i need a little help with a webpage i'm making.
Here's what I have for a form:
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="submit" value="Submit">
</form>
What I want it to do is if I put in the name Fred and press submit Button, it will go to a certain page. Any other name will link to another page or popup with an error saying, "tough luck!" or something like that.
Sorry, I couldn't find anything this specific on the web anywhere. I'm sure it's simple, I'm just confused with how this works. Thank you!
using front-end only, i'd be using javascript or jquery. meaning you don't need a form element inside it.
<script>
$("#submitButton").click(function(){
window.location.replace("enter url here")
})
</script>
you can do it with JS/jQuery:
HTML
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name" id="name">
<input type="submit" id="submit-button" value="Submit">
</form>
JS
$("#submit-button").click(function(){
if ($("#name").val() == "Fred")
location.href = "goodurl";
else
location.href = "badurl";
});
There are 2 options to solve this problem.
To use JavaScript for input value's validation and depending on it to redirect user
To use server side language to check the passed value
The first option will be easier for you I guess.
You can do something like:
Name: <input type="text" name="name">
<input type="button" value="Submit" onClick="redirect();">
<script type="text/javascript">
function redirect() {
var value = document.getElementsByName('name')[0].value;
if (value == 'Fred') {
window.location.href='http://url1';
} else {
window.location.href='http://url2';
}
}
</script>
Links: 'url1' and 'url2' must be replaced with your URLs
Just add the following code in your HTML file and try it out:
<script type="text/javascript">
function handleSubmit() {
var name = document.input.name.value;
if(name == 'Fred') {
location.href = "http://www.google.com";
} else if (name == 'Jack') {
location.href = "http://www.yahoo.com";
} else {
alert("Tough Luck");
}
}
</script>
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="button" value="Submit" onclick="handleSubmit();">
</form>
i am trying to assign a textbox value to a php variable now problem is i want one button to work for two different pages i.e if i enter in a text box 'a'and click on button it should redirect to 'a.php' page if i write in a text box 'b' it should redirect to 'b.php'.
so one textbox,one button two different pages.
Code :
<html><head>
<meta charset="UTF-8" />
<script>
function submitForm(action)
{
document.getElementById('a').action = action;
document.getElementById('a').submit();
}
function submitForm1(action)
{
document.getElementById('b').action = action;
document.getElementById('b').submit();
}
</script>
</head>
<body >
<h3><font face="verdana" size="3"><b>Enter Text:</b></h3>
<input type="text" align="right" style="font-size:15pt;height:32px;"><br><br>
<form action="b.php" name="b" id="b" method="post">
<form action="a.php" name="a" id="a" method="post">
<input type="submit" onclick="submitForm('a.php')" value="TRY" name="a">
<input type="button" onclick="submitForm1('b.php')" value="TRY" name="b">
</form>
</form>
</body>
</html>
You can change the action onsubmit based on the text inside the input.
<html>
<head>
<script type="text/javascript">
function onsubmit_handler(){
var myForm = document.getElementById('myForm');
var data = document.getElementById('data').value;
if(data == "a")
myForm.setAttribute('action', 'a.php');
else if(data == "b")
myForm.setAttribute('action', 'b.php');
else
myForm.setAttribute('action', 'error.php');
}
</script>
</head>
<body>
<h3>Enter Text:</h3>
<form id="myForm" method="post" onsubmit="onsubmit_handler()">
<input type="text" id="data" name="data" value="">
<input type="submit" value="Post">
</form>
</body>
</html>
Test code here : http://jsfiddle.net/Eg9S4/
use this codes buddy
<html><head>
<meta charset="UTF-8" />
<script>
function submitForm()
{
var link=document.getElementById('a');
var str1 = "a.php";
var n = str1.localeCompare(link);
if(n==1)
{
window.open("main.html");
}
else if(n==-1)
{
window.open("index.html");
}
}
</script>
</head>
<body >
<h3><font face="verdana" size="3"><b>Enter Text:</b></h3>
<input type="text" align="right" style="font-size:15pt;height:32px;"><br><br>
<input type="submit" onclick="submitForm()" value="TRY" name="a">
</form>
</form>
</body>
</html>
The problem looks to be that you're using getElementById but the input elements don't have an ID (they only have a name).
I'd also recommend attaching an onSubmit event to the form and removing the onClick events from the buttons.
Edit: After looking at the code in detail I saw that there were some other issues that were probably hindering the opersation. The most notable one was that you can't nest form tags. There were some other CSS and validation issues.
Here is some working code:
Test Page
function SubmitForm(el) {
// Get the form element so that we can set the action later
var form = document.getElementById('theForm');
// Set the action for the form based on which button was clicked
if (el.id == "A")
form.action = "a.php";
if (el.id == "B")
form.action = "b.php";
// You dont need to submit the form. It's alreasdy happening, so there is no need for an explicit call.
}
</script>
<h3 style="font-family: Verdana; font-weight: bold;">Enter Text:</h3>
<input type="text" style="font-size:15pt;height:32px;"><br><br>
<form method="post" onsubmit="SubmitForm();" action="fake.html" id="theForm">
<input type="submit" id="A" value="A" onclick="SubmitForm(this);">
<input type="submit" id="B" value="B" onclick="SubmitForm(this);">
</form>
I have created 1 jsp page that contain html form, while submitting html form i have checked input string for not contain any single quote(') or colon(:)
<form action="" method="post" onsubmit="return toValidate('demo')>
<input name="demo" id="demo" />
<input type="submit" value="submit"/>
</form>
Javascript function:
function toValidate(id){
var str = "";
for(var i=0; i<val.length;i++) {
if (val[i] == "'" || val[i] == ":") {
alert(" ' and : not allowed");
return false;
}
else
{
str =str+val[i];
document.getElementById(id).value=str;
}
}
}
My question is that how can i restrict input field using html5 pattern...?
I modified your HTML code with the validation using HTML5 regular expression
<form action="" method="post">
<input name="demo" type="text" id="demo" pattern="[^':]*$" />
<input type="submit" value="submit"/>
</form>
See fiddle here:
http://jsfiddle.net/mzDt9/