Is there any possible way to get an input radio value information (externaly), from a class?
I did a million attempts...
Here is the code im stucked to:
Parent.htm
<html>
<head>
<title></title>
</head>
<body>
<input type="text" id="txtName" readonly="readonly" />
<input type="button" value="Select Name" onclick="SelectName()" />
<script type="text/javascript">
var popup;
function SelectName() {
popup = window.open("Popup.htm", "Popup", "width=300,height=100");
popup.focus();
return false
}
</script>
</body>
</html>
And here is the page that i can't define to get the information that are on value.
Popup.htm
<html>
<body>
<form class="ddlNames">
<input type="radio" name="ddlNames" id="num" value="one">
<input type="radio" name="ddlNames" id="num" value="two">
<input type="radio" name="ddlNames" id="num" value="three">
</form>
<br />
<br />
<input type="button" value="Select" onclick="SetName();" />
<script type="text/javascript">
function SetName() {
if (window.opener != null && !window.opener.closed) {
var txtName = window.opener.document.getElementById("txtName");
txtName.value = document.getElementsByClassName("ddlNames")[0].value;
}
window.close();
}
</script>
</body>
</html>
I tried this way too:
<input type="radio" class="ddlNames" name="ddlNames" id="num" value="one">
<input type="radio" class="ddlNames" name="ddlNames" id="num" value="two">
<input type="radio" class="ddlNames" name="ddlNames" id="num" value="three">
To give each one the ddlNames class, but it's not working?
You can get the checked value using a query-selector
document.querySelector('input[name="ddlNames"]:checked').value;
Related
how can i do dynamic form calculation without submit? submitting is about php server. I need to calculate this form with limiting max values. Example result value can't be above buy value. when above must give error submit button disabled.
I can't find any solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#storage","#result","#account").on(keyup, change(function(){
var abc = $("#abc").val();
var price = $("#price").val();
var storage = $("#capacity").val() - $("#abc").val();
$("#storage").val(storage);
var result = $("#price").val() * $("#abc").val();
$("#result").val(result);
var account = buy - result;
$("#account").val(account);
});
});
</script>
</head>
<body>
<form method="post" action="" >
<input id="buy" type="hidden" class="form-control" name="buy" value="5000000" />
<input type="hidden" id="capacity" class="form-control" name="capacity" value="1000000" />
Storage : <input id="storage" type="text" class="form-control" name="storage" min="0" max="1000000" value=""/><br>
Abc: <input id="abc" type="text" class="form-control" name="abc" min="0" max="1000000" value="" /> <br>
Price: <input id="price" type="text" class="form-control" name="price" value="15" /> <br>
Result: <input id="result" type="text" class="form-control" name="result" value=""/> <br>
Account: <input id="account" type="text" class="form-control" name="account" max="5000000" value="" /> <br>
<input type="button" id="submit" value="submit">
</form>
</body>
</html>
Use an input / keyup event listener. For example (Vanilla JS):
document.getElementById('myInput').addEventListener("keyup", function() {
console.log(document.getElementById("myInput").value);
// Do your stuff here
});
<input id="myInput" />
Or with jQuery:
$('#myInput').keyup(function() {
console.log($("#myInput").val());
// Do your stuff here
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" />
Although this is heplful, JavaScript (besides Node) is client-side and can be easily overriden, so make sure you evaluate the input in the backend too.
I want to create a multiple choice quiz. The questions are on different pages. Each right answer is worth 1 point. I need my js code to keep counting the points when going from one page to another.
Here is my code:
page1.html
<html>
<head>
</head>
<body>
<b>5+5=</b> <br><br>
<form action="" id="questionform">
<input type="radio" name="answer" value="A" onclick="right()"><span>5</span><br>
<input type="radio" name="answer" value="B" onclick="right()" id="rightanswer"><span>10</span><br>
<input type="radio" name="answer" value="C" onclick="right()"><span>15</span><br>
<input type="radio" name="answer" value="D" onclick="right()"><span>20</span><br>
</form>
<input type="submit" value="⬅ Back" id="back" form="questionform" disabled>
<input type="submit" value="Next ➡" id="next" form="questionform" formaction="page2.html">
<script src="scorecode.js"></script>
</body>
</html>
page2.html
<html>
<head>
</head>
<body>
<b>5+20=</b> <br><br>
<form action="" id="questionform">
<input type="radio" name="answer" value="A" onclick="right()"><span>10</span><br>
<input type="radio" name="answer" value="B" onclick="right()"><span>15</span><br>
<input type="radio" name="answer" value="C" onclick="right()"><span>20</span><br>
<input type="radio" name="answer" value="D" onclick="right()" id="rightanswer"><span>25</span><br>
</form>
<input type="submit" value="⬅ Back" id="back" form="questionform" onclick="window.history.go(-1); return false;">
<input type="submit" value="Next ➡" id="next" form="questionform" disabled>
<script src="scorecode.js"></script>
</body>
</html>
scorecode.js
function right() {
var total = 0;
if (document.getElementById("rightanswer").checked) {
total += 1;
console.log(total);
}
}
document.addEventListener("DOMContentLoaded", function () {
right();
});
I also have a problem with the button next. When I click on the button back then on the button next my checked answer disappears. How can I fix it?
You can use localstorage to store that info.
https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage
To set the item use
localStorage.setItem('score', '1');
To get the item on the other page use
var cat = localStorage.getItem('score');
Why wont my popup window pop up?
My user should enter information for an appointment. Once Submit is hit a document window should pop up. The submit button appears to work. The clear button is working also. I programmed a function to handle the window and set the onSubmit to return the function.
< script type = "text/javascript" >
function popUpWindow() { //window should return user's name in a window
newWin = window.open('', 'NewWin', 'toolbar=no,status=no,width=500,height=200');
newWin.document.write("<body bgcolor='yellow'><h3>Appointment Confirmation</h3>);
newWin.document.write("
Your name is: " + document["
form "].name.value);
newWin.document.close();
}
</script>
<html>
<head>
<title>Project</title>
</head>
//this form should accept user's input
<body>
<form name="form" onSubmit="return popUpWindow();">
Please enter your name:
<input type="text" name="name" value="" size="50" />
</p>
<p>
Address:
<input type="text" name="address" size="50" />
</p>
<p>
Phone:
<input type="text" name="area_code" size="10" />
</p>
<p>
Email:
<input type="text" name="email" value="" size="20" />
</p>
<p>
<legend>Stylist</legend>
</p>
<input type="radio" name="stylist" id="stylist1" value="dream" />Dream
<input type="radio" name="stylist" id="stylist2" value="aubrey" />Aubrey
<input type="radio" name="stylist" id="stylist3" value="stag" />Stag
<input type="radio" name="stylist" id="stylist1" value="halo" />Halo
<p>
<legend>Services</legend>
</p>
<input type="checkbox" name="service" id="service1" value="cut" />Cut
<br/>
<input type="checkbox" name="service" id="service2" value="relaxer" />Relaxer
<br/>
<input type="checkbox" name="service" id="service1" value="weave" />Weave
<br/>
<input type="checkbox" name="service" id="service1" value="braids" />Braids
<br/>
<input type="checkbox" name="service" id="service1" value="wash" />Wash and Style
<br/>
<input type="checkbox" name="service" id="service1" value="natural" />Natural
<br/>
<p>Leave Comments</p>
<textarea name="comments" id="comments" align="left" rows "8" cols "75"></textarea>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
</body>
</html>
I have 1 form, with 2 Submit buttons.
When I click one button, I want certain values to be posted. When I click other button I want other values to be posted.
This is what I tried, did not work:
<form action="/test" method="post">
<input type="hidden" id="bool" name="bool" value="" />
<input type="submit" value="Yes" onclick="test()" />
<input type="submit" value="No" onclick="test1()" />
</form>
<script type="text/javascript">
function test() {
document.getElementById('bool').value = "true";
}
function test1() {
document.getElementById('bool').value = "false";
}
</script>
<form action="/test" method="post" name="myform">
<input type="hidden" id="bool" name="bool" value="" />
<input type="button" value="Yes" onclick="test()" />
<input type="button" value="No" onclick="test1()" />
</form>
<script type="text/javascript">
function test() {
document.getElementById('bool').value = "true";
document.myform.submit();
}
function test1() {
document.getElementById('bool').value = "false";
document.myform.submit();
}
</script>
Use this instead:
<form action="/test" method="post" onsubmit="document.getElementById('bool').value = 'true'; return true;">
<input type="hidden" id="bool" name="bool" value="" />
<input type="submit" value="Yes" onclick="test()" />
<input type="submit" value="No" onclick="test1()" />
</form>
How do I do this in javascript where when a radio button is selected only certain fields show up to type in?? Please show work (preferably with JSFiddle) :)
<form action="inc/add_p_c_validate.php" method="post">
Professor<input type="radio" name="addType" value="Professor" />
Course<input type="radio" name="addType" value="Course" />
<br><br>Name: <input type="text" name="name" /><br>
Department: <select name="deptName"><option>Department 1</option> <option>Department 2</option></select>
Email: <input type="text" name="email" /><br>
<input type="submit" name="submit" />
</form>
set onclick event of your radiobuttons to call a function that will check radiobutton status and then will show or hide elements of your form inside specified div elements.
jsfiddle sample
<script language="javascript">
function ChangeForm()
{
if(document.getElementById('Professor').checked)
document.getElementById('fieldset1').style.display = "inline";
else
document.getElementById('fieldset1').style.display = "none";
if(document.getElementById('Course').checked)
document.getElementById('fieldset2').style.display = "inline";
else
document.getElementById('fieldset2').style.display = "none";
}
</script>
<form action="inc/add_p_c_validate.php" method="post">
Professor<input type="radio" name="group1" onclick="ChangeForm()" id="Professor" name="addType" value="Professor" />
Course<input type="radio" name="group1" onclick="ChangeForm()" name="Course" id="Course" value="Course" />
<br><br>
<div id="fieldset1">Name: <input type="text" name="name" /><br>
Department: <select name="deptName"><option>Department 1</option> <option>Department 2</option></select></div>
<div id="fieldset2">Email: <input type="text" name="email" /><br>
<input type="submit" name="submit" /> </div>
</form>