I have a dropdown which i create dynamically through javascript.Out of the blue a blank option gets added at 0th position.Now i wanted to remove this blank option through javascript.The only road block i m facing is checking the blank option.Please help
<title>Dynamic DropDownList</title>
<script type="text/javascript" language="javascript">
function AddItemInList()
{
var list = document.getElementById('DropDownList1');
var box = document.getElementById('Text1');
var newListItem = document.createElement('OPTION');
newListItem.text = box.value;
newListItem.value = box.value;
list.add(newListItem);
box.value = "";
box.focus();
}
function RemoveItemInList()
{
var list = document.getElementById('DropDownList1');
if(list.options.length > 0)
{
for(var i = list.options.length - 1; i >= 0; i--)
{
if(list.options[i].selected)
{
list.remove(i);
return false;
}
}
}
else
{
alert('Unable to remove. List is Empty!');
}
}
</script>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="Add New" onclick="AddItemInList();"/>
<input id="Button2" type="button" value="Remove Item" onclick="return RemoveItemInList();"/>
</div>
</form>
Related
I am doing a program to perform tests, however I have to fulfil a requirement: that the teacher can determine the amount of questions that each test will have. Currently each exam consists of 10 questions but I have no idea what to do or what method to modify to meet this requirement. Any ideas?
Here are my methods for the creation of exams:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#txt_question {
height: 184px;
width: 472px;
}
.answerBox {
width: 400px;
}
#btn_next0 {
margin-left: 11px;
}
</style>
</head>
<body style="height: 500px">
<form id="form1" runat="server">
<div>
Título del Examen:
<asp:TextBox ID="txt_title" runat="server"> </asp:TextBox><br />
<textarea id="txt_question"></textarea> <br />
<div id="here_radios">
<input id="rb_answer0" type="radio" name="answerBtn" value="0" class="answerBtn" /> <input id="txt_answer0" type="text" class="answerBox" /> <br />
<input id="rb_answer1" type="radio" name="answerBtn" value="1" class="answerBtn" /> <input id="txt_answer1" type="text" class="answerBox" /> <br />
<input id="rb_answer2" type="radio" name="answerBtn" value="2" class="answerBtn" /> <input id="txt_answer2" type="text" class="answerBox" /> <br />
</div>
<input id="btn_back" type="button" value="Pregunta Anterior" onclick="goBack()" />
<input id="btn_next" type="button" value="Siguiente Pregunta" onclick="saveJson()" /><input id="btn_cant" type="button" value="Cantidad preguntas" onclick="saveJson()" /><br />
<asp:Button ID="btn_finish" runat="server" Text="Terminar" OnClientClick="cstest()" OnClick="btn_finish_Click" />
</div>
<asp:HiddenField ID="hf_hook" runat="server" />
</form>
<%-- CLIENT CODE --%>
<script>
var exam = [];
var index = 0;
function saveJson() {
var data = {}
var gotAnswers = [];
var radios = here_radios.getElementsByClassName("answerBtn");
var boxes = here_radios.getElementsByClassName("answerBox");
data["pregunta"] = txt_question.value;
data["correcta"] = "0";
for (var i = 0; i < radios.length; i++) {
gotAnswers.push(boxes[i].value);
if (radios[i].checked) {
data["correcta"] = radios[i].value;
}
boxes[i].value = "";
}
data["respuestas"] = gotAnswers;
txt_question.value = "";
exam[index] = data;
index++;
if (typeof exam[index] !== 'undefined') {
populate(index);
}
}
function goBack() {
if (index > 0) {
index--;
populate(index);
}
}
function populate(index) {
var radios = here_radios.getElementsByClassName("answerBtn");
var boxes = here_radios.getElementsByClassName("answerBox");
txt_question.value = exam[index].pregunta;
for (var i = 0; i < exam[index].respuestas.length; i++) {
boxes[i].value = exam[index].respuestas[i];
radios[i].checked = (exam[index].correcta == i);
}
}
function cstest() {
saveJson();
var data = [];
exam.forEach(function(e) {
data.push(JSON.stringify(e));
});
hf_hook.value = data.join("▄");
}
</script>
</body>
</html>
Thank u so much for your help or ideas!
<script type="text/javascript">
/* run on document load **/
function disp() {
//var text = document.getElementById('TextArea1').value;
var text = document.getElementById('MainContent_TextArea1').value;
//alert('a')
if (text == null)
{
return false;
}
else
{
var t = text;
var t = text.substr(text.selectionStart, text.selectionEnd -text.selectionStart);
document.getElementById('displayval').value = t;
alert(t)
}
}
</script>
<div>
<input id="TextArea1" runat="server" type="text"/>
<INPUT type="button" onclick= "disp()" visible="true" value="Show"/>
<INPUT type="text" id ="displayval" visible="true" />
</div>
Here I am trying to display the Text which is selected by user. But unfortunately in var t = text.substr(text.selectionStart, text.selectionEnd -text.selectionStart); getting error.
It is not working. Any wrong in this code. Please help me with correcting this..
<script type="text/javascript">
function disp() {
var txtArea = document.getElementById('TextArea1');
var start = txtArea.selectionStart;
var finish = txtArea.selectionEnd;
var sel = txtArea.value.substring(start, finish);
document.getElementById('displayval').value = sel;
alert(sel);
}
</script>
<div>
<input id="TextArea1" runat="server" type="text"/>
<input type="button" onclick= "disp()" visible="true" value="Show"/>
<input type="text" id ="displayval" visible="true" />
</div>
When I click on back button of next page the check box value should not be reset.
It should be same as I checked or unchecked. The code from the first and next page is below.
First Page
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" name="code" value="ECE">ECE<br>
<input type="checkbox" name="code" value="CSE">CSE<br>
<input type="checkbox" name="code" value="ISE">ISE<br>
<br>
<input type="button" onclick="dropFunction()" value="save">
<br><br>
<script>
function dropFunction() {
var branch = document.getElementsByName("code");
var out = "";
for (var i = 0; i < branch.length; i++) {
if (branch[i].checked == true) {
out = out + branch[i].value + " ";
window.location.href="next.html";
}
}
}
</script>
</form>
</body>
</html>
Next Page
<html>
<head>
<title>Welcome to </title>
</head>
<body color="yellow" text="blue">
<h1>welcome to page</h1>
<h2>here we go </h2>
<p> hello everybody<br></p>
</body>
<image src="D:\images.jpg" width="300" height="200"><br>
<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
window.location.href="first.html";
}
</script>
</body>
</html>
Full solution: example. First add ids to your checkboxes:
<input type="checkbox" name="code" value="ECE" id='1'>ECE<br>
<input type="checkbox" name="code" value="CSE" id='2'>CSE<br>
<input type="checkbox" name="code" value="ISE" id='3'>ISE<br>
<input id="spy" style="visibility:hidden"/>
Then change your dropFunction:
function dropFunction() {
var branch = document.getElementsByName("code");
var out = "";
localStorage.clear();
for (var i = 0; i < branch.length; i++)
if (branch[i].checked == true)
localStorage.setItem(branch[i].id, true);
for (var i = 0; i < branch.length; i++) {
if (branch[i].checked == true) {
out = out + branch[i].value + " ";
window.location.href="next.html";
}
}
}
And add some new javascript code to first.html:
window.onload = function() {
var spy = document.getElementById("spy");
if(spy.value=='visited')
for(var i=1;i<=3;i++)
if(localStorage.getItem(i))
document.getElementById(i).checked=true;
spy.value = 'visited';
}
How can you create a button so that whenever you click on it a question changes to its uppercase form, then when you click the button again it changes to its lowercase form. I believe I should create a function of some sort, just not sure how. Below is what I have tried so far:
function upper_lower() {
if (windows.document.f1.value=="lower") {
windows.document.value = "UPPER"
windows.document.question = windows.document.question.toUpperCase();
windows.document.queston.size="40"
} else {
windows.document.value = "lower"
windows.document.question = windows.document.question.toLowerCase()
windows.document.queston.size="30"
}
}
Question
<input type="text" name="question" value="Favorite food?" size="25">
readonly /input
<input type="button" name="f1" value="UPPER" onClick = "upper_lower">
Try this
Html:
Question <input type="text" name="question" id="question1" value="Favorite food?" size="25" readonly></input>
<input type="button" name="f1" id="button1" value="UPPER" onClick="upper_lower()"></input>
js:
var toggle = true;
function upper_lower(){
var question = document.getElementById('question1'),
button = document.getElementById('button1');
if(toggle){
question.value = question.value.toUpperCase();
button.value = 'LOWER';
toggle = false;
} else{
question.value = question.value.toLowerCase();
button.value = 'UPPER';
toggle = true;
}
}
Snippet below (indented weird for some reason)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
Question <input type="text" name="question" id="question1" value="Favorite food?" size="25" readonly></input>
<input type="button" name="f1" id="button1" value="UPPER" onClick="upper_lower()"></input>
</body>
<script>
var toggle = true;
function upper_lower(){
var question = document.getElementById('question1'),
button = document.getElementById('button1');
if(toggle){
question.value = question.value.toUpperCase();
button.value = 'LOWER';
toggle = false;
} else{
question.value = question.value.toLowerCase();
button.value = 'UPPER';
toggle = true;
}
}
</script>
</html>
Try This Updated Code...
<script type="text/javascript">
var flag = 0;
function changecase() {
if (flag == 0) {
document.form1.instring.value = document.form1.instring.value.toUpperCase();
document.form1.Convert.value = 'To Lower'
flag = 1;
}
else
{
document.form1.instring.value = document.form1.instring.value.toLowerCase();
document.form1.Convert.value = 'To Upper'
flag = 0;
}
}
</script>
<form name="form1" method="post">
<input name="instring" type="text" value="this is the text string" size="30">
<input type="button" name="Convert" value="To Upper " onclick="changecase();">
</form>
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);