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.
Related
Based on the similar question found at
Input Box That Changes Page Title:
<!DOCTYPE html>
<html>
<title>Old title</title>
<body>
<h1 id="h1"></h1>
<input type="text" name="name" id="iText" value="start typeing" />
<form onsubmit="myFunction()">
Enter name: <input id ="iText" type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('iText').onkeyup = myFunction;
function myFunction() {
window.parent.document.title = document.getElementById("iText").value;
document.getElementById("h1").innerHTML = document.title;
}
</script>
</body>
</html>
This is working perfectly with the onkeyup event. However, I don't want the flicking but only change page title once when people click the submit. But my code is not working as expected.
Basically what i wanna do is when user writes something to input and submits it, the page title will be changed to the input.
Here's the simple HTML generated from a c# dotnet core asp pages, application. I'm trying to get the number of input boxes from colorList div using a webdriver test. The initial count of two works, but once i simulate the clicking the button labeled "+" i still only get two, where i expected to get three. I've tried all kinds of different waits both implicit and explicit, but can't seem to get it to work.
<!DOCTYPE html>
<html>
<head>
<title>Home page - SeleniumWebTest</title>
</head>
<body>
<div class="container body-content">
<body>
<form method="post" id="Form" action="/?handler=saveall">
<div><h4>Colors</h4><button type="button" onclick="CreateColor();" value="create" class="btn-sm">+</button></div>
<div class="indent" id="colorlist">
<input value="Red" type="text" id="Colors" name="Colors" /><br />
<input value="Blue" type="text" id="Colors" name="Colors" /><br />
</div>
<br />
<div>
<h1>More Stuff</h1>
</div>
<br />
<button type="submit" value="SaveAll" class="btn btn-primary">Save All</button>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8Ps9gVily6NMr7L9g0lJf0cQzaqUzEq26TUrHCT4rH1GQIY0QLmjjc6cnQBE8aBvQlWdXAQZ2ub08pm2yIMWkUICO51XkWH6d11pf7y3pr3HwqRgBkiFdpaHSFYQsJsWdLba01RGCL8yYsUad9Vn2JQ" /></form>
</body>
<script type="text/javascript">
function CreateColor() {
var form = document.getElementById("colorlist");
var input = document.createElement("input");
input.type = "text";
input.id = "ColorId";
input.name = "ColorName";
form.appendChild(input);
linebreak = document.createElement("br");
form.appendChild(linebreak);
};
</script>
</div>
</body>
</html>
Here's my test
[Fact]
public void ColorTest()
{
var _driver = new ChromeDriver();
_driver.Navigate().GoToUrl("https://localhost:44394/");
Assert.Equal("Home page - SeleniumWebTest", _driver.Title);
var colorInputs = _driver.FindElements(By.Id("Colors"));
Assert.Equal(2, colorInputs.Count);
var plusButton = _driver.FindElement(By.XPath("//button[text()='+']"));
plusButton.Click();
var colorInputs2 = _driver.FindElements(By.Id("Colors"));
Assert.Equal(colorInputs.Count+1,colorInputs2.Count); // <-- Fails
_driver.Close();
_driver.Quit();
}
Yikes, after creating the question i see the problem. The id's for the new elements were being generated differently for razor pages versus javascript.
I'm attempting to add values from various form fields to an array. I can't seem to figure out why either the array is not storing properly, or displaying properly; the alert output is always ,,,, regardless of my input.
Here's my code:
var saveInfo = function() {
// empty array
var savedData = [];
//assigning variables to elements with specific ID name, will change when
//proper ID name is declared
savedData.push(firstName = document.getElementsByName("first_name").value);
savedData.push(lastName = document.getElementsByName("last_name").value);
savedData.push(emailadd = document.getElementsByName("email").value);
savedData.push(usrname = document.getElementsByName("username").value);
alert(savedData);
}
<!DOCTYPE html>
<html>
<title>Registration</title>
<head>
<script src="finishLater.js">
</script>
<link rel="stylesheet" type="text/css" href="newUser.css">
</head>
<body style="background-color: dodgerblue;">
<h1 style="text-align: center;">HELLO NEW USER</h1><hr><br>
<fieldset>
<legend style="text-align: center;">Sign Up</legend><br>
<form style="text-align: center;">
First Name:<input type="text" name="first_name"/><br>
Last Name:<input type="text" name="last_name"/><br>
Email Address:<input type="text" name="email"/><br>
Username:<input type="text" name="username"/><br>
<button type="button" id="submit">Sign UP</button>
<button type="button" id="finish_later" onclick="saveInfo();">Finish Later</button>
<button type="button" id="delete_data" onclick="deleteData();">Delete Data</button>
</form>
</fieldset>
</body>
</html>
getElementsByName return a list, you should get the first element of the list by using:
document.getElementsByName("first_name")[0].value
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 :)
If I have an html document whose rough structure is
<html>
<head>
</head>
<body class="bodyclass" id="bodyid">
<div class="headerstuff">..stuff...</div>
<div class = "body">
<form action="http://example.com/login" id="login_form" method="post">
<div class="form_section">You can login here</div>
<div class="form_section">
<input xmlns="http://www.w3.org/1999/xhtml" class="text" id="username"
name="session[username_or_email]" tabindex="1" type="text" value="" />
</div>
<div class="form_section">etc</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="buttons">
<button type="submit" class="" name="" id="go" tabindex="3">Go</button>
<button type="submit" class="" name="cancel"
id="cancel" tabindex="4">Cancel</button>
</div>
</form>
</div>
</body>
</html>
You can see that there is a username field and a Go button. How would I, using Javascript, fill in the username and press Go...?
I would prefer to use plain JS, rather than a library like jQuery.
document.getElementById('username').value="moo"
document.forms[0].submit()
document.getElementById('username').value = 'foo';
document.getElementById('login_form').submit();
You can try something like this:
<script type="text/javascript">
function simulateLogin(userName)
{
var userNameField = document.getElementById("username");
userNameField.value = userName;
var goButton = document.getElementById("go");
goButton.click();
}
simulateLogin("testUser");
</script>
It would be something like:
document.getElementById("username").value="Username";
document.forms[0].submit()
Or similar
edit: you guys are too fast ;)
This method helped me doing this task
document.forms['YourFormNameHere'].elements['NameofFormField'].value = "YourValue"
document.forms['YourFormNameHere'].submit();