I cant stop web page from posting when I click button - javascript

I have looked at multiple solutions on stack overflow and non of them have worked.
When I click the button, it take me to a new url yoursite.com/index.html?message=blah&pass=12
I want it to stay in the same page and just execute the script I wrote.
Please help
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Encryption Using Caesar</title>
<link rel="stylesheet" href="https://unpkg.com/marx-css/css/marx.min.css">
<style>
.hidden{
visibility: hidden;
}
</style>
<script src="encrypt.js"></script>
</head>
<body>
<main>
<h2>What is this?</h2>
<p>This application was built to <b>encrypt</b> data using the <b>Caesar method.</b>
All encryption is handled on <i>client side</i> in order to garuntee <b>data integrity.</b> </p>
<form onsubmit=" event.preventDefault; doStuff(); ">
<h5>Insert some text in the following box:</h5> <br>
<textarea id="userText" name="message" cols="30" rows="10" placeholder="Your secret message" autofocus></textarea>
<br>
<h5>Enter Your Favorite Number</h5> <br>
<input type="text" name="pass" id="pass" placeholder="Enter Your Favorite Number:"> <br>
<button id="encrypt" type="submit" onclick="return false;" style="width: 100%;">Lets Encrpt</button>
<div id="emessage"></div>
</form>
</main>
<script>
window.onload = function(){ doStuff(); };
function doStuff(){
document.getElementById("encrypt").onclick = function(){
var key = document.getElementById("pass").value;
var message = document.getElementById("userText").innerHTML;
var eMessage = caesarShift(message,key);
document.getElementById("emessage").innerHTML = eMessage ;
}
}
</script>
</body>
</html>
I have another js file called encrypt.js which has a function called caesarShift()
I don't know why this isnt working. Please help!

Change event.preventDefault to event.preventDefault().
The former only references the function while the latter actually invokes it.

I changed the code a bit to make it more simple to do the stuff you are looking for.
You need to define the caesarShift function that you are calling. Unless you define that you won't get the answer you are looking for in the div emessage.
Also you need to change to event.PreventDefault() if you want to use your method only and then define the caesarShift and then call it.
HTML Part -->
<form>
<h5>Insert some text in the following box:</h5> <br>
<textarea id="userText" name="message" cols="30" rows="10" placeholder="Your secret message" autofocus></textarea>
<br>
<h5>Enter Your Favorite Number</h5> <br>
<input type="text" name="pass" id="pass" placeholder="Enter Your Favorite Number:"> <br>
<button id="encrypt" type="button" onclick="doStuff()" style="width: 100%;">Lets Encrpt</button>
<div id="emessage"></div>
</form>
JS part -->
<script>
function doStuff(){
var key = document.getElementById("pass").value;
var message = document.getElementById("userText").value;
// Define this caesarShift function
var eMessage = caesarShift(message,key);
document.getElementById("emessage").innerHTML = eMessage ;
}
// window.onload = function(){ doStuff(); };
</script>

Related

How to add links in mesage in popup window in javascript alert?

I have a function which stores the data and after that function I wanted to give an popup message with link. I am able to submit data and create an popup using alert. But adding link in text is something I want. Below is the code I tried.
<!DOCTYPE html>
<html>
<base target="_top">
<head>
<script type="text/javascript">
function myfunction(from){
(function($){
var id = $("#id");
var wnum = $("#wnum");
var id = id[0]['value']
var wnum = wnum[0]['value']
if(from == 'submit'){
submitData(id,wnum) // data submitted
var str = "Inform us!";
var result = str.link("some_link");
alert("Thank you for submitting the form. "+result);
}
})(jQuery);
}
</script>
<body>
<div class="cen">
<div class="wrapper">
<h1>Font Selector</h1>
<fieldset class="fontForm grid">
<div class="grid-cell">
<div class="grid-cell size1of1">
<label for="fname">Order Id</label>
<input type="text" id="id" name="id" placeholder="Enter order id" >
<label for="fname">WhatsApp Number</label>
<input type="text" id="wnum" name="wnum" placeholder="Enter WhatsApp number">
<p><button onclick="myfunction('submit')">Submit</button></p>
</div>
</div>
</body>
</html>
How could I do this?
You cannot with alert. You will have to build an alert dialog that does not use it, e.g. using bootbox or something you build yourself.

