So, I'm currently doing my final internship for the Network Administration training at school. And I've been asked to create a simple web page that allows for selecting a range of servers to perform a clean install on. Like: when I select 'Server 1' and 'Server 4' > click 'Submit' > confirm my action > launch VBscript that performs clean install.
What I have so far (also refer to pieces of code at end):
- Basic welcome text
- Check boxes
- Select all (javascript)
- Continue button
- When clicking continue button > show warning that asks for confirmation
What I want it to do, is launching the script of the selected box(es) after confirming. Is that possible? I mean, I assume I'll need something else than HTML. Javascript maybe? How would I do such thing?
I'm not a total expert with this stuff, not at all. I do have some experience with HTML and CSS, but Javascript and all that? Nope, not at all. Would be very happy to have some help with this!
<html>
<head>
<title>
Huawei Cleaning Center
</title>
<script type="text/javascript">
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
if(!document.forms[FormName])
return;
var objCheckBoxes = document.forms[FormName].elements[FieldName];
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
// set the check value for all check boxes
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = CheckValue;
}
</script>
<script type="text/javascript">
function clicked() {
if (confirm('Weet u zeker dat u wilt doorgaan?')) {
yourformelement.submit();
} else {
return false;
}
}
</script>
</head>
<body>
<center><h1>Welkom bij Huawei Cleaning Center!</h1></center>
<br><br>
Kruis één of meerdere van de volgende servers aan waarop u een Clean Install wilt uitvoeren:<br><br>
<form method="GET" action="page17.php" name="myForm" onsubmit="return false;">
<label for="myCheckbox1">
<input type="checkbox" name="myCheckbox" value="1" id="myCheckbox1">
172.16.115.11 </label>
<br>
<label for="myCheckbox2"><input type="checkbox" name="myCheckbox" value="2" id="myCheckbox2">
172.16.115.21 </label>
<br>
<label for="myCheckbox3"><input type="checkbox" name="myCheckbox" value="3" id="myCheckbox3">
172.16.115.31 </label>
<br>
<label for="myCheckbox4"><input type="checkbox" name="myCheckbox" value="4" id="myCheckbox4">
172.16.115.41 </label>
<br><br><input type="submit" id="submit1" onclick="clicked();" value="Doorgaan">
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', true);" value="Selecteer alles">
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', false);" value="Deselecteer alles">
</form>
</body>
</html>
Change your js like this. Form gonna submit if you click yes
<script type="text/javascript">
function clicked() {
var confirmed = confirm('Weet u zeker dat u wilt doorgaan?')
if (confirmed) {
yourformelement.submit();
} else {
alert('You clicked No');
}
}
</script>
if you use JQuery you also could do this:
$(yourformelement).submit(function(e){
var dialogresult = confirm('Confirm');
if (dialogresult ) {
return true;
} else {
return false;
}
});
Looking at your code, it seems like you're using PHP. In this case you could try something like this in your php page (page17.php as referred in the action attribute):
if(!empty($_POST['serverList'])) {
foreach($_POST['serverList'] as $arg) {
exec('cscript "path/to/script.vbs" ' . $arg);
}
}
$_POST['serverList'] contains an array of the checkboxes values and the foraech loop will execute a VBscript passing the values as arguments.
Here's a snippet of the JS/CSS/HTML code:
function setCheckboxes(checkboxName, value) {
checkboxes = document.getElementsByName(checkboxName);
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = value;
}
}
function submitForm(checkboxName) {
checkboxes = document.getElementsByName(checkboxName);
for (var i = 0, n = checkboxes.length; i < n; i++) {
if (checkboxes[i].checked == true) {
confirmation = confirm('Weet u zeker dat u wilt doorgaan?');
if (confirmation) {
return true;
} else {
return false;
}
}
}
alert('No server selected!');
return false;
}
.main-heading {
margin-bottom: 60px;
text-align: center;
}
.info {
margin-bottom: 60px;
}
<h1 class="main-heading">Welkom bij Huawei Cleaning Center!</h1>
<p class="info">
Kruis één of meerdere van de volgende servers aan waarop u een Clean Install wilt uitvoeren:
</p>
<form method="POST" action="page17.php" name="myForm" onsubmit="return false;">
<label for="checkbox-1">
<input type="checkbox" name="serverList[]" value="1" id="checkbox-1">
172.16.115.11
</label>
<br>
<label for="checkbox-2">
<input type="checkbox" name="serverList[]" value="2" id="checkbox-2">
172.16.115.21
</label>
<br>
<label for="checkbox-3">
<input type="checkbox" name="serverList[]" value="3" id="checkbox-3">
172.16.115.31
</label>
<br>
<label for="checkbox-4">
<input type="checkbox" name="serverList[]" value="4" id="checkbox-4">
172.16.115.41
</label>
<br><br>
<input type="submit" onclick="submitForm('serverList[]');" value="Doorgaan">
<input type="button" onclick="setCheckboxes('serverList[]', true);" value="Selecteer alles">
<input type="reset" value="Deselecteer alles">
</form>
Hope it helps :)
Related
Today I have a tricky (for me at least) question. There is a bug in my code, I don't know how to eliminate it. Basically I'm creating a simple Form in JavaScript as an homework, and I encountered this problem.
I have to enter my age in this form, and for now it's all ok. But I have to enter it twice: one with an <input> tag and one with a popup window. I can input the value in the <input> tag just fine, but when I'm trying to input the value by the prompt(), it "resets" the script, so I lose the value in the <input> object.
I need a way to store these information somewhere, or stop the prompt() from deleting these values or resetting the page.
<html lang="en">
<head>
<title>Document</title>
<style>
* {margin: 0; padding: 0;}
body {padding: 20px;}
</style>
<script>
var eta_btn;
function eta_controllo(eta_btn) {
eta_btn = Number(prompt("Inserisci la tua età"));
console.log(eta_btn);
}
function profession() {
var temp = document.getElementById("select").selectedIndex;
if (temp == 0) {
document.getElementById("lavoratore_txt").style.display = "";
document.getElementById("studente_txt").style.display = "none";
} else if (temp == 1) {
document.getElementById("studente_txt").style.display = "";
document.getElementById("lavoratore_txt").style.display = "none";
} else {
document.getElementById("studente_txt").style.display = "none";
document.getElementById("lavoratore_txt").style.display = "none";
}
}
function send_to_server() {
if (!(eta_btn == document.getElementById("età").value)) {
alert("Le due età inserite non sono concordi");
return false;
}
else if (eta_btn == document.getElementById("età").value && eta_btn < 14) {
alert("Hai meno di 14 anni!");
return false;
} else if (confirm("Sicuro di aver scelto la provincia " + document.querySelector('input[name="città"]:checked').value))
alert("Dati inviati correttamente");
else {
alert("Errore");
return false;
}
}
</script>
</head>
<body>
<form action="">
<p>NOME</p>
<input placeholder="scrivi qui il tuo nome" type="text"><br><br>
<p>PASSWORD</p>
<input placeholder="scrivi qui la tua password" type="text"><br><br>
<p>ETA'</p>
<input placeholder="scrivi qui la tua età" type="text" id="età">
<button onclick="eta_controllo()">CONTROLLO</button><br><br>
<input name="città" type="radio">GENOVA<br>
<input name="città" type="radio">SAVONA<br>
<input name="città" type="radio">IMPERIA<br>
<input name="città" type="radio">LA SPEZIA<br><br>
<select name="" id="select" onchange="profession()">
<option value="lavoratore">Lavoratore</option>
<option value="studente">Studente</option>
<option value="disoccupato">Disoccupato</option>
</select>
<p id="studente_txt" style="display: none">Vai a studiare!</p><br>
<textarea id="lavoratore_txt" style="display: none;" name="" id="" cols="30" rows="10"></textarea><br><br>
<button>ANNULLA TUTTO</button>
<button onclick="send_to_server()">INVIA AL SERVER</button>
</form>
</body>
</html>
All you have to do is to add type="button" to the button.
The default type of button is "submit", so when you click it, it will submit the form.
Hi have you already taken a look at this link?
It could be ulile in my opinion ..
there are no global variables to manage the memories ..
The Localstorage of the browser.
I hope I have been of help .. good studyhttps://www.w3schools.com/jsref/prop_win_localstorage.asp
I've made a small test/quiz with radio and checkbox types. Radio button in my code is mandatory to be checked and when it is, I get the total score for all correct answers, when it's not I get alert message that i need to check all questions.
Now I want to expand this quiz.
1st problem: I've made multiple radio type questions, I don't know how to check if all radio type questions are checked.
2nd problem: I've made test type questions and I want them to be seen after I push "Finish" (alongside total score from test questions), but when I push "Finish" I do not see the text type answers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./CSS/reset.css">
<link rel="stylesheet" href="./CSS/main.css">
<title>Exam</title>
<script src="./JS/assessor.js"></script>
</head>
<body>
<section>
<main>
<h2>This is the exam</h2>
<form name="exam" id="exam">
<div class="question">
<div class="questionTitle">Question 1</div>
<p><input type="radio" id="answer1" name="answer1" value="wrong">wrong</p>
<p><input type="radio" id="answer1" name="answer1" value="wrong">wrong</p>
<p><input type="radio" id="answer1" name="answer1" value="wrong">wrong</p>
<p><input type="radio" id="answer1" name="answer1" value="right">right</p>
</div>
<div class="question">
<div class="questionTitle1">Question 1</div>
<p><input type="radio" id="answer3" name="answer3" value="wrong">wrong</p>
<p><input type="radio" id="answer3" name="answer3" value="wrong">wrong</p>
<p><input type="radio" id="answer3" name="answer3" value="wrong">wrong</p>
<p><input type="radio" id="answer3" name="answer3" value="right">right</p>
</div>
<div class="question">
<div class="questionTitle">Question 2</div>
<p><input type="checkbox" id="answer2wrong1" name="answer2_1" value="wrong">wrong</p>
<p><input type="checkbox" id="answer2right1" name="answer2_2" value="right">right</p>
<p><input type="checkbox" id="answer2right2" name="answer2_2" value="right">right</p>
<p><input type="checkbox" id="answer2wrong2" name="answer2_4" value="wrong">wrong</p>
</div>
<div>
<label for="fname">First field</label><br>
<input type="text" id="fname" name="fname" value="button1"><br>
<label for="fname">Second field</label><br>
<input type="text" id="fname" name="fname" value="button2"><br>
<label for="fname">Third field</label><br>
<input type="text" id="fname" name="fname" value="button3"><br>
</div>
<input type="button" id="button" name="" value="Finish" onclick="validate();assess()">
</form>
<p id="result"></p>
</main>
</section>
</body>
</html>
function validate() {
var valid = false;
var x = document.exam.answer1;
for(var i=0; i<x.length; i++) {
if (x[i].checked) {
valid= true;
break;
}
}
if(valid) {
assess();
}
else {
alert("All questions must be checked");
return false
}
function assess() {
var score=0;
var q1=document.exam.answer1.value;
var result=document.getElementById('result');
var exam=document.getElementById('exam');
if (q1=="right") {score++}
if (answer2right1.checked===true) {score += 0.5}
if (answer2right2.checked===true) {score += 0.5}
if (answer2wrong1.checked===true) {score -= 0.5}
if (answer2wrong2.checked===true) {score -= 0.5}
exam.style.display="none";
result.textContent=`${score}`;
}
}
Nobody replies to me so I try to figure it out myself. Yet I face problems.
1st example:
I get Success when i check 1st questions answer, but i need to check if all questions are checked, and I need to do it at once. In this code i can only check 1 question's status wether checked or not.
var mark = document.getElementsByTagName('input');
for (var i=0; i<mark.length; i++) {
if (mark[i].type == 'radio' && mark[i].name=="answer1" && mark[i].checked==true) {
alert("YES")
break;
}
}
2nd example:
In this code it doesnt recognize my ID at all and neither true or false work.
if(document.getElementById("answer1").checked==true) {
alert("Success");
}
else {
alert("All questions must be checked");
}
I figured it out myself. I added few lines where for checked answer in every question the "filledQuestion" score increases by 1. Then if "filledQuestion" score is equal to the number of questions, it passes, if not, it shows error message.
function validate() {
var mark = document.getElementsByTagName('input');
var filledQuestion = 0;
for (var i=0; i<mark.length; i++) {
if (mark[i].type == 'radio' && mark[i].name=="answerR1" && mark[i].checked==true) {
filledQuestion = filledQuestion + 1
}
else if (mark[i].type == 'radio' && mark[i].name=="answerR2" && mark[i].checked==true) {
filledQuestion = filledQuestion + 1
break;
}
}
if (filledQuestion == 2) {
assess();
showDiv();
}
else (alert("All questions must be checked"))
My second issue was due to my choice to use ( exam.style.display="none"; ) line. When i do not use it, the score is visible in the same page and therefore i can see all the changes after i submit the form.
I have a html form with such structure:
...
<select name="Employee">
<option>a</option>
<option>b</option>
</select>
<input type="checkbox" name="email" value="Yes" unchecked>Include Email Contact
<input type="checkbox" name="phone" value="Yes" unchecked>Include Phone Contact
Job Title: <input type="Text" name="jobTitle" size="20"><br>
<input type="Button" value="Generate" onclick="show()" id="refresh">
...
And a div:
<div class="data">
<div class="ft_name"></div>
<div class="ft_pos"></div>
<div class="ft_tbl_meta">E-Mail:</div>
<div class="ft_tbl_data"></div>
<div class="ft_tbl_meta">Phone:</div>
<div class="ft_tbl_data"></div>
</div>
How can I show my values in div section by pressing the button without reloading the entire page?
I know Javascript a bit, but unfortunately, didn't find the answer yet.
Thank you in advance!
Here is one solution, using unobtrusive vanilla javascript.
The function showData() runs when the button is clicked.
Then, the function showData():
gets the Boolean value of each checkbox (either true if checked or false if unchecked)
rewrites the Boolean value as a string (a value of true becomes 'Yes' and a value of false becomes 'No')
rewrites the relevant data field, including the string.
function showData() {
var emailValue = document.querySelector('input[value="email"]').checked;
var phoneValue = document.querySelector('input[value="phone"]').checked;
var data = document.getElementsByClassName('data')[0];
var dataFields = data.getElementsByTagName('div');
if (emailValue === true) {emailValue = 'Yes';} else {emailValue = 'No';}
if (phoneValue === true) {phoneValue = 'Yes';} else {phoneValue = 'No';}
for (var i = 0; i < dataFields.length; i++) {
switch (i) {
case (0) : dataFields[i].textContent = 'E-Mail: ' + emailValue; break;
case (1) : dataFields[i].textContent = 'Phone: ' + phoneValue; break;
}
}
}
var button = document.querySelector('input[type="button"]');
button.addEventListener('click',showData,false);
form, .data, label, input[type="button"] {
display: block;
}
form, .data {
float: left;
width: 200px;
}
input[type="button"] {
margin-top: 24px;
}
<form>
<label><input type="checkbox" name="contact" value="email" unchecked>Include Email Contact</label>
<label><input type="checkbox" name="contact" value="phone" unchecked>Include Phone Contact</label>
<input type="Button" value="Generate">
</form>
<div class="data">
<div class="ft_tbl_meta">E-Mail:</div>
<div class="ft_tbl_meta">Phone:</div>
</div>
set some IDs for your divs you wish to take/assign values from/to and put this code
IncludeEmailCheckBox is for your "include Email" checkbox
EmailToDiv is for your div to get the email
EmailFromDiv is for your input for Email
IncludePhoneCheckBox is for your "include Phone" checkbox
PhoneToDiv is for your div to get the Phone
PhoneFromDiv is for your input for Phone
function show(){
if (document.getElementById("IncludeEmailCheckBox").checked){
document.getElementById("EmailToDiv").innerHTML = document.getElementById("EmailFromDiv").innerHTML ;}
if (document.getElementById("IncludePhoneCheckBox").checked){
document.getElementById("PhoneToDiv").innerHTML = document.getElementById("PhoneFromDiv").innerHTML ;}
return false;
}
Remember to change IDs as nessesary
Get elements of class by calling document.getElementsByClassName(class_name)
Example javascript code below
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function testResults (form) {
var x = document.getElementsByClassName("ft_name");
x[0].innerHTML = form.name.value;
x = document.getElementsByClassName("ft_tbl_meta");
x[0].innerHTML = form.email.value; // name email is one provided in form
// Do same for all other classes
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">Enter something in the box: <BR>
<input type="checkbox" name="email" value="Yes" unchecked>Include
Email Contact
<input type="checkbox" name="phone" value="Yes" unchecked>Include Phone Contact
Job Title: <input type="Text" name="jobTitle" size="20"><br>
<input type="Button" value="Generate" onclick="show(this.form)" id="refresh">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
</FORM>
</BODY>
</HTML>
here is your view (I updated) using Jquery:
<div class="data">
<div class="ft_name"></div>
<div class="ft_pos"></div>
<div class="ft_tbl_meta">E-Mail:<span id="email_here"></span></div>
<div class="ft_tbl_data"></div>
<div class="ft_tbl_meta">Phone:<span id="phone_here"></span></div>
<div class="ft_tbl_data"></div>
</div>
Now fetching and printing values:
var Employee = $( "select[name=Employee]" ).val();
$('.ft_name').html(Employee);
var email = $( "input[name=email]" ).val();
$('#email_here').html(email);
var phone = $( "input[name=phone]" ).val();
$('#phone_here').html(phone);
var jobTitle = $( "input[name=jobTitle]" ).val();
$('.ft_pos').html(jobTitle);
I would like to display an alert message in my webpage in case the size or colour radio button was not selected into the form. Can anybody help me? I tried something but did not worked. See below my code:
<div id="Form"><form method="POST" autocomplete="off" title="Product">
<input name="title" type="hidden" id="title" value="0">
<br>
<p name="cor">
<strong>
<label><br>Color:</strong></span><br>
</label>
<label><input type="radio" name="cor" value="white" id="cor_0">
White</label></p>
<p name="Size">
<label><br>Size:<br></label>
<label><input type="radio" name="size" value="22" id="22" onclick="setShoppingCartUrl(this)">
M</label>
<label><input type="radio" name="size" value="23" id="23" onclick="setShoppingCartUrl(this)">
G</label>
</strong></p>
<p><br></p>
<script>
baseurl = 'cart2.php?add=';
function setShoppingCartUrl(e) {
document.getElementById('shoppingcart').href=baseurl+e.value
}
</script></div>
<div><script>
function setShoppingCartindexUrl()
if (value < 20) {
alert('<?php echo "Please select your size"; ?>');
}
else {
href="cart2.php?add=."
} </script>
<a id="shoppingcart" onclick="setShoppingCartindexUrl()" target="_self"><img src="images/carrinho01.jpg" alt="noiva em detalhes" width="100%" height="100%" align="rigth" margin-right="8%"/></a>
</div>
</form>
After some researches I founded exactly what I need, so below my code after implementation...
<script>
function validateForm() {
var x = document.forms["myForm"]["size"].value;
if (x == null || x == "") {
alert("Querida cliente, favor selecionar o tamanho desejado antes de adicionar ao carrinho.");
return false;
}
else {
href="cart2.php?add=."
}}
</script>
<a id="shoppingcart" onclick="validateForm()" target="_self"><img src="images/carrinho01.jpg" alt="noiva em detalhes" width="100%" height="100%" align="rigth" margin-right="8%"/></a>
I have problem on the checkbox submission. The code is as below:
JavaScript
function init () {
document.getElementById("pizza").topping[0].checked=true;
document.getElementById("btn").onclick=poll;
}
onload = init;
function poll () {
var i, isOK, summary="";
var form=document.getElementById("pizza");
for (i=0; i < form.topping.length; i++) {
if (form.topping[i].checked) {
summary+=form.topping[i].value+" ";
}
}
isOK = confirm("Submit these choices?\n" + summary);
if (isOK) {
form.submit();
} else {
return false;
}
}
HTML
<form id="pizza" action="poll.php" method="POST">
<div id="panel">Pizza Topping?
<input type="checkbox" name="topping" value="Cheese">Cheese</input>
<input type="checkbox" name="topping" value="Ham">Ham</input>
<input type="checkbox" name="topping" value="Peppers">Peppers</input>
<input id="btn" type="button" value="Confirm Choices"></input>
</div>
</form>
poll.php
<?php
echo "<br>***************<br>";
var_dump($_POST);
echo '*********************';
?>
The JS confirm message:
Submit these choices?
Cheese Peppers
The output of poll.php:
array (size=1)
'topping' => string 'Peppers' (length=7)
So my problem is: I checked Cheese and Peppers but I only got Peppers submitted. Can anyone help me?
Give an array like name(with the suffix []) to the input elements
<input type="checkbox" name="topping[]" value="Cheese">Cheese</input>
<input type="checkbox" name="topping[]" value="Ham">Ham</input>
<input type="checkbox" name="topping[]" value="Peppers">Peppers</input>