Develop Reference

How can I set a parameter into the next reload of a jsp?

I have a JSP file that has 10 buttons, clicking on any of the ten should set a parameter into itself and reload, so that the reloading page would read that parameter and then decide which array location needs to be passed to a java function.
So for example, clicking on button0 should set "election" parameter to 0, button1 to 1, etc.
So that the url looks like somesite/somepage.jsp?election=0, somesite/somepage.jsp?election=1, etc.
I try to do so declaring each button inside a form like so:
<form name="form1" action="SomePage.jsp" method="post">
<button class="btn" type="submit" onclick="btns(0)">
See product 0
</button>
<button class="btn" type="submit" onclick="btns(1)">
See product 1
</button>
etc...
</form>
and using the following method every time any of the ten buttons is clicked:
<script language="JavaScript">
function btns(num){
document.form1.btnElection.value = num;
form1.submit();
}
</script>
but every time I get btnElection it returns null instead of {0 .. 9}
The way I get and check the parameter is this way:
<% if (request.getParameter("btnElection") == null) {
setElection("0");
session.setAttribute("eleccion", "0");
requestData("0");
} else {
String e = request.getParameter("btnElection");
if(e != null){
session.setAttribute("eleccion", e);
setElection(e);
requestData(e);
} else {
error = "Error: btnElection = " + e + ".";
}
}
%>
Any ideas? Thanks

As Swati said in the comment above, the problem with my previous code was not putting a hidden <input> inside the <form> which is modified by the <script> each time a button is pressed, assigned every time the page is reloaded with the parameter in the url ie:somesite/somepage.jsp?election=0, and read by the jsp itself.
That would be declaring each button inside a form like so:
<form name="form1" action="SomePage.jsp">
<button class="btn" type="submit" onclick="btns(0)">
See product 0
</button>
<button class="btn" type="submit" onclick="btns(1)">
See product 1
</button>
etc...
</form>
Using the following method every time any of the ten buttons is clicked, by calling btns() assigned in the arguments of each button's onClick:
<script language="JavaScript">
function btns(num){
document.form1.btnElection.value = num;
form1.submit();
}
</script>
And reading the parameter in this particular case, this way:
<% if (request.getParameter("btnElection") == null) {
session.setAttribute("eleccion", "0");
} else {
String e = request.getParameter("btnElection");
if(e != null){
session.setAttribute("eleccion", e);
} else {
...
}
}
%>

javascript & html - creating new checkbox option everytime user enters item in textbox

So basically I'm creating a program that allows the user to create and manage a ‘to-do list’. This will allow the user to add new items, remove selected items, highlight/un-highlight selected items, and sort the items, etc. I'm currently working on the add button, but I'm extremely confused with different functions in HTML and code that will allow me to manipulate the DOM.
When the user clicks the add button and the item name is valid, a new item should be added to the page’s to-do list (which esentially creates a new checkbox for every item the user adds). The checkbox is basically so the item can be selected/deselected, as well as the text that was in the item name textbox when the add button was clicked.
I guess I have two problems right now. I'm trying to verify that the item name is at least 1 character long. I wrote code in my "addHandler.js" file but when I write nothing in the textbox and click on the add button on my HTML browser, no error message pops up. I don't know why it's ignoring my function. Another thing I'm struggling with is the part that creates a new checkbox for every valid item that is added. I know how to create a checkbox on my HTML page, but I don't understand how to get my program to create a new one per item that the user inputs.
Any help or push in the right direction would be appreciated. I'm also new to HTML and javascript, so explaining stuff in simple terms would also make me really grateful.
todo.html code:
<html>
<head>
<title>Checklist</title>
</head>
<body>
<div><h1>My to-do list</h1></div><br />
<div id ="myCheckList">Enter an item:</div>
<div>Type something: <input type="text" id="textbox"></input></div>
<button type="button" id="addBut">Add item</button>
<button type="button" id="removeBut">Remove items</button>
<button type="button" id="toggleBut">Toggle highlight</button>
<button type="button" id="sortBut">Sort items</button>
<script src="addHandler.js"></script>
</body>
</html>
addHandler.js code:
function init(){
let button = document.getElementById("addBut");
button.onclick = buttonClicked;
let tb = document.getElementById("textbox");
tb.onblur = validate;
}
function add(){
let someEle = document.getElementById("myCheckList");
someEle.innerHTML = 'You added an item';
}
function validate(){
if(document.getElementById("textbox").value.length == 0){
alert("You need to enter something");
}
}

