I would like to be able to type a word or name into an box, click a generate button and have some of the letters or words changed into a new box.
For example:
John Smith > Juhn Smith
(change the 'o' to 'u' making Juhn Smith)
or
John Smith > Ron Smith
(change whole words)
I have tried looking at strings and replacewith() etc but have struggled to find anything suitable especially nothing using input boxes.
This is an example close to what i mean but much more complex:
http://anu.co.uk/brazil/
Thanks
#James When asking for help, next time try to do it yourself. This is an HTML page showing your example. Save this as myPage.html. Then open the file in a browser.
<!DOCTYPE html>
<html>
<meta charset="ISO-8859-1">
<head>
<title>Replace web page</title>
</head>
<script type="text/javascript" >
// this gets called by pressing the button
function myFunction() {
var first = document.getElementById("foreName");
var last = document.getElementById("lastName");
// now change 'o' to 'u' for each name part
var changedFirst = myChange(first.value);
var changedLast = myChange(last.value);
// now move it to another element
var resultBox = document.getElementById("resultBox");
resultBox.innerHTML = "" + changedFirst + " " + changedLast;
}
// this is a function to search a string and replace with a substitute
function myChange(str) {
var arr = str.split('');
var result = "";
for(var i=0; i < arr.length; i++) {
if (arr[i] == 'o') // if it's an o
result += 'u'; // replace it with 'u'
else
result += arr[i];
}
return(result);
}
</script>
<body>
<p> This is an example of inputting text, changing it, then displaying it into another item</p>
First Name: <input type="text" name="foreName" id="foreName" maxlength=100 value="">
Last Name: <input type="text" name="lastName" id="lastName" maxlength=100 value="">
<p>
<input type="button" id="inButton" name="inButton" value="Click Me" onclick="myFunction()" >
</p>
<p>
<textarea rows="1" cols="50" id="resultBox"></textarea>
</p>
</body>
</html>
Related
I obviously am missing something here. I have a web app where the input for a form may be in English or, after a keyboard switch, Russian. The meta tag for the page is specifying that the page is UTF-8. That does not seem to matter.
If I type in "вв", two of the unicode character: CYRILLIC SMALL LETTER VE
What do I get? A string. I call getCodePoints().toArray() and I get:
[208, 178, 208, 178]
If I call chars().toArray[], I get the same.
What the heck?
I am completely in control of the web page, but of course there will be different browsers. But how can I get something back from the web page that will let me get the proper cyrillic characters?
This is on java 1.8.0_312. I can upgrade some, but not all the way to the latest java.
The page is this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>Cards</title>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous" />
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity = "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin = "anonymous" />
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous">
</script>
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" />
<style>.table-nonfluid { width: auto !important; }</style>
</head>
<body>
<div style = "padding: 25px 25px 25px 25px;">
<h2 align = "center">Cards</h2>
<div style = "white-space: nowrap;">
Home
<div>
<form name="f_3_1" method="post" action="/cgi-bin/WebObjects/app.woa/wo/ee67KCNaHEiW1WdpdA8JIM/2.3.1">
<table class = "table" border = "1" style = "max-width: 50%; font-size: 300%; text-align: center;">
<tr>
<td>to go</td>
</tr>
<tr>
<td><input size="25" type="text" name="3.1.5.3.3" /></td>
</tr>
<td>
<input type="submit" value="Submit" name="3.1.5.3.5" /> Skip
</td>
</table>
<input type="hidden" name="wosid" value="ee67KCNaHEiW1WdpdA8JIM" />
</form>
</div>
</div>
</div>
</body>
</html>
Hm. Well, here is at least part of the story.
I have this code:
System.out.println("start: " + start);
int[] points = start.chars().toArray();
byte[] next = new byte[points.length];
int idx = 0;
System.out.print("fixed: ");
for (int p : points) {
next[idx] = (byte)(p & 0xff);
System.out.print(Integer.toHexString(next[idx]) + " ");
idx++;
}
System.out.println("");
The output is:
start: вв
fixed: ffffffd0 ffffffb2 ffffffd0 ffffffb2
And the UTF-8 value for "В", in hex, is d0b2.
So, there it is. The question is, why is this not more easily accessible? Do I really have to put this together byte-pair by byte-pair?
If the string is already in UTF-8, as I think we can see it is, why does the codePoints() method not give us, you know, the codePoints?
Ok, so now I do:
new String(next, StandardCharsets.UTF_8);
and I get the proper string. But it still seems strange that codePoints() gives me an IntStream, but if you use these things as int values, it is broken.
It was a problem with the frameworks I was using. I thought I was setting the request and response content type to utf-8 but I was not.
I want to scan a barcode in an html textfield but only need a few characters from that barcode.. I've tried str.substring using the code below. But I want to replace 'helloworld' with the value from the textbox.
<script>
function myFunction() {
var id = "helloworld";
var res = id.substring(1, 7);
document.getElementById("out").innerHTML = res;
}
</script>
Are you trying to get a value from a text box?
HTML: index.html
<!DOCTYPE html>
<html>
<head>
<title>
Barcode Example
</title>
<link href="script.js" rel="JavaScript" type="text/js" />
</head>
<body>
<input type="text" name="barcode" id="textbox" onkeyup="validateBarcode()" />
<br />
<span id="barcode_error" style="display: none; color: red;">
Barcode must only have numbers
</span>
<br />
<button id="submit_btn" onClick="myFunction()">
Submit
</button>
</body>
</html>
If so, here's the code:
JavaScript: myscript.js
var barcode;
var textbox;
function myFunction() {
barcode = document.getElementById('textbox').value;
document.getElementById('out').innerHTML = "Barcode: " + barcode + "<br />";
// ^ br is to make it have multiple barcodes listed
}
function validateBarcode() {
textbox = document.getElementById('textbox');
if (isNaN(parseFloat(textbox.value))) {
document.getElementById('textbox').style.color = 'red';
document.getElementById('barcode_error').style.display = 'block';
document.getElementById('submit_btn').diabled = true;
}
else {
document.getElementById('textbox').style.color = 'black';
document.getElementById('barcode-error').style.display = 'none';
document.getElementById('submit_btn').diabled = false;
}
}
Hope this helps :-)
I am working on a project where the client's requirement is to add a dynamic text box. I made the dynamic text box but I'm not getting the unique name of the text box.
Here is my code:
<script type="text/javascript">
function addfieldset() {
var namefieldset = document.getElementById("name").cloneNode(true);
document.getElementById("names").appendChild(namefieldset);
}
function deletefieldset(e) {
var namefieldset = e.parentNode;
namefieldset.parentNode.removeChild(namefieldset);
}
</script>
<body>
<%! public static int i = 1;%>
<% if (i > 0) { %>
<div id="names"><div id="name"><% out.print(i);%>Name: <input name="namefield<%= i%>" type="text"/>delete</div></div>
<input id="addnamebtn" type="button" value="Add Name" onclick="addfieldset()"/>
<% i++;
}%>
</body>
You are mixing two different codes. The key is to realize, where and when each code is executed - JSP on the server when the page is requested and rendered (i.e. before the response is sent to the browser) and Javascript in the browser, after the browser receives the already generated response.
I.e. you have to change the name of the new text field in the addfieldset() function (which means you have to have a counter, how many text fields there already is).
The java code in scriptlet is executed on the server side. Hence, cloning it again through Javascript will not execute the scriptlet again.
An another approach of what you are trying to achieve will be to store the count variable in javascript.
var count = 1;
function addfieldset() {
count++;
var namefieldset = document.getElementById("name").cloneNode(true);
var textField = namefieldset.getElementsByTagName('input')[0];
textField.setAttribute("name", "namefield" + count);
textField.value = "";
document.getElementById("names").appendChild(namefieldset);
}
function deletefieldset(e) {
var namefieldset = e.parentNode;
namefieldset.parentNode.removeChild(namefieldset);
}
<body>
<div id="names">
<div id="name">
<span>Name:</span>
<input name="namefield1" type="text" />
delete
</div>
</div>
<input id="addnamebtn" type="button" value="Add Name" onclick="addfieldset()" />
</body>
try this JavaScript and HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
var i = 0;
function generateRow() {
i++;
var d = document.getElementById("div");
d.name = "food";
d.innerHTML += "<p>name"+i+" :<input type='text' name='name" + i + "' /> <a href='#' onclick='deletefieldset(this)'>delete</a></p>";
}
function deletefieldset(e) {
var namefieldset = e.parentNode;
namefieldset.parentNode.removeChild(namefieldset);
}
function onLoad() {
generateRow();
}
window.onload = onLoad;
</script>
<body>
<div id="div"></div>
<p>
<input type="button" id="addnamebtn" value="Add Name" onclick="generateRow()" />
</p>
</body>
</html>
I am developing a web application in which I which I have a JavaScript array and I want this array in my JSP page and iterate it save the data in database.
var value = response;
for (var key in value) {
if (value.hasOwnProperty(key)) {
alert(key + " -> " + value[key]);
var sample = new Array();
sample=value[key];
console.log(sample);
// document.getElementById('');
}
}
});
I want this data on my JSP page is it possible. If it is possible, then how?
You can have javascript in jsp but that will always execute on client side. So if you want to save some stuff on trigger of some event inside browser you can do that by making ajax call or form submission. Ajax is preferred way because its faster and better experience for user
But if you have intention of execution of javascript on server side thats not possible
Java script client side script whereas jsp is server side script so you can't simply do this.
What you can do is submit the calculated variable from javascript to server by form-submission, or using URL parameter or using AJAX calls and then you can make it available on server to store in database.
Client Side:
<script type="text/javascript">
var n = document.getElementById("data");
var f=new Array( "apple", "orange", "mango" );
n.value = f;
</script>
<form action="Your_JSP.jsp" method="POST">
<input type="hidden" id="data" name="data" value="" />
<input type="submit" />
</form>
Server Side:
<%
String val = request.getParameter("data");
String aa[]=val.split(",");
for(String x : aa )
out.println(x);
//now hereyou can use aa array tostore in database or do whatever you want
%>
Try this if you have two different jsp:
first.jsp
<script>
var response = [];
...
var put = function(form) {
form.resp.value = response.join(','); //using comma as separator
};
</script>
<form onsubmit='put(this)' method='next.jsp' method='post'>
<input type='hidden' name='resp' />
<button>Submit</button>
</form>
next.jsp
<%
String[] resp = request.getParameter("resp").split(",");
%>
Response is: ${param.resp} <!-- debugging -->
yes , its possible to do that. you can show array in HTML tag
<!DOCTYPE html>
<html>
<head>
<script>
var value=response;
for (var key in value) {
if (value.hasOwnProperty(key)) {
alert(key + " -> " + value[key]);
var sample = new Array();
sample=value[key];
console.log(sample);
// do here as
document.getElementById("array").innerHTML = sample;
// here array is <p> tag in html and sample is array which will be shown in jsp page.
}
}
</script>
</head>
<body>
<form action="get.jsp" method="POST">
<p id="array" name="array" type="hidden"></p>
<input type="submit" />
</body>
</html>
in get.jsp you will able to get value from array as:
<%
String []array = request.getParameter("array").split(",");
//this String array you can use to store data in DB
%>
I have a HTML page with dinamycally changing number of select elements.
<script>
function getValues() {
var selects = document.getElementsByTagName('select'),
arr = Array.prototype.slice.call(selects),
selectValues = arr.map(function (select) {
return select.value;
});
return selectValues;
}
</script>
<script type='text/javascript'>
function moreSelect() {
for (i = 0; i < number; i++) {
// Append a node with a random text
container.appendChild(document.createTextNode("Name " + (i+1) + ": "));
// Create an <input> element, set its type and name attributes
var input = document.createElement("select");
input.name = "name" + (i+1);
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement("br"));
}
</script>
<form action="action"method="POST" onsubmit="return getValues;">
More selects (max. 9):<br>
<p>
<input type="number" id="name" name="name" value="0"
min="0" max="9"><br />
<button type="button" onclick="moreSelect()">Add</button>
<br>
<p>
<br>
<div id="container" /></div>
<p>
<br> <br> <input type="submit" value="Go">
</form>
I want to collect this values to a List or an Array before the POST method and give this parameter list to my Java controller like this:
#RequestParam("allValues") List<String> allValues
Edit: I edited it, but doesn't works.
Get all selects, transform them to a real Array by Array.prototype.slice. Now you can use map to get all values. getElementsByTagName returns a HTMLCollection, that does not support map(), etc.
var selects = document.getElementsByTagName('select'),
arr = Array.prototype.slice.call(selects),
selectValues = arr.map(function (select) {
return select.value;
});
Now selectValues is an Array of the select values.
You can add one hidden form parameter say with name "allValues" and using javascript before posting Form, you can add all select values in that parameter.