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>
Related
I am attempting to make a calculator in order to... well, calculate something. Anyway, I am trying to make 4 variables be set too 4 user inputs by using form submission. However, no matter what I do, I can't get the variables to get set. Help would be appreciated!
<!DOCTYPEhtml>
<html>
<head>
<title>NatHisCalc</title>
</head>
<body>
<h1><center><b><p>Test</p></b></center></h1>
<center><b><p id='output'>loading...</p></b></center>
<center><b><p id='output2'>loading...</p></b></center>
<center><b><p id='output3'>loading...</p></b></center>
<center><b><p id='output4'>loading...</p></b></center>
<form id="a" action="/action_page.php">
Input X <input type="number" name="x"><br><br>
<input type="button" onclick="calc()" value="Submit">
</form>
<form id="a" action="/action_page.php">
Input X <input type="number" name="y"><br><br>
<input type="button" onclick="calc()" value="Submit">
</form>
<form id="a" action="/action_page.php">
Input X <input type="number" name="a"><br><br>
<input type="button" onclick="calc()" value="Submit">
</form>
<form id="a" action="/action_page.php">
Input X <input type="number" name="b"><br><br>
<input type="button" onclick="calc()" value="Submit">
</form>
<script>
function calc() {
var x = document.getElementById("x").submit();
var y = document.getElementById("y").submit();
var a = document.getElementById("a").submit();
var b = document.getElementById("b").submit();
var u = (0.101*(y/100))*(480000*(a/100))
var j = (0.581*(x/100))*(120000*(b/100))
if (x > 150 || x < 50) {
window.alert('Hold on... Those inputs will result in an unreasonable output. You can click ');
}
var preresult = j + u;
if (preresult < 177000) {
document.getElementById('output').innerHTML = 'Test';
} else {
document.getElementById('output').innerHTML = 'Test1';
}
if (u > 179999) {
document.getElementById('output').innerHTML = 'Test2';
}
document.getElementById('output2').innerHTML = 'Test3' + j;
document.getElementById('output3').innerHTML = 'Test4 ' + u;
document.getElementById('output4').innerHTML = 'Test5 ' + preresult;
}
</script>
</body>
</html>
Looked into your code, it seems that you have made things way too much complicated that it should be. First of all, you don't call submit function on the input to get the value of it. If you want to get the value of x then you just access the value property like this document.getElementById("x").value. Secondly, you really don't need four buttons, all you need to do is ONE button that submits the form and adding required on input fields makes the browser not submit the form until all forms are filled. Last of all, id attribute needs to be unique across your page. You have both form and input field as id a which is unacceptable. It will show no error but get you in sorts of trouble. You can see what I did here, where I prevented the form from being submitted upon the button click and simply called the calc function to perform the calculation.
<!DOCTYPEhtml>
<html>
<head>
<title>NatHisCalc</title>
</head>
<body>
<h1><center><b><p>Test</p></b></center></h1>
<center><b><p id='output'>loading...</p></b></center>
<center><b><p id='output2'>loading...</p></b></center>
<center><b><p id='output3'>loading...</p></b></center>
<center><b><p id='output4'>loading...</p></b></center>
<form onsubmit="event.preventDefault(); calc();" action="/action_page.php">
Input X <input type="number" id="x" required><br><br>
Input Y <input type="number" id="y" required><br><br>
Input A <input type="number" id="a" required><br><br>
Input B <input type="number" id="b" required><br><br>
<input type="submit" value="Submit">
</form>
<script>
function calc() {
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var u = (0.101*(y/100))*(480000*(a/100))
var j = (0.581*(x/100))*(120000*(b/100))
if (x > 150 || x < 50) {
window.alert('Hold on... Those inputs will result in an unreasonable output. You can click ');
}
var preresult = j + u;
if (preresult < 177000) {
document.getElementById('output').innerHTML = 'Test';
} else {
document.getElementById('output').innerHTML = 'Test1';
}
if (u > 179999) {
document.getElementById('output').innerHTML = 'Test2';
}
document.getElementById('output2').innerHTML = 'Test3' + j;
document.getElementById('output3').innerHTML = 'Test4 ' + u;
document.getElementById('output4').innerHTML = 'Test5 ' + preresult;
}
</script>
</body>
</html>
I have a form on my webpage that looks like this:
<form id="numberForm">
<input type="radio" name="number" value="singular"> singular <br>
<input type="radio" name="number" value="plural"> plural <br>
</form>
How do I pull the value of the currently selected radio button (without a submit action) in Javascript?
What I'd like is something along the lines of the following:
var formInput = document.getElementById("numberForm");
var numberInputValue = formInput.SELECTEDBUTTON.value;
Try this (using querySelector in JS) :
function getSel() {
var formInput = document.getElementById("numberForm");
var rb=formInput.querySelector('[type="radio"]:checked'); //get selected radio button
document.getElementById('spVl').innerHTML = 'Selected value = '+rb.value;
}
<form id="numberForm">
<input type="radio" name="number" value="singular"> singular <br>
<input type="radio" name="number" value="plural"> plural <br>
<input type="button" value="Get selected radio button value" onclick="getSel();" /><br>
<span id="spVl"></span>
</form>
var form = document.getElementById('numberForm');
var radios = form.getElementsByTagName('input');
for(var i = 0; i < radios.length; ++i) {
if(radios[i].checked) {
console.log("Radio button '" + radios[i].value + "' is checked");
}
}
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>
I have a form like this:
<form action="#contact-form" method="post" class="th_contact-form" id="id-59907491">
<div class="form_line">
<label for="widget-2-your-email" class="th-field-label email" style="display:none;">Your Email<span>(required)</span></label>
<input type="text" name="widget-2-your-email" id="widget-2-your-email" placeholder="Your Email" class="email">
</div>
<div class="th_contact-submit">
<input type="submit" value="submit" class="th_button">
</div>
I want to change the value="submit" to say value="click here"
How do I do that using javascript? I do not have the liberty of changing the form code as it is auto-generated via a theme in wordpress, and they don't have the option of changing the button text.
Fastest way: document.querySelector("#id-59907491 [type=submit]").value = "click here";
Most stable way:
var frm = document.getElementById('id-59907491'),
inp = frm.getElementsByTagName('input'),
l = inp.length, i;
for(i=0;i<l;i++) {
if( inp[i].type == "submit") {
inp[i].value = "click here";
break;
}
}
Assuming there is only one button with the th_button class:
window.onload = function () {
var button = document.getElementsByClassName( 'th_button' )[0];
button.value = "Click Here";
};
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);