You should have a wrapper that contains your checkbox items that you can append new elements to.
<div id="checklist_items"></div>
Then you can use the following function to create a new div that contains a checkbox and the entered text, and then append it to your checklist:
function addItem() {
var input = document.getElementById("textbox");
var wrapper = document.getElementById("checklist_items");
if(input.value.trim() != "") {
var new_element = document.createElement("DIV");
new_element.innerHTML = '<input type="checkbox"> '+input.value;
wrapper.appendChild(new_element);
}
else {
alert("You must enter at least 1 character.");
}
}
I would also use the following to add the function to your button:
document.getElementById("addBut").addEventListener("click", addItem);

What is the value of an empty text input box?

I am trying to implement a search box. The following is the code (both HTML and JS)
HTML
<form>
<input type="text" ng-model="searchVar" class="searchbox">
<input type="button" value="Search" ng-click="Search()" class="button">
</form>
JS
var Search = function() {
/* code to implement the table content loading part */
//The following is what I have to filter out the table contents based on input in the text field
if (($scope.searchVar) && (tableContent[i].indexOf($scope.searchVar) !== -1)) {
ItemsToDisplay.push(tableContent[i])
}
//Call function to load table
}
What is happening is that, if I enter some string into the input text field, the search algorithm works fine and only the relevant items are displayed. However, if I clear the contents of the search box and click on Search button, nothing is displayed in the table. That is, when the text field is cleared and clicked on the search button, it is as if ItemsToDisplay is empty and the if condition fails.
Can someone explain why this is the case? And how I can solve this?

Before your indexOf($searchVar) you should check that searchVar is != ''. Otherwise no item will be displayed afterward. A suggestion, javascript has a really great console.log functionality that will help you a lot when it comes to if branches

If you cleared input, the value of $scope.searchVar willbe undefined and your condition
if (($scope.searchVar) && (tableContent[i].indexOf($scope.searchVar) !== -1)) {...}
will be false, so you didn't push into ItemsToDisplay and nothing append.
I suggest you to write an else statement :
if (($scope.searchVar) && (tableContent[i].indexOf($scope.searchVar) !== -1)) {...}
else {
ItemsToDisplay.push(tableContent[i]);
}

U can try with,
if (($scope.searchVar) != undefined)
or
if (typeof ($scope.searchVar) != 'undefined')

when you do not enter anything in INPUT box then its value become UNDEFINED.
you will have to check in if() condition, if input is undefined then write your logic, if input has some value then write your logic.
<form>
<input type="text" ng-model="searchVar" class="searchbox">
<input type="button" value="Search" ng-click="Search()" class="button">
</form>
var Search = function()
{
if ( $scope.searchVar == undefined){
//Do something, input box is undefined
}
if (($scope.searchVar) && (tableContent[i].indexOf($scope.searchVar) !== -1)) {
ItemsToDisplay.push(tableContent[i]);
}
}

Is it possible to repeatedly use the same text box to get input from users in HTML & Javascript?

