I want to be able to put my variable in my html action="" so that i can change the search engine I use in one click. instead of having to make another html page.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="searchbar">
<form action="[SEARCH VAR]" method="get">
<input autocomplete="off" type="text" name="q" placeholder=searchvar id="mySearch">
</form>
</p>
<button type="button" onclick="var search=https://www.duckduckgo.com/">
duckduckgo
</button>
<p id="demo"></p>
</div>
</body>
</html>
is there anyway to do it with this code.
You cannot have arbitrary HTML attributes be evaluated as JavaScript. Instead you'd use the DOM API to change the action property of the form element.
function setSearchEngine(engine) {
document.querySelector('form').action = engine;
}
Use as
<button type="button" onclick="setSearchEngine('https://www.duckduckgo.com/')">
duckduckgo
</button>
Related
I have a form where I have a file input field, where I can choose multiple files. Now the problem is that
If I choose 3 files then it should create 3 input fields having files from 1 to 3. Eg can be seen below.
I want to to do it using jquery. The code which i have written is
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<form name="form" class="form-group" method="post" action="" enctype="multipart/form-data">
<input type="file" id="track" name="tracks" multiple>
<button type="button" id="btn-submit"> Upload</button>
<script>
$(document).on("click", "#btn-submit", function() {
});
</script>
</body>
</html>
What approach or methodologies should I use to get the result expected?
Any help is appreciated.
I am trying to learn about XSS vulnerabilities and am having some issue grasping the concept. I have a test site http://mytestpage/index.html and am trying to launch an alert box via xss from a secondary page http://xsstest.html. I can not seem to get the alert to occur. I think my issue is that the code from my xsstest page is not injecting into my mytestpage/index.html page. I am trying to use innerhtml as the posts I read seemed to leverage this in XSS testing. I am fairly certain that I am not using the innerhtml correctly or pehaps it is not the right "tool for the job" and i am running down the wrong path. Any suggestions would be appreciated.
My code for the XSS test is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>XSS TEST PAGE</title>
</head>
<body>
<body onload="document.forms[0].submit()">
<form method="POST" id="test" onsubmit="test()" action="http://mytestpage/index.html" >
</form>
</body>
<script>
function test(){
alert("Hiya buddy!");
}
document.getElementById().innerHTML = test();
</script>
</html>
The test homepage code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Test Home Page</title>
</head>
<body>
<form method="post">
<label>Enter Your Name:</label>
<input type="text" name="myname">
<button class="btn" type="submit" name="action" value="submit">Submit</button>
</form>
</body>
</html>
This right here is no bueno:
<script>
function test( ){
alert("Hiya buddy!");
}
document.getElementById().innerHTML = test();
</script>
document.getElementById() requires you pass it the ID of an element. So, for example, if there's a div on the page with the ID of #alert, you'd do document.getElementById('alert').
You also can't assign a function to the inner HTML of an element. You need to create a script element and then append it to the document or another element. Instead, try:
<script>
let myTest = document.createElement('script')
myTest.text = `
function test() {
alert('Hiya buddy!')
};
test();
`
const body = document.querySelector('body')
body.appendChild(myTest)
</script>
You are not doing XSS. You are simply displaying alert upon form submission. That too has error that document.getElementById() requires a id to select the element.
XSS is done where you have some input to enter. SO you cannot do XSS in XSStest page but you can do it from test home page code by changing it as
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Test Home Page</title>
</head>
<body>
<form method="post" action="some page url">
<label>Enter Your Name:</label>
<input type="text" name="myname">
<button class="btn" type="submit" name="action" value="submit">Submit</button>
</form>
</body>
And Suppose the page whose url you have given in action attribute is like
<!DOCTYPE html>
<HTML>
<body>
Name is: <%=request.getParameter("myname")%>
</body>
</HTML>
I have assumed you are using jsp here.
Now when you enter XSS payload in inputbox in this page and submit it the page whose url you have given will open up and display the alert as you have not sanitized the input value before using it in second page.
I want to pass values between 2 HTML pages using POST method. I have lot of data to be passed to 2nd page and cannot use GET. My issue is I do no know how to pass values to second HTML page and how do i display user name on page 2. please explain!!!
Here page1.html code:
<html>
<head>
<title>Form</title>
</head>
<body>
<h4>Enter your name</h4>
<form name="form1" method="post" action="page2.html">
<input type="text" name="username">
<input type="submit" onclick="submitForm()">
</form>
<script type="text/javascript">
function submitForm()
{
form1.submit();
}
</script>
</body>
</html>
Here page2.html code:
<html>
<head>
</head>
<body>
....... dont know how to display username entered on page1.html here...
</body>
</html>
Try this
<html>
<head>
</head>
<body>
<?php
if(isset($_POST["username"]))
{
echo $_POST["username"];
}
?>
</body>
</html>
And if you want to do this with javascript then readout about AJAX
ajax Tutorial
I need to save a webpage to the filesystem using the Save Webpage function while keeping changes done with javascript. I have an input field where you can type in your name and save it, which is then displayed on the website. If i use Save As... in firefox my changes are saved in the resulting html file. When i use IE11 i get the original source code without my user input.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<script>
function saveUser(form) {
var form = document.getElementById('saveUserForm');
form.previousElementSibling.innerHTML = form.previousElementSibling.innerHTML + "<br />Created by: " + form.name.value;
form.parentNode.removeChild(form);
}
</script>
</head>
<body>
<div>
<h1>Test Page</h1>
<p>Created at: Today
<form class="userForm" id="saveUserForm" action="" method="get">
<label for="name">Created by: </label>
<input id="name" name="name">
<input type="button" name="button" value="Save" onclick="saveUser(this.form)" />
</form>
</p>
</div>
</body>
</html>
Can anybody make any suggestions on how to keep dynamic changes when saving a web page in IE11?
I am trying to understand the basics of templating and have the following problem. When I try to attach ID or/and type attribute to the <script> tag in my HTML code it just doesn't work:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="somescript.js"></script>
</head>
<body>
<script type="text/html" id="template1">
<form name="formXY">
<p>
<label>Field1
<input type="text" name="form_field1" value= "{{field1}}">
</label>
<button type="button">Submit</button>
</p>
</form>
</script>
</body>
</html>
I ran this in chrome/firefox/IE9/Opera and none of them parse the code between the <script> tags. Browsers think it is just a text field. When I remove ID and type attributes it is again parsed correctly.
I am probably missing something very basic...
You need to add a non javascript type to the script tag, as the point is that you don't want the browser to parse it (as javascript), and by using a custom type the browser will ignore it (until you grab it with javascript that is)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="somescript.js"></script>
</head>
<body>
<script type="text/x-handlebars-template" id="template1">
<form name="formXY">
<p>
<label>Field1
<input type="text" name="form_field1" value= "{{field1}}">
</label>
<button type="button">Submit</button>
</p>
</form>
</script>
</body>
</html>
And then in your javascript somescript.js you need to get the contents of that script tag using something like this
var uncompiledTemplate = document.getElementById('template1').innerHtml;
// then pass this template to your templating engine...
// if your using handlebars:
var template = Handlebars.compile(uncompiledTemplate);
And then you can work with your template!
The content of the <script> tag is never parsed into DOM elements, the contents simply appear in the DOM as text (although <script> is display:none; by default so it does not appear on the page). If a type is provided has to be one that the browser recognises before it attempts to execute it. Note that older browsers used the language attribute instead.