I have a piece of code (in a .php file) that can dynamically add/remove a group of input fields by JavaScript.
<!DOCTYPE html>
<!-- ref: https://stackoverflow.com/questions/75408002/javascript-dynamically-add-and-remove-input-fields -->
<html lang="en">
<head>
<style>
#template #template_p{ display: none }
</style>
</head>
<body>
<form action="" method="post" autocomplete="off">
<fieldset id="fieldset">
<legend id="legend">Professional development</legend>
<div id="placeholder">
<div id="template">
<fieldset id="template_fieldset">
<legend>Group</legend>
<p>Item <input type ="text" name="prof_item[]" /><br /></p>
<p>Duration <input type ="text" name="prof_duration[]" /><br /></p>
<p id="template_p"><button type ="button" name="prof_remove[]" onclick="this.closest('div').remove()">Remove group</button><br /></p>
</fieldset>
</div> <!-- template -->
</div> <!-- placeholder -->
<p><button type="button" name="add" onclick="Add();">Add new group</button></p>
</fieldset>
<p><button type="submit" name="Submit">Submit</button></p>
</form>
<script>
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder").appendChild(oClone);
}
</script>
</body>
</html>
Using this and adding some PHP code, user data can be collected and saved into MySQL. When the user comes back, is it possible to add the ability to populate the loaded user data into the page, and the user can still dynamically add/remove a group of input fields? I understand that PHP is run on the server and JavaScript is on the client side.
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>
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>
My window.location does not redirect the page to the required location. The same code with window.open works. The else statement also executes when the user name and password are incorrect. When the correct username and password is entered, it just refreshes the same page.
<div class="login" style="position:relative;top:200px;">
<form name="login" method="post">
<p align="middle">Please login to continue </p><p align="middle"><input type="text" name="login" placeholder="Username"></p>
<p align="middle"><input type="password" name="pwd" placeholder="Password"></p>
<p class="submit" align="middle"><input type="submit" onclick ="return check(this.form)" value="Login" name="commit"></p>
</form>
<script language="javascript">
function check(form) {
if(form.login.value == "admin" && form.pwd.value == "sysadmin") {
window.location('alumni.html');
}
else {
alert("Ten thousand thundering typhoons! What is the blasted password?");
}
}
</script>
<!--<script type='text/javascript' src='alumna.json'></script> -->
</div>
You can also try with
window.location = 'http://www.yoururl.com/alumni.html';
or directly
window.location = 'alumni.html';
There is a good question about redirect in javascript here: How do I redirect with Javascript?
[EDIT #1]
Although I think that is not the main problem. I believe you can not validate the way you are doing it. In the form there is an attribute called action as explained in http://www.w3schools.com/tags/att_form_action.asp
Then in the page you load, you validate the parameters and decide if its right or not, where you redirect to one page if its right, or to another if it's wrong.
Or you can also load the page and if validation is right, stay in the page and if it's wrong redirect to the login page.
That's one way to do it, probably there is another one better.
[EDIT #2]
What I would personally do is to process the form in a PHP page, it's much easier and simpler. Could be like:
in the HTML:
<div class="login" style="position:relative;top:200px;">
<form name="login" action="myPhpPage.php" method="post">
<p align="middle">Please login to continue </p>
<p align="middle"><input type="text" name="login" placeholder="Username"></p>
<p align="middle"><input type="password" name="pwd" placeholder="Password"></p>
<p class="submit" align="middle">
<input type="submit" onclick ="" value="Login" name="commit"></p>
</form>
<!--<script type='text/javascript' src='alumna.json'></script> -->
</div>
In the PHP page:
$name = $_POST['login']; // it's $_post because you are sending the form with method = post
$pass = $_POST['pwd'];
if($name == "admin" && $pass == "sysadmin"){
//go to one page or stay here
} else{
// redirect to another page
}
window.location is a read only property:
The Window.location read-only property returns a Location object with information about the current location of the document.
MDN on window.location
try this: window.location.replace("http://stackoverflow.com");
Here's a working code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> Login Redirection Test</title>
<script>
function validateForm() {
var un = document.forms["login"]["user"].value;
var pw = document.forms["login"]["pwd"].value;
if (un == "admin" && pw=="sysadmin") {
window.location.assign="https://stackoverflow.com";
return false;
}else {
alert("Ten thousand thundering typhoons! What is the blasted password?");
}
}
</script>
</head>
<body>
<div class="login" style="position:relative;top:200px;">
<form name="login" onsubmit="return validateForm()" method="post">
<p align="middle">Please login to continue </p><p align="middle"><input type="text" name="user" placeholder="Username"></p>
<p align="middle"><input type="password" name="pwd" placeholder="Password"></p>
<p class="submit" align="middle"><input type="submit" onclick ="return check(this.form)" value="Login" name="commit"></p>
</form>
<!--<script type='text/javascript' src='alumna.json'></script> -->
</div>
</body>
</html>
Window.location is not a function, it is a property that is just read. However,
window.location.assign
might work better.
I have several tabs and each time I select a tab, the form is submitted sending a variable a different value (hidden from the user). If I go say from TAB1 to TAB2, variable99 will get a value of 2, TAB3 a value of 3 and so on.... Problem I am having is that when I select TAB2, I don't want the page to revert back to TAB1. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit a Form on Tab Click</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
</style>
<script>
$(function() {
$("#Main").tabs();
$('[id^=ui-id-]').click(function(){
var tabId = $(this).attr('id');
var tabNum = tabId.split('-')[2];
$('#form-' + tabNum).submit();
});
});
</script>
</head>
<body>
<div id="Main">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
<li>Tab6</li>
</ul>
<form id="form-1" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="1">
</form>
<form id="form-2" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="2">
</form>
<form id="form-3" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="3">
</form>
<form id="form-4" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="4">
</form>
<form id="form-5" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="5">
</form>
<form id="form-6" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="6">
</form>
<div id="Tab1">
<p>Tab1</p>
</div>
<div id="Tab2">
<p>Tab2</p>
</div>
<div id="Tab3">
<p>Tab3</p>
</div>
<div id="Tab4">
<p>Tab4</p>
</div>
<div id="Tab5">
<p>Tab5</p>
</div>
<div id="Tab6">
<p>Tab6</p>
</div>
</div>
</body>
</html>
Here is my code now, I removed some things, that didn't make since:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit a Form on Tab Click</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
</style>
<script>
$(function() {//Open function
$("#Main").tabs();
$('[id^=ui-id-]').click(function(){ //Open [id^=ui-id-]
if (tabId == 'ui-id-1')
{
doAjax('1');
}
else if (tabId == 'ui-id-2')
{
doAjax('2');
}
else if (tabId == 'ui-id-3')
{
doAjax('3');
}
function doAjaxSubmit(formID) { //Open doAjaxSubmin
$.ajax({
type: "POST",
url: "Tab_Click_v00.html",
data: "Nb_var99=" + formID,
})
} //Close doAjaxSubmin
}); //Close [id^=ui-id-]
});//Close function
</script>
</head>
<body>
<div id="Main">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
<li>Tab6</li>
</ul>
<div id="Tab1">
<p>Tab1</p>
</div>
<div id="Tab2">
<p>Tab2</p>
</div>
<div id="Tab3">
<p>Tab3</p>
</div>
<div id="Tab4">
<p>Tab4</p>
</div>
<div id="Tab5">
<p>Tab5</p>
</div>
<div id="Tab6">
<p>Tab6</p>
</div>
</div>
</body>
</html>
This is not working. It also killed the css style?? I'll keep on trying.
For what you want to do, there is no need to use <form>s and <input>s at all.
Just based on the tab that is clicked, you can send a 1 or a 2 or a 3 over to the desired HTML page, via AJAX.
The <form> construction is great when you have several fields and you wish to POST their data over to another server page for processing. However, in your case, it appears that you only wish to send a value to another page, and then return.
Here is one way to do it, using AJAX:
$(document).ready(function() {
$( "#Main" ).tabs();
$('[id^=ui-id-]').click(function() {
if (tabId == 'ui-id-1') {
doAjax('1');
}else if (tabId == 'ui-id-2') {
doAjax('2');
}else if (tabId == 'ui-id-3') {
doAjax('3');
}
}); //END ui-id-#.click fn
}); //END document.ready
function doAjaxSubmit(formID) {
$.ajax({
type: "POST",
url: "myphpprocessor.php",
data: "Nb_var99=" + formID,
})
.done(function( recd_from_PHP ) {
//No need to put ANYTHING in here, but for eg, you can do:
//AS AN EXAMPLE ONLY, display message sent from server side
alert("PHP side said: " + recd_from_PHP);
//AS AN EXAMPLE ONLY, click the third tab...
$('[id^=ui-id-3]').click();
});
}
Another way to send form data (using a <form> as it was intended) is to create a hidden <iframe> on your page, containing the Tab_Click_v00.html page inside it -- and then POST to that page.
Because the form's target is already on the page in an <iframe>, the current page should not refesh. And because the <iframe> is hidden, the user should not see anything unusual.
This answer also uses AJAX. I will post another example, addressing your request for more information regarding the hidden iframe idea.
Notice that as you click from Tab to Tab, the user remains on the tab.
Just copy/paste into two files:
index.php (or whatever you wish to name it), and
myphpprocessor.php (if change name of this file, must also change its name in AJAX code block)
index.php (or mytest.html, or whatever)
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<style>
#msg{width:30%;height:80px;padding:10px;margin-top:20px;background-color:wheat;}
.hidden{display:none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$( "#Main" ).tabs();
$('[id^=ui-id-]').click(function() {
var tabId = $(this).attr('id');
if (tabId == 'ui-id-1') {
doAjax('1');
}else if (tabId == 'ui-id-2') {
doAjax('2');
}else if (tabId == 'ui-id-3') {
doAjax('3');
}else if (tabId == 'ui-id-4') {
doAjax('4');
}else if (tabId == 'ui-id-5') {
doAjax('5');
}
}); //END ui-id-#.click fn
}); //END document.ready
function doAjax(formID) {
$.ajax({
type: "POST",
url: "myphpprocessor.php",
data: "Nb_var99=" + formID,
})
.done(function( recd_from_PHP ) {
//No need to put ANYTHING in here, but for eg, you can do:
//alert('In done fn...');
//AS AN EXAMPLE ONLY, display message sent from server side
//alert("PHP side said: " + recd_from_PHP);
$('#msg').html('<h2>Here is what the PHP side sent:</h2>' + recd_from_PHP);
//AS AN EXAMPLE ONLY, click the third tab...
//$('[id^=ui-id-3]').click(); //Warning, this will cause endless loop -- but just demonstrating
});
}
</script>
</head>
<body>
<div id="Main">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
<li>Tab6</li>
</ul>
<form id="form-1" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="1">
</form>
<form id="form-2" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="2">
</form>
<form id="form-3" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="3">
</form>
<form id="form-4" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="4">
</form>
<form id="form-5" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="5">
</form>
<form id="form-6" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="6">
</form>
<div id="Tab1">
<p>Tab1</p>
</div>
<div id="Tab2">
<p>Tab2</p>
</div>
<div id="Tab3">
<p>Tab3</p>
</div>
<div id="Tab4">
<p>Tab4</p>
</div>
<div id="Tab5">
<p>Tab5</p>
</div>
<div id="Tab6">
<p>Tab6</p>
</div>
</div>
<div id="msg"></div>
</body>
</html>
Server Side: myphpprocessor.php (MUST end in .php)
<?php
$id = $_POST['Nb_var99'];
if ($id == 4) {
$msg = "Return of the Tab Four";
}else{
$msg = 'PHP side receieved: ' .$id;
}
echo $msg;
Posting to a hidden <iframe>
I've never done this myself, and can see its a bit tricky. Here are some posts that discuss how to do it:
How do you post to an iframe?
Hidden iframe submit
Remember to specify the name= attr
Post form in an iframe
You will notice that this is considerably more complicated than simply doing a basic AJAX form submission, as suggested in my previous two answers.
I am not sure why the AJAX solution is not appealing in your situation, but I remember when AJAX and PHP were unknown commodities to me, and perhaps that is what you are struggling with.
If so, struggle no more. Both are much simpler than you realize.
For basic, FREE, from-the-ground-up 10-min tutorials in PHP:
phpAcademy.org
thenewboston.com
Next, here are some good posts for getting the basics of AJAX:
A simple example
More complicated example
Populate dropdown 2 based on selection in dropdown 1
My recommendation is to use the AJAX solution, but I do not understand what you are trying to achieve in the end. What is the file Tab_Click_v00.html going to do with the data it receives?
Perhaps if you provide more information (as a comment below this post) about the desired end result on the Tab_Click side, I can be of more help.
Given you're using the jQuery Tabs control, you can use the window.location.hash and bind to the load event (and show the appropriate tab using the active option):
$(window).load(function(){
if(window.location.hash){
$('#main').tabs('option','active',window.location.hash.substring(1));
}
});
Then redirect the user back using somepage.html#tabindex