Very new to Javascript. I would like to pass a timestamp to a form when the user clicks a button, but I'm having trouble with getting the actual value to submit.
<html>
<head>
<script type="text/javascript">
var dateOfUser = new Date();
document.getElementById("userdate").value = dateOfUser;
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
// hide the content from user until they click the button
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#ans").show();
});
});
</script>
</head>
<body>
<p>
Click the button to see the text.
</p>
<p><button type="button" id="show" onclick="userdate = new Date()">Show text</button></p>
<div id="ans" style="display:none">
<input type="hidden" id="userdate" name="timestamp" value="dateOfUser">
Here is the hidden text.
</div>
</body>
I've omitted the form submission code - unfortunately I did not write it and I don't have access to the code beyond using it for form submission.
But upon submission, the .csv file contains:
"timestamp":"dateOfUser"
And not the value of "userdate". As far as I understand, using document.getElementById("userdate").value = dateOfUser; should allow me to use "userdate" in the HTML.
Any help would be appreciated, I've poured over many similar questions on this site and others, but I am having trouble figuring out what I'm doing wrong.
you can remove the type="hidden" to test. At least it works for me using userdate.value.
<html>
<head>
</head>
<body>
<p>
Click the button to see the text.
</p>
<p><button type="button" id="show">Show text</button></p>
<div id="ans" style="display:none">
<input id="userdate" name="timestamp" value="dateOfUser">
Here is the hidden text.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
// hide the content from user until they click the button
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#ans").show();
$("#userdate")[0].value = new Date()
});
});
</script>
</body>
The way you put script above the body
<script type="text/javascript">
var dateOfUser = new Date();
document.getElementById("userdate").value = dateOfUser;
</script>
wouldn't work because the dom(i.e. the elements) has not loaded. While onclick and $(document).ready are different from the above way.
However, it's still better for you to put script at the bottom of body.
Related
I want to execute the javascript code through php when the submit button is clicked......this code does it but the page refreshes.....i dont want the page to refresh......can I achieve it through ajax or jquery and how?
<html>
<head>
<style>
.popup
{
visibility:hidden;
}
</style>
</head>
<body>
<form method="post">
<div id="Popup" class="popup">
Sorry! The vehicle is already booked on the corresponding date.
Select a different date or book another vehicle.
</div>
<input type="submit" name="submit" value="display">
</form>
<?php
if(isset($_POST["submit"]))
{
echo '<script>document.getElementById("Popup").style.visibility="visible";</script>';
}
?>
</body>
</html>
You cannot do this with PHP. As PaulProgrammer stated PHP can only execute when the page is generated as it is a server side language. You need a client side language such as JavaScript to do this. Here is an example of code you can try out. Don't just take the example, but learn what each of the components do:
<html>
<head>
<style>
#popup
{
display:none;
}
</style>
</head>
<body>
<button id="showbtn">Show Popup</button>
<div id="popup">
Sorry!The vehicle is already booked on the corresponding date.
Select a different date or book another vehicle.
</div>
<script>
const mypopup = document.getElementById("popup");
const mybutton = document.getElementById("showbtn");
mybutton.addEventListener('click', function(event) {
mypopup.style.display = "block";
})
</script>
</body>
</html>
try to use javascript to execute on second plane the code
Maybe a stupid question but i do not know the root cause of this strange javascript behavior : my "submit button" calls a "javascript function" which
updates a html field (ok), then erases it (nok) !
Why the "demo" field is erased after execution ??
(Maybe one of the easiest question of stackoverflow ever!)
<!DOCTYPE html>
<html>
<head></head>
<body>
<p id="demo"></p>
<form>
<button type="submit" value="Submit"
onClick="launchSubmit()">Submit
</button>
</form>
<script type="text/javascript">
function launchSubmit(){
document.getElementById("demo").innerHTML = "bla bla bla";
}
</script>
</body>
</html>
The JavaScript doesn't erase the value... the subsequent posting back of your form does. You put type="submit" in your button which will submit the form to the server. This then causes the server to send back a fresh copy of the HTML page for the browser to use. Of course the fresh copy does not contain any changes made by JavaScript, since those only exist in the browser's old copy of the page, which is now destroyed.
You can change it to type="button" and it won't post back the form. If you don't actually need a form here, then remove the <form></form> tags as well.
Here is some useful background reading about forms: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms
That is because your button type is set to submit. Setting this to button will keep the value on the screen.
When you click submit button, it submitted the form. Then you see a new empty page.
You should add a return false to onclick event, or you can change the type=submit attribute to type=button to make a normal button.
Use inline onclick is a bad idea, which may cause bugs if you do not take care of the escaping/returning, etc. , you had better use some libraries like jQuery, it will help you much more.
<!DOCTYPE html>
<html>
<head></head>
<body>
<p id="demo"></p>
<form>
<button type="submit" value="Submit"
onClick="launchSubmit(); return false;">Submit
</button>
</form>
<script type="text/javascript">
function launchSubmit(){
document.getElementById("demo").innerHTML = "bla bla bla";
}
</script>
</body>
</html>
The jQuery version:
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head></head>
<body>
<p id="demo"></p>
<form>
<button id="the-button">Submit</button>
</form>
<script type="text/javascript">
$('#the-button').on('click', function() {
$('#demo').text('hello world');
return false;
});
</script>
</body>
</html>
Because your form updates that element id="demo and then submits. In order to make that element remain, you must prevent the form from submitting.
Please Note:
An html form will always submit event when the action is not provided.
When you submit without the action, it submits to the same page, more
like reloading but with form data in memory.
So this is how you could approach your problem:
function launchSubmit(event){
event.preventDefault();
document.getElementById("demo").innerHTML = "bla bla bla";
}
<p id="demo"></p>
<form name="form">
<button type="submit" value="Submit"
onClick="launchSubmit(event)">Submit
</button>
</form>
I have a page I made, and I want to clear the page when I click a button.
My page looks like this:
<html>
<head>
<script language="Javascript">
function myFunction() {
}
</script>
</head>
<body>
Hello World!<br>
<input type="button" value="clear" onclick="myFunction()">
</body>
</html>
Is there any way to clear?
Inside of your function, you can set the body's text to be blank with document.body.innerHTML= ''.
See https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
I'm trying to show forms based on the button clicked. That is, on clicking the first button, two other buttons are displayed. However, the new buttons generated behave like dummy buttons (onClick event not working).
How can I resolve this error? Is there any alternative for this to implement the same functionality?
I have the following code:
<html>
<head>
<title>Frequently Asked Questions</title>
<link rel="stylesheet" type="text/css" href="CSSfiles/faqCSS.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script >
function addContent(divName, content) {
document.getElementById(divName).innerHTML = content;
}
</script>
</head>
<body>
<p>Put banner and logo on top; Put footer later </p>
<div class="intro">
Looking for help? We provide you information about what can be done when in trouble. Hope you find it helpful!
</div>
<form name="myForm" class="select">
<input type="button" value="ND" class="select-button" onClick="addContent('myDiv', document.myForm1.ND.value);"><br>
<input type="button" value="E" class="select-button" onClick="addContent('myDiv', document.myForm1.E.value);">
</form>
<form name="myForm1" class="select">
<textarea name="ND">
<input type="button" value="Earthquakes" class="trial" onclick="addContent('yourDiv', document.myForm2.HW.value);"/><br>
</textarea>
<textarea name="E"><u>E</u></textarea>
</form>
<form name="myForm2" class="select">
<textarea name="HW">
<u>Hello world!</u>
</textarea>
</form>
<br><br>
<div id="myDiv"></div>
<div id="yourDiv"></div>
</body>
</html>
It is not clear to me how you add the buttons to your DOM (could you post that code?).
However, say that your button has an id of 'MyButton1',
<button id="MyButton1">Hello</button>
then if you do this with jQuery, your code needs to have it delegate the click, by hooking an object that is already existing and will contain your button; for example the body element:
// This is registered before MyButton1 is created.
$('body').on('click', '#MyButton1', function(event) {
alert("Hello, I'm button 1");
}
Using plain javascript, after you have created the new content (so that getElementById can find the button), you need to bind the onclick event:
document.getElementById('MyButton1').onclick = function() {
alert("Hello again");
}
or (not supported on older IEs)
document.getElementById('MyButton1').addEventListener("click",
function() {
alert("Still me");
});
Here you can find a Javascript fiddle with code re: the javascript method.
Initially keep all forms hidden. Put them in the desired division. Onclick of each button only show/hide intended form..
This can help you out.
I am currently playing around with the FCKEditor, and I am trying to replicate how stack overflow shows exactly how your post will look in HTML as you type it up. My FCKEditor creates just fine, I just don't know how to go about accessing the editor data once it is created. What I want to do is get the html from the editor and then put it into the <p id="inputText"></p>. Trying to access it with jQuery using $("#fckEdtr") doesn't work, which I expect is because it's created on the fly with javascript. I am aware of the IsDirty() method in the FCKeditor JavaScript API, I just haven't seen any solid examples of how to get the current instance of the editor and use the method. Can anyone help? My code is below:
<html>
<head>
<title>FCKeditor Test</title>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
...code to output editor data as user types
});
</script>
</head>
<body>
<form>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('fckEdtr');
oFCKeditor.BasePath = "./fckeditor/";
oFCKeditor.ToolbarSet = 'Default';
oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<p id="inputText">
</p>
</form>
</body>
</html>
I just found the answer to this in another question on SO:
How can I enable live preview for FCKeditor in an ASP.Net site?
Also, when I use a div element instead of a paragraph element, it works. Here's my final working code for anyone it might help:
<html>
<head>
<title>FCKeditor - Sample</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
function FCKeditor_OnComplete( oFCKeditor )
{
oFCKeditor.Events.AttachEvent( 'OnSelectionChange', function() {
document.getElementById("postText").innerHTML =
oFCKeditor.GetHTML(true);
}) ;
}
</script>
</head>
<body>
<form method="post" action="process.php">
<script type="text/javascript">
var oFCKeditor = new FCKeditor('fckEdtr');
oFCKeditor.BasePath = "./fckeditor/";
oFCKeditor.ToolbarSet = 'Custom' ;
oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<div id="postText">
</div>
</form>
</body>
</html>
It's good that you found the answer already, but I wonder why do you need preview window when you are dealing with WYSIWYG editor. My guess is that the look you are getting in the editor is different from the resulting look because of CSS applied to the latter. If I am wrong, disregard the advice that follows.
If that is the case, you may think of copying the most relevant parts of your CSS to \fckeditor\editor\css\fck_editorarea.css so that they are applied in the editor window. Of course, sometimes you do want the difference. For example, spoilers should be hidden when posted but visible in the editor.