I can't get Tag content with a Script/Function

i'm with a ridiculous problem (i think). I just can't get a tag content using a Script/Function/document.getElementById. The alert tha i'm using to see the content of variable (wM) is always blank. I looked a lot of examples in the Web and all of them is similar, sometimes just like my code. See below:
<!DOCTYPE html>
<html lang ="pt-br">
<head>
<title> loginServlet2 </title>
<meta http-equiv = ”Content-Type” content=”text/html; charset=UTF-8”>
<link rel="stylesheet" type="text/css" href="c:/java/html/css/estilo.css"/>
<script type="text/javascript">
function oMsg()
{
var wM = document.getElementById("wMsgB").textContent;
// var wM = document.querySelector("span").textContent;
alert("wM = "+ wM);
if (wM == "Teste OK!")
{
// document.getElementById("wMsgA").innerHTML = "Test is OK";
document.getElementById("wMsgA").textContent = "Test is OK";
}
else
{
alert("Test is not OK. Before set new msg");
document.getElementById("wMsgA").textContent = "Test is not OK";
}
}
</script>
</head>
<body>
<h2> Login Page2 </h2>
<p>Please enter your username and password</p>
<form method="GET" action="loginServlet2">
<p id="test2"> Username <input type="text" name="userName" size="50"> </p>
<p> Password <input type="password" name="password" size="20"> </p>
<p> <input type="submit" value="Submit" name="B1" onclick="oMsg()"> </p>
</form>
<h3> MsgB : <span id="wMsgB"<%=request.getAttribute("wMsg")%></span></h3>
<p> MsgA : <span id="wMsgA"> </span> </p>
</body>
</html>
Could anyone help me, please? Thanks.
You are trying to get the value of a p element, but p elements don't have a value property. Only form fields do. Non-form fields that contain text between their opening and closing tags have .textContent and .innerHTML properties you can use to get/set their contents.
If you want to give the user a place to type in some data, you need to create some input form fields and then you have to wait until they've done that before attempting to get the values.
Next, you have smart quotes “” instead of straight quotes "" which can cause encoding problems. Make sure you write your code in an editor that doesn't apply any formatting to the code. There are plenty of great free web editors out there.
You also have a reference to a .css file using a full local path, which isn't going to work when you deploy this code later. You should be using relative paths to reference files that are part of your system.
Finally, you are using some old HTML syntax in your meta, link and script tags, so take note of the modern versions of those in the snippet below.
<head>
<title>loginServlet2</title>
<meta charset=UTF-8”>
<link rel="stylesheet" href="c:/java/html/css/estilo.css"/>
<script>
function oMsg() {
var wM = document.getElementById("wMsg").textContent;
alert("wM = " + wM);
if (wM == "Test OK!") {
document.getElementById("wMsgA").textContent = "Test is OK";
} else {
alert("Test is not OK. Before set new msg");
document.getElementById("wMsgA").textContent = "Test is not OK";
}
}
</script>
</head>
<body>
<h2> Login Page2 </h2>
<p>Please enter your username and password</p>
<form method="GET" action="loginServlet2">
<p id="test2"> Username <input type="text" name="userName" size="50"> </p>
<p> Password <input type="password" name="password" size="20"> </p>
<p> <input type="submit" value="Submit" name="B1" onclick="oMsg()"> </p>
</form>
<h2>MsgB : <span id="wMsg"><%=request.getAttribute("wMsg")%></span> </h2>
<p>MsgA : <span id="wMsgA"> </span> </p>

How to move a text from an input field to another by pressing a button in javascript

