I'm testing a page I made in PHP for HTML injections, but it's not working the way I expected.
I'm trying to insert
<div onmouseover="alert(1)" style="position:fixed;left:0;top:0;width:9999px;height:9999px;">
</div>
inside a textarea. Server-side, I just want to display $_GET with a var_dump for now but it doesn't even get to that: when I click the button it just brings me back to the homepage and #3377832596384266514 is added to the URL. I don't get any error in PHP so maybe it's a server issue (Apache 2.4).
I'm guessing some part of the stack is being defensive, like when you add javascript: to a URL and the browser gets rid of it, but I don't know where to look. I've also tried
<script>alert(foo);</script>
and other variations but then the < and some other characters are stripped.
test.php
<!doctype html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<form method="get" action="select.php">
<p>
<label for="select">Words
<textarea id="select"
name="select"
cols="50"
rows="1"
maxlength="100"
required
autofocus></textarea>
</label>
</p>
<p>
<button>Send</button>
</p>
</form>
</body>
</html>
select.php
<?php
var_dump($_GET);
Edit: textarea instead of input.
Edit: added all the code.
Change the form method from GET to POST.
GET is possibly causing an issue with how the server handles certain markup in the URL.
OP verified this resolved the issue.
Input tags can't have any content, that's why you can set it as an self-closing element <input />
maybe you need another approach
Related
Here I'm trying to make a QnA website. So here is the HTML code.
<!DOCTYPE html>
<html>
<head>
<title>Questions</title>
</head>
<body>
<h1>Questions</h1>
<form action="questions.php" method="post" onsubmit='event.preventDefault() ;sendForm1("ask-question")' name="ask-question">
<h3>Ask a Question</h3>
<!--Adds textarea field to write a question-->
<textarea name="ask-question" rows=5 cols=25 id="your-question">Why do you want to draw art?</textarea><br>
<!--Submit button to send question to email and redirects to result.html without opening an email inbox. The problem is I have no idea how to make it send to my email.-->
<input type=submit value=Ask name=ask>
</form>
Go back home
<br>
<p>No Questions available yet!</p>
<h2>Be the First to ask!</h2>
<h3>Type the question in the text box then click Ask</h3>or go to FAQ
</body>
</html>
Here i put some meanings about the code and you'll find out most problems but the main problem is I can't get the Submit button to work. Or some it just reloads the website.
Here is the preview of the code.
How can I fix this?
The code isn't working because you are using onsubmit = event.preventDefault() which prevents the default behaviour of form submission. That's why you are not getting redirected to the result.html page. Remove the event.preventDefault() and this should be working
I am trying to get a hyperlink element to act as a form submit button. This sort of question has been answered multiple times over the years but, for some reason, I am not able to get it to work even with cut-n-pasted code and I'm wondering if I'm missing something trivially simple that my eyes are too bugged out to see. The full code is here:
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function signup() {
alert("Form is " + document.signup_form);
document.signup_form.submit() ;
}
-->
</script>
</head>
<body>
<?php
echo("Submit is [" . $_POST['submit'] . "]");
?>
<form method="post" name="signup_form" id="signup_form" action="" >
<input type="text" name="from_email" placeholder="e-mail address"><br>
<input type="submit" name="submit" value="Send Email">
Sign Up!<br>
</form>
</body>
</html>
The input submit element ("Send Email") works fine. The hyperlink ("Sign Up!") also works fine and calls the javascript function so that the alert() box in the function shows up.
So, it's just the submit() call that's not doing anything--I even printed out document.signup_form in an alert() box to confirm that it's defined (it is). So what am I missing here?
Thanks for any help!
There is a weird thing with how forms work with Javascript - each field is accessible by using formElement.fieldName. Unfortunately, that means that if you name a field input submit, all of a sudden the built-in formElement.submit() function is replaced by your input element. So in your code, document.signup_form.submit() is failing because it is calling the element, not the method, and you can't call an element as a function. See this SO QA for details.
The fix is easy - change:
<input type="submit" name="submit" value="Send Email">
to:
<input type="submit" name="submitBtn" value="Send Email">
Also, as others have noted, you will want to give your form a valid action. Also, in general it might be preferred to access things by id (document.getElementById()) instead of by things like document.signup_form.
Your <form> element is missing a value in it's action attribute. Quoting the specs:
You also have to specify the URL of the service that will handle the
submitted data, using the action attribute
Link here
I'm very new to coding, so please forgive me if this is a dumb question.
I'm working on an assignment where I have to add functionality and styles to an existing bootstrap HTML doc. The purpose is to allow people to enter a dollar amount into an input field either by typing in an amount or by clicking buttons that populate the field with set amounts. One of my instructions was to update the donate submit button so that it appends the chosen donation amount to the "/thank-you" URL.
This is what I have for the input field:
<form id="amountSend">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount"/>
</form>
This is what I have for the button:
<button id="donateBtn" type="submit" action="/thank-you"
method="get">DONATE<span class="metric-amount"></span></button>
And I was thinking that the jQuery would look something like this, though the submit function is not currently giving me any visible results.
$("#donateBtn").click(function() {
if (!$.isNumeric($("#other-amount").val())) {
$("#dataWarning").show();
$(".metric-amount").hide();
$(".metric-message").hide();
} else {
$("#amountSend").submit(function() {
var url = "/thank-you";
$(".metric-amount").appendTo("url");
});
}
})
I also got some decent results using a PHP method:
<form id="amountSend" method="post" action="/thank-you.php">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount" name="donation"></input>
</form>
<button id="donateBtn" type="submit">DONATE<span class="metric-amount"></span></button>
<script>
$("#donateBtn").click(function() {
if (!$.isNumeric($("#other-amount").val())) {
$("#dataWarning").show();
$(".metric-amount").hide();
$(".metric-message").hide();
} else {
$("#amountSend").submit();
}
});
</script>
This one will open the PHP file I set up (/thank-you.php, which i have stored just in the same root folder as my main HTML doc), but all the browser gives me is the raw HTML code of the PHP file. Here's the code I have in the PHP file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
Thank you for your donation of
<?php echo $_POST["donation"]; ?><br>
</body>
</html>
Anyway, I guess I'm wondering if I'm on the right track? Should I pursue the jQuery or PHP method? Can I even do this using only jQuery? I've seen a few posts on this subject already, but I thought I'd make a new one since the ones I've seen are all fairly vague, I haven't seen the same answer twice, and I'm not sure I fully understand exactly what I'm trying to accomplish, in terms of a visual confirmation of results.
Thanks!
First of all, you have several issues with your code.
Number one: The formulary you have there is bad coded, the form tag needs to have the action and method attributes, not the submit button.
And in top of that, the submit button needs to be inside the form tag, if is not in there, it will not have and kind of effect.
Number two: If you are gonna submit the formulary to a php file and handle the request there ,you need the file to be running on a server (local or whatever). PHP is a server language, if you open the file directly in a browser, it will show you the code it has inside and will not work.
Hope it helps!
I have a beginner question. What is the easiest way to take data from a form on one html page and display it on another when the user clicks submit? I have two functions, a Submit() that calls the display() function (the display function displays the data on the page). I first displayed the result on the index.html page but realized it was too cluttered so I opted to print the results to a separate html page. However, I cannot recall the proper way of doing this. I tried putting location.href='results.html' inside my display() function by it didn't work.
You can use just HTML + Javascript to achieve this.
Just create a form with method="get". So the values will be passed by querystring to the another page.
Example:
index.html
<html>
<form method="get" action="results.html">
<input type="text" name="age" />
<input type="submit" value="Send" />
</form>
</html>
results.html
<html>
<h1></h1>
<script>
document.querySelector("h1").innerHTML = window.location.search.substring(1);
</script>
</html>
Whilst technically this is possible using HTML5 local storage, the best solution to your question is to use a server side language such as PHP, which you can read up on here as a beginners tutorial, or in more detail on the PHP Manual
Hope this helps
Here is an example. Write your html page (e.g. "index.html") like
<html>
<head>
<title>form with output</title>
</head>
<body>
<form target="out" action="tst.php">
<input type="text" name="a">
<input type="text" name="b">
<input type="submit" name="sub" value="OK">
</form>
</body>
</html>
and, assuming you have PHP available on your webserver you can write a second (php) script (filename: "tst.php") like this
<?php
echo json_encode($_REQUEST);
?>
(The php script simply outputs all passed variables as a JSON string). The important thing that will redirect your form's output into a separate window is the target="out" part in the <form> tag.
This is a sample of my form. when the page loads the focus must be on 'fbox' but it dosent work and i don understand why. the form contains a niceditor but i dont think that is the problem
<html>
<head></head>
<body onload="document.form.fbox.focus();">
<body>
<form method='post' action='' name='form' >
Headline <input name='fbox' type='text' class='form' id='box' autocomplete='off' size='80'><br>
Your text</font><br><script type="text/javascript" src="nicEdit.js"></script><script type="text/javascript">bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });</script>
<textarea name="description" style="width: 100%; height:200px;"></textarea></p>
<p><select name='catg' >
<option value='' selected >Select category</option>
</select>
<input type="submit" id='button' name="Submit" value="Submit" class="button"></form>
</body></html>
thanks
You've got two body tags. I suggest getting rid of one of them and seeing if that helps.
There's also a stray closing </font> tag in the middle of that code. Many people try to arrange their markup so that it's easy to read and to see the structure of the document. You might want to explore that practice.
Another possibility is that your "nicEdit" plugin is un-doing the ".focus()" call. Try taking that out and seeing if the focus works (as an experiment). If that's happening, then you can do your "focus()" call after the nicEdit code has finished:
bkLib.onDomLoaded(function() {
nicEditors.allTextAreas();
document.form.fbox.focus();
});
(That's an adaptation of the code in your existing <script> block.)
You have two body elements. That won't work.
Scripts run top-to-bottom, so you're firing the "onload" before the rest of the page has rendered. It's likely the element you are trying to focus is not there when the event fires.
There are a number of ways to fix this. jQuery has a handy method that waits until the DOM is ready.
A simple way is simply to run your script from the bottom of the page in a script block.
<script type="text/javascript">
document.form.fbox.focus()
</script>