So I have a created a text box using html code along with a button for "confirm"
<input type="text" id="myInput" style="height: 10px; width: 50px" value="">
<button onclick="enter_value()">Confirm</button>
What I intend to do is to use the same text box over and over for different inputs as the website guides the user to do different tasks (which all functions are written in js)
I'm trying to figure out a way to use this same text box for all inputs users have to insert, but so far nothing is working.
I tried creating a function like:
function enter_value(){
var name = document.getElementById("myInput").value;
}
This should be able to store the value of the input in the variable name. Problem is, I want to execute this when button is pressed, but the button is not responding and the variable "name" always returns "Enter Your Input Here" (is this default?)
What am I missing here?

You can definitely re use the same text box to take in more than one piece of information. The question is how do you store the info in the process. So you can keep the onclick handler that you already have, then change what you do with the input based on the state of the page.
Current Step: <div id="current_step">name</div>
<input type="text" id="myInput" style="height: 10px; width: 50px" value="">
<button onclick="enter_value()">Confirm</button>
<div class="results">
<div id="name_result"></div>
<div id="addr_result"></div>
</div>
function enter_value(){
var curStep = document.getElementById("current_step").innerHTML,
curValue = document.getElementById("myInput").value;
//do some error testing here, if it is a bad submission dont continue
if (curValue == "") return false;
if (curStep == "name"){
document.getElementById("name_result").innerHTML = curValue
document.getElementById("current_step").innerHTML = "address"
}
else if (curStep == "address"){
document.getElementById("addr_result").innerHTML = curValue
document.getElementById("current_step").innerHTML = "Done!"
}
document.getElementById("myInput").value = '';
}
You should be able to use this to get started

Check a user input value against values in array

I have text file. there around 1000 lines in it, each line contains a 8 letter alpha numeric word for example my text file looks like this
TEST1234
T1E2A334
12RR8912
and so on. this file is located on the server in a folder called TestCodes
Now I have an html file called test.html where in this file I have input textbox where the user enters the testcode he/she has with them
I have button called Verify. when this input button is clicked I want to check the user inputed value against the contents in the text file.
If the testcode exists in the text file then display a button called Procced if not display an error message called invalid.
I know how to write the if condition but I have no idea how to check it against the text file
HTML
<div class="user-input">
<input type="text" name="test-code" id="test-code" value="" />
<input type="submit" value="Verify Code" name="verify-code" id="verify-code" />
</div>
<div id="TestRegister">
<form id="club" action="/Proceed.html" method="post" autocomplete="off">
<input type="submit" value="Proceed Registration" name="proceed-register" />
</form>
</div>
<div id="TestError">
<span>Please check the code again, its not valid</span>
</div>
JavaScript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#TestRegister").hide();
$("#TestError").hide();
$.get("testcodes.txt", function (data) {
var lines = data.split("\n");
// this is where I am stuck. how to pass the above to ARRAY
$("#verify-code").click(function (e) {
e.preventDefault();
if ( /* here I need to check against the user input value, if they are equal */ ) {
$("#TestRegister").show();
$("TestError").hide();
} else {
$("#TestRegister").hide();
$("TestError").show();
}
}
});
</script>
How can I pass text from testcodes to an Array and then check the user input value against this array? If the user input value is present in the array then I want to show #TestRegister, and if not, or if the input value is blank or null, show #TestError.
Thanks and appreciate any tips.

var lines;
$(document).ready(function () {
$("#TestRegister").hide();
$("#TestError").hide();
$.get("testcodes.txt", function (data) {
lines = data.split("\n");
});
$("#verify-code").click(function (e) {
e.preventDefault();
if (lines.indexOf($("#test-code").val()) !== -1 && $("#test-code").val().length == 8) {
$("#TestRegister").show();
$("TestError").hide();
} else {
$("#TestRegister").hide();
$("TestError").show();
}
});
});

You can avoid an array loop altogether by creating a regular expression that ensures the test code is found between word boundaries:
var codeRegEx = new RegExp('\\b'+$('#test-code').val()+'\\b');
if(codeRegEx.test(lines)) {
// the testcode is found on a single line, avoiding partial matches
}
Here's a demo:
jsFiddle DEMO