Hi I'm new in javascript so I'm sorry if I my question is silly
I am suppodsed to make a dive where there would be two input fields and a button. When you press the button the text that is written in first field must move to the second one. This is what I have done:
<script>
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].innerHTML=fp.element[0].value;
fp.elements[0].value="";
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Project 2 </title>
</head>
<body>
<div>
<form id=fora>
First phrase:<br>
<input type="text" name="first phrase" >
<br>
Second phase:<br>
<input type="text" name="second phrase">
</form>
<button type="button" onclick="myfunction()">push me
</button>
<buttom>
</button>
</div>
<p id="intro"></p>
</body>
</html>
Has anyone any idea what i am doing wrong??
You need to change innerHTML to value. And there is a typo fp.element (missing s , should be fp.elements)
var fp= document.forms["fora"];
fp.elements[1].value=fp.elements[0].value;
fp.elements[0].value="";
Change your javascript to read and set the values of the inputs based on the names:
function myfunction(){
document.getElementsByName("second phrase")[0].value = document.getElementsByName("first phrase")[0].value;
document.getElementsByName("first phrase")[0].value = "";
}
Change
fp.elements[1].innerHTML=fp.element[0].value;
to
fp.elements[1].value = fp.elements[0].value;
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].value = fp.elements[0].value;
fp.elements[0].value = "";
}
<form name="fora">
First phrase:<br>
<input type="text" name="firstPhrase" ><br>
Second phase:<br>
<input type="text" name="secondPhrase">
</form>
<button type="button" onclick="myfunction()">push me</button>

Set Input Value to Javascript Variable

Let's say I have a variable called x in javascript. How can I set the value of a text input (HTML) to that variable? For example:
The value of the input will now be Swag
<input type="text" value="Swag" />
But if I want the value to be a javascript variable? How do I do? Something like this? (I am just guessing, trying to make my point clear)
<input type="text" value="variable.x" />
You can set it in your javascript code like:
<input id="myInput" type="text" value="Swag" />
<script>
var test = "test";
document.getElementById("myInput").value = test;
</script>
This is a better solution and will probably avoid confusion for newbies...
<!DOCTYPE html>
<html>
<body>
<h1>Input and Display Message</h1>
<p>Enter a message</p>
<input type="text" id="msg" ><br>
<button onclick="displayMessage()">Click me</button>
<p id="showinputhere"></p>
<script>
function displayMessage(){
let themsg = document.getElementById("msg").value;
if (themsg){
document.getElementById("showinputhere").innerHTML = themsg;
}
else{
document.getElementById("showinputhere").innerHTML = "No message set";
}
}
</script>
</body>
</html>

Changing the text/background color through JavaScript immediately changes back

Trying to change text color and background color of the text according to what I write in the textbox. Seems to work briefly; it shows me the color for a split second, like a quick snap and that's it.
<!DOCTYPE html>
<html>
<head>
<title>Prelab5 Ex1</title>
<style>
</style>
</head>
<body>
<h2>Prelab5 Ex1</h2>
<form method="post">
<input type="text" name="background" id="background"/><input type="submit" value="Background" onclick="changeBack();"/>
<br/>
<input type="text" name="text" id="text"/><input type="submit" onclick="changeText();" value="Text"/>
<br/>
<div id="content">Some text</div>
</form>
<script>
var DivText = document.getElementById("content");
function changeBack(){
var backColor = (document.getElementById("background").value);
DivText.style.backgroundColor= backColor;
}
function changeText(){
var textColor = (document.getElementById("text").value);
DivText.style.color = textColor;
}
</script>
</body>
</html>
Your onclick handlers for your submit buttons don't return false so your form is submitted resetting the page. You could add return false like
var DivText = document.getElementById("content");
function changeBack() {
var backColor = (document.getElementById("background").value);
DivText.style.backgroundColor = backColor;
}
function changeText() {
var textColor = (document.getElementById("text").value);
DivText.style.color = textColor;
}
<!DOCTYPE html>
<html>
<head>
<title>Prelab5 Ex1</title>
</head>
<body>
<h2>Prelab5 Ex1</h2>
<form method="post">
<input type="text" name="background" id="background" />
<input type="submit" value="Background" onclick="changeBack(); return false" />
<br/>
<input type="text" name="text" id="text" />
<input type="submit" onclick="changeText(); return false" value="Text" />
<br/>
<div id="content">Some text</div>
</form>
</body>
</html>
Your "submit" input performs the action on the form, which is currently set to "post". This will post the form to the same page (and cause a refresh).
You can override the default functionality by adding return false; to the ONCLICK attribute on all input type= "submit" elements.
In other words, this:
needs to become this:
<input type="submit" onclick="changeText();" value="Text"/>
but why use input type = submit at all?
You can just as easily use a link or button without the form:
<a href="#" onclick="changeText();"/>Test</a>
or
Click me!
which will do the same thing without needing to override the a forum action :)

Categories

Resources