What I want is to have a text area that when I enter 'Yes' on the inbound and if I click on 'Yes' it will open a textarea at the bottom or at its left so that I could input what is the name of the inbound item.
If answered 'No' then there should be no textarea shown (the default is no)
After that I still want it to show when I click on the submit button
Please take a look at my snippet so that you will have the idea.
Note: The default is 'No '
<html>
<body>
<form id="myForm">
Name: <br><input type="text" name="Name" placeholder="Name" size="40"/><br/>
Phone: <br><input type="text" name="Phone No" placeholder="Phone Number"/><br/>
INBOUND: <br><select name="INBOUND" placeholder="INBOUND"><option>No<option>Yes</select><br/>
<button type="button" onclick="ShowText();">Submit</button>
</form>
<p>Result:</p>
<p><textarea cols=40 rows=7 id="show" onClick='selectText(this);'></textarea></p>
<script>
function ShowText(){
// find each input field inside the 'myForm' form:
var inputs = myForm.querySelectorAll('input,select');
// declare 'box' variable (textarea element):
var box = document.getElementById('show');
// clear the 'box':
box.value = '';
// loop through the input elements:
for(var i=0; i<inputs.length; i++){
// append 'name' and 'value' to the 'box':
box.value += inputs[i].name + ': '+inputs[i].value+'\n';
}
}M
function selectText(textField)
{
textField.focus();
textField.select();
}
</script>
</body>
</html>
Here is the complete running example.
Hope this will helps you
<html>
<body>
<form id="myForm">
Name: <br><input type="text" name="Name" placeholder="Name" size="40"/><br/>
Phone: <br><input type="text" name="Phone No" placeholder="Phone Number"/><br/>
INBOUND: <br><select name="INBOUND" id="INBOUND" onchange="showTextArea()" placeholder="INBOUND"><option>No<option>Yes</select><br/>
<button type="button" onclick="ShowText();">Submit</button>
</form>
<p>Result:</p>
<p><textarea cols=40 rows=7 id="show" onClick='selectText(this);'></textarea></p>
<div id="location" style="display:none;"><p>Location:</p>
<p><textarea cols=40 rows=7 onClick='selectText(this);'></textarea>
</div>
</p>
<script>
function ShowText(){
// find each input field inside the 'myForm' form:
var inputs = myForm.querySelectorAll('input,select');
// declare 'box' variable (textarea element):
var box = document.getElementById('show');
// clear the 'box':
box.value = '';
// loop through the input elements:
for(var i=0; i<inputs.length; i++){
// append 'name' and 'value' to the 'box':
box.value += inputs[i].name + ': '+inputs[i].value+'\n';
}
}M
function selectText(textField)
{
textField.focus();
textField.select();
}
function showTextArea()
{
var e = document.getElementById("INBOUND");
var strUser = e.options[e.selectedIndex].value;
if(strUser == 'Yes')
{
document.getElementById('location').style.display = "block";
}
else
{
document.getElementById('location').style.display = "none";
}
}
</script>
</body></html>
Related
I have a homework require me to make a page where i need to submit Course and Student information.Requirement is i need a button that will generate a form to fill in Student information every time users click it.Users can generate as many as they want .After that user can click submit to submit everything on that page to Controller .The problem is i don't know how i can submit multi Student form to Controller.I try to use script to submit all the form but i think it not working.Please show me how
this is my jsp page now
<body>
<form id="form" name="form" >
<label for="fname">Course Name:</label><br>
<input type="text" id="cname" name="cname" ><br>
<label for="lname">Course ID:</label><br>
<input type="text" id="cid" name="cid" ><br><br>
</form>
<button onclick="myFunction()">Add Student</button>
<button type="button" onclick="submit()" id="submit">Save</button>
<script>
var x = 0;
function myFunction() {
x++;
var br = document.createElement("br");
var form = document.createElement("form");
form.id = "form" + x;
var FN = document.createElement("input");
form.innerHTML = "Student" + x + "<br>";
FN.type = "text";
FN.name = "FullName" + x;
FN.placeholder = "Name";
var ID = document.createElement("input");
ID.type = "text";
ID.name = "id" + x;
ID.placeholder = "Student ID";
form.appendChild(FN);
form.appendChild(br.cloneNode());
form.appendChild(ID);
document.getElementsByTagName("body")[0].appendChild(form);
}
function submit() {
for (var i = 0; i < x; i++) {
document.getElementById("form" + i).submit();
}
}
</script>
</body>
I have this code:
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="form_action.asp">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click "Try it" to display the value of each element in the form.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("frm1");
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
if(x.elements[i].value)
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Which will treat "Submit" string from the Submit button as an input string to. Obviously, assuming that the user won't input "Submit", I could hardcode-check if the value is "Submit" and skip it.
Isn't there any other way?
I could hardcode-check if the value is "Submit" and skip it.
Checking the value doesn't work because the user might actually type the word "Submit".
You can test the type of the elements:
if (x.elements[i].type === "text") { ... }
Or you can just select the text elements directly using the querySelectorAll() method:
function myFunction() {
var x = document.querySelectorAll("#frm1 input[type='text']");
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
text += x[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
}
<form id="frm1" action="form_action.asp">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click "Try it" to display the value of each element in the form.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
You can check the element's type (x.elements[i].type === 'text'):
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="form_action.asp">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click "Try it" to display the value of each element in the form.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("frm1");
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
if(x.elements[i].value && x.elements[i].type === 'text')
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Display just elements with a name:
for (i = 0; i < x.length ;i++) {
if(x.elements[i].value && x.elements[i].name)
text += x.elements[i].value + "<br>";
}
Possibly more useful than only selecting text inputs since you don't have to recode if you have other types - plus, reinforces that these are the items that would get sent during form submission.
And because I was bored:
function myFunction() {
document.getElementById("demo").innerHTML =
Array.prototype.slice.call(document.querySelectorAll("#frm1 input[name]"))
.reduce( ( prev, curr ) =>
{ return prev + curr.value + "<br />"; }, "");
}
document.addEventListener( "DOMContentLoaded",
function() {
document.getElementById("button").addEventListener("click", myFunction, false);
}, false );
<body>
<form id="frm1" action="form_action.asp">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click "Try it" to display the value of each element in the form.</p>
<button id="button">Try it</button>
<p id="demo"></p>
</body>
<form id="contact-form">
<input type="text" value="100" id="number" name="number" />
<input type="hidden" value="00" id="decimal" name="decimal" />
<input type="submit" name="submit-form" />
</form>
<script>
var form = document.getElementById('#contact-form');
form.addEventListener("submit", function() {
var input = document.createElement('number');
input.type = 'text';
input.name = 'decimal';
input.value = '00';
this.appendChild(input);
}, true);
</script>
// I want it to append the decimal '00' to the input number before submitting the form.
// I want the result as = 10000
form.addEventListener("submit", function() {
var decimal_val= document.getElementByName('decimal').value;
var number= document.getElementByName('number').value;
number = decimal_val+number;
}, true);
try this
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<form id="contact-form">
<input type="text" value="100" id="number" name="number" />
<input type="hidden" value="00" id="decimal" name="decimal" />
<input type="submit" name="submit-form" id="clickme" />
</form>
</body>
<script type="text/javascript">
$(document).ready(function(){
//in here ,first check the existing value with an alert when document is ready
var hiddenValue = $("#decimal").val();
alert("before value :" + hiddenValue);
//in this part you can assign the new value
$("#clickme").click(function(){
var newhiddenVal = "new decimal";
$("#decimal").val(newhiddenVal);
var displaynewHiddenvalue = $("#decimal").val();
alert(displaynewHiddenvalue);
});
});
</script>
</html>
note : to understand, first it shows the existing value, then in the button click , assign your new value , then display.(display with alsert, because then you can understand easily)
to assign the values in button click
var newhiddenVal = "new decimal";
$("#decimal").val(newhiddenVal);
do above in button click. hope this will help.
to get 10000 as the new value, in your button click
$("#clickme").click(function(){
var newhiddenVal = $("#number").val() +hiddenValue;
$("#decimal").val(newhiddenVal);
var displaynewHiddenvalue = $("#decimal").val();
alert(displaynewHiddenvalue);
});
I've tried many different methods, and even tried searching on SO. No answer was what I was looking for.
What I want is to have two input buttons that do some things in pure javascript.
Button one: Have it say "Add" when the page loads. When clicked, the value changes to "Cancel." Also, when it's clicked, have it display a form with three fields. When it's clicked again, have the form disappear. One named 'name', the second named 'location', the third named 'type'. I want the user to be able to submit these three things and have them be stored in the code.
Button two: Take the user input from the form and each time the user clicks, it displays all three information values, but have the button act as random generator. Let's say the code has 5 separate entries, I want them to be randomly selected and displayed when the button is clicked.
Like I said, I tried to make this work, but couldn't quite get over the top of where I wanted to go with it. If you want to see my original code, just ask, but I doubt it will be of any assistance.
Thanks in advance.
EDIT: Added the code.
function GetValue() {
var myarray = [];
var random = myarray[Math.floor(Math.random() * myarray.length)];
document.getElementById("message").innerHTML = random;
}
var testObject = {
'name': BWW,
'location': "Sesame Street",
'type': Bar
};
localStorage.setItem('testObject', JSON.stringify(testObject));
var retrievedObject = localStorage.getItem('testObject');
function change() {
var elem = document.getElementById("btnAdd1");
if (elem.value == "Add Spot") {
elem.value = "Cancel";
} else elem.value = "Add Spot";
}
window.onload = function() {
var button = document.getElementById('btnAdd1');
button.onclick = function show() {
var div = document.getElementById('order');
if (div.style.display !== 'none') {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
};
};
<section>
<input type="button" id="btnChoose" value="Random Spot" onclick="GetValue();" />
<p id="message"></p>
<input type="button" id="btnAdd1" value="Add Spot" onclick="change();" />
<div class="form"></div>
<form id="order" style="display:none;">
<input type="text" name="name" placeholder="Name of Resturant" required="required" autocomplete="on" />
<input type="text" name="type" placeholder="Type of Food" required="required" autocomplete="off" />
<input type="text" name="location" placeholder="Location" required="required" autocomplete="off" />
<input type="submit" value="Add Spot" />
</form>
</div>
</section>
The randomizer works, and so does the appear/hide form. Only thing is storing the input and switching the input value.
Here's one way to do this. Each form submission is stored as an object in an array. The random button randomly selects an item from the array and displays it below.
HTML:
<section>
<input type="button" id="btnChoose" value="Random Spot" />
<p id="message"></p>
<input type="button" id="btnAdd1" value="Add Spot" />
<div class="form">
<form id="order" style="display:none;">
<input id="orderName" type="text" name="name" placeholder="Name of Resturant" required="required" autocomplete="on" />
<input id="orderType" type="text" name="type" placeholder="Type of Food" required="required" autocomplete="off" />
<input id="orderLocation" type="text" name="location" placeholder="Location" required="required" autocomplete="off" />
<input type="submit" value="Add Spot" />
</form>
</div>
</section>
<div id="randomName"></div>
<div id="randomLocation"></div>
<div id="randomType"></div>
JS:
var formData = [];
var formSubmission = function(name, location, type) {
this.name = name;
this.location = location;
this.type = type;
}
var spotName = document.getElementById("orderName"),
spotLocation = document.getElementById("orderLocation"),
spotType = document.getElementById("orderType");
var addClick = function() {
if (this.value === 'Add Spot') {
this.value = "Cancel";
document.getElementById('order').style.display = 'block';
}
else {
this.value = 'Add Spot';
document.getElementById('order').style.display = 'none';
}
}
document.getElementById("btnAdd1").onclick = addClick;
document.getElementById('order').onsubmit = function(e) {
e.preventDefault();
var submission = new formSubmission(spotName.value, spotLocation.value, spotType.value);
formData.push(submission);
submission = '';
document.getElementById('btnAdd1').value = 'Add Spot';
document.getElementById('order').style.display = 'none';
this.reset();
}
var randomValue;
document.getElementById('btnChoose').onclick = function() {
randomValue = formData[Math.floor(Math.random()*formData.length)];
document.getElementById('randomName').innerHTML = randomValue.name;
document.getElementById('randomLocation').innerHTML = randomValue.location;
document.getElementById('randomType').innerHTML = randomValue.type;
}
I was working on something since you first posted, and here is my take on it:
HTML:
<section>
<p id="message">
<div id="name"></div>
<div id="location"></div>
<div id="type"></div>
</p>
<input type="button" id="btnAdd" value="Add" onclick="doAdd(this);" />
<input type="button" id="btnShow" value="Show" onclick="doShow(this);" />
<div class="form">
<script id="myRowTemplate" type="text/template">
<input type="text" name="name" placeholder="Name of Resturant" required="required" autocomplete="on" onchange="onChanged(this, {{i}})" />
<input type="text" name="type" placeholder="Type of Food" required="required" autocomplete="off" onchange="onChanged(this, {{i}})" />
<input type="text" name="location" placeholder="Location" required="required" autocomplete="off" onchange="onChanged(this, {{i}})" />
</script>
<form id="order" style="display:none;">
<div id="formItems">
</div>
<input type="button" value="Add Spot" onclick="addSpot()" />
</form>
</div>
</section>
JS:
function GetValue() {
if (enteredItems.length) {
var entry = enteredItems[Math.floor(Math.random() * enteredItems.length)];
document.getElementById("name").innerHTML = entry.name;
document.getElementById("location").innerHTML = entry.location;
document.getElementById("type").innerHTML = entry.type;
}
}
function doAdd(elem) {
switch (elem.value) {
case "Add":
document.getElementById('order').style.display = "";
elem.value = "Cancel";
break;
case "Cancel":
document.getElementById('order').style.display = "none";
elem.value = "Add";
break;
}
}
function doShow(elem) {
GetValue();
}
function addSpot(index) { // (note: here, index is only for loading for the first time)
if (index == undefined) index = enteredItems.length;
var newRowDiv = document.createElement("div");
newRowDiv.innerHTML = document.getElementById("myRowTemplate").innerHTML.replace(/{{i}}/g, index); // (this updates the template with the entry in the array it belongs)
if (enteredItems[index] == undefined)
enteredItems[index] = { name: "", location: "", type: "" }; // (create new entry)
else {debugger;
newRowDiv.children[0].value = enteredItems[index].name;
newRowDiv.children[1].value = enteredItems[index].location;
newRowDiv.children[2].value = enteredItems[index].type;
}
document.getElementById("formItems").appendChild(newRowDiv);
}
function onChanged(elem, index) {
enteredItems[index][elem.name] = elem.value;
localStorage.setItem('enteredItems', JSON.stringify(enteredItems)); // (save each time
}
// update the UI with any saved items
var enteredItems = [];
window.addEventListener("load", function() {
var retrievedObject = localStorage.getItem('enteredItems');
if (retrievedObject)
enteredItems = retrievedObject = JSON.parse(retrievedObject);
for (var i = 0; i < enteredItems.length; ++i)
addSpot(i);
});
https://jsfiddle.net/k1vp8dqn/
It took me a bit longer because I noticed you were trying to save the items, so I whipped up something that you can play with to suit your needs.
So i have this code:
<html>
<head>
<title>Form</title>
<script type="text/javascript">
function showConfirmationDialog() {
var textbox = document.getElementById('textbox');
var location = document.getElementById('location');
alert('You chosen:'+'\n'+'\n'+'Name: '+textbox.value +'\n'+'Address: ' +location.value+'\n');
}
function formfocus() {
document.getElementById('textbox').focus();
}
window.onload = formfocus;
var option;
</script>
</head>
<body>
Your name:
<input type="text" name="FirstName" id="textbox" <br><br/>
Your Address:
<input type="text" name="address" id="location" <br></br><br></br>
Choose your location:
<form name="Radio" id="destination" action="">
Bristol:
<input type="radio" name="selection" value="bristol" onClick="option=0">
London:
<input type="radio" name="selection" value="london" onClick="option=1">
Birmingham:
<input type="radio" name="selection" value="birmingham" onClick="option=2" />
</form>
<br></br> Click:
<input type="button" value="Submit" onclick="showConfirmationDialog();" /><br></br>
</body>
</html>
... This code basically represents a form for a user to fill in and at the end select one of three option provided via the radio buttons. What I wanted to find out was that how do I get the selection from one radio button which the user will need to select, displayed within the alert box after they press submit.
Something like this...
function getSelRadioValue()
for(i = 0; i< document.forms['Radio'].elements['selection'].length ; i++){
if(document.forms['Radio'].elements['selection'][i].checked == true)
return document.forms['Radio'].elements['selection'][i].value;
}
return null;
}
var selectedRadioValue = getSelRadioValue(); //use this variable in your alert.
if(selectedRadioValue == null)
alert("please select a destination");
else if(confirm("You have selected " + selectedRadioValue))
//deal with success
You need to loop through the selection radios to get the checked value:
var selection = document.Radio.selection;
var selectionResult = "";
for(var i = 0; i < selection.length; i++) {
if(selection[i].checked) {
selectionResult = selection[i].value;
}
}
alert('You chosen:'+'\n'+'\n'+'Name: '+textbox.value +'\n'+'Address: ' +location.value+'\n' + 'Location: '+selectionResult);