jQuery .load() not letting me fill input text - javascript

I'm a noob at coding, and I'd like some help on this. I have a page (index.php) that checks if cart is empty or, if it's not empty, from another page (data.php) using jQuery.
If It's empty, it will say it's empty and if it's not empty, it will display a form where you can enter your name and submit.
When the cart is empty, it does display the form, but I'm unable to type anything because of the refresh. Would like a solution to this or an alternate method. Thanks in advance!!
Index.php
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js'></script>
<title>Document</title>
</head>
<body>
<script>
$(function () {
function loadData() {
$('#loaddata').load('data.php');
}
setInterval(function () {
loadData();
}, 5000);
});
</script>
<div id='loaddata'></div>
</body>
</html>
data.php
<?php
if (empty($_SESSION['cart'])) {
?>
<h1>Cart Empty</h1>
<?php
} else {
?>
<form action="" method="post">
<input type="text" name="f_name">
<input type="text" name="l_name">
<input type="submit" value="submit">
</form>
<?php
}
?>

You need to rethink your logic. You must somehow know when to update your #loaddata, instead of calling it on a set timer.
The best practice would be to add the loadData() in all your add to cart and remove from cart functions.
The simpler way, based on your code would be to fetch whether your cart is empty before loading the data.php and only if its status has changed update it.

Related

Pure Javascript: How to keep form inputs after submit without PHP?

Javascript beginner here - I looked up a bunch of answers on similar questions, but they all use PHP which I don't know anything about. I was hoping to do the following in pure Javascript:
I have a input field and a button:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<form>
<label for="someNum">Some number:</label>
<input type="number" id="someNum">
<input type="submit" id="button" value="Submit">
</form>
<script src="script.js"></script>
</body>
</html>
When I hit "Submit", I want to console.log the value of someNum:
const button = document.getElementById("button")
button.addEventListener("click", calculate)
function calculate () {
let someNum = document.getElementById("someNum").value
console.log(someNum)
}
However, upon clicking "Submit", the value entered by the user is no longer shown in the form. How do I prevent that?

XSS injection and innerhtml

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.

Is there a conditional javascript code to insert url specific meta values?

I would like to insert a custom meta value into a specific page only. This site is very old and database driven, creating custom meta field is not an option.
I would like to insert a javascript function, that could insert a meta value for a specific URL only?
<META name="my-advertisement" content="none">
into /about-me
I have tried multiple conditional codes I have found online but not have helped. It does not insert into the header section with the page meta title etc.
<script type="text/javascript">
$(document).ready(function() {
if (document.location.pathname === '/win') {
$("head").append('<meta name="mrf-advertisement" content="" />');
}
});
</script>
Sorry, I don't have enough reputation to comment, so I'm using the answer field.
Based in your question I'm supposing that you have permission to write <script> tags in <head>, if is it right, you could try to do in this way:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
if(true) // change to => if (document.location.pathname === '/win')
document.write( '<meta name="mrf-advertisement" content="" />' );
</script>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

TinyMCE with Ajax: How to return POST response to display in TinyMCE?

So, I can send a Post to my PHP program and it can send a response to a div on my HTML page. However, what I want to do is have this response display in the TinyMCE editor and NOT in the div area. How do I adapt my code to do that?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>getdata</title>
<script type="text/javascript" src="tinymce/js/jquery.min.js"></script>
<script type="text/javascript" src="tinymce/plugin/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="tinymce/plugin/tinymce/init-tinymce.js"></script>
<script type="text/javascript">
function post()
{
tinyMCE.triggerSave();
var documentx= $('#texteditor').val();
$.post('validate.php',{postdocument:documentx},
function (data)
{
$('#data-container').html(data);
} );
}
</script>
</head>
<body>
<form id="get-data-form" method="post">
<textarea class="tinymce" id="texteditor"> </textarea>
<input type="button" value="submit" onclick="post();" />
</form>
<div id="data-container"> </div>
</body>
</html>
When the data is sent back via JavaScript just use the appropriate TinyMCE API to set the content:
https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#setcontent
...placing it back into the underlying textarea won't do anything unless you remove and re-init the editor.
EDIT: Please see this TinyMCE Fiddle for a fully working example: http://fiddle.tinymce.com/aPfaab

Keep dynamic changes when saving webpage in ie11

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?

Categories