html javascript text will not replace - javascript

I would like to find and replace the text in my textbox.
this is my script
<script>
function findnReplace() {
var str = document.getElementById("source").value;
var find = document.getElementById("find").value;
var replace = document.getElementById("replace").value;
var resultString = str.replace(find, replace);
var numreplace = new RegExp(find, 'g');
document.getElementById("source").innerHTML = resultString;
//find the number of words found and replaced
var num = str.match(numreplace).length;
if (num == 0) {
var no = "No words are replaced.";
document.getElementById("num").innerHTML = no;
} else {
var n = num + " word(s) replaced.";
document.getElementById("num").innerHTML = n;
}
}
</script>
and here is my html code
<html>
<body>
<table>
<textarea name="text" id="source" rows="3" cols="20" required>Hello Testing
</textarea><br><br>
<tr>
<td>Find:</td>
<td>
<input type="text" id="find" name="find" onkeyup="replaceNum()" size="30">
</td>
</tr>
<tr>
<td>Replace:</td>
<td>
<input type="text" id="replace" name="replace" onkeyup="replaceNum()" size="30">
</td>
</tr>
</table>
<input id="findnReplaceButton" type="button" value="Find & Replace"
onclick="findnReplace()" title="Fill in both textbox"/>
<span id="num"></span>
</table>
</body>
</html>
expected result:
however, this is what i am getting:
ALTHOUGH it says "3words replaced" but the text in the textbox didnt get replaced.

On your script, you have run str.replace function without regex. So it will replace the first match only.
You have defined numreplace regex but have not used it.
So to make it work, it is needed to place str.replace after numreplace variable definition and use that regex inside str.replace function as follows.
function findnReplace() {
var str = document.getElementById("source").value;
var find = document.getElementById("find").value;
var replace = document.getElementById("replace").value;
var numreplace = new RegExp(find, 'g');
var resultString = str.replace(numreplace, replace);
document.getElementById("source").innerHTML = resultString;
//find the number of words found and replaced
var num = str.match(numreplace).length;
if (num == 0) {
var no = "No words are replaced.";
document.getElementById("num").innerHTML = no;
} else {
var n = num + " word(s) replaced.";
document.getElementById("num").innerHTML = n;
}
}
<table>
<textarea name="text" id="source" rows="3" cols="20" required>Hi Hi Hi Hi Testing</textarea><br><br>
<tr>
<td>Find:</td>
<td>
<input type="text" id="find" name="find" size="30">
</td>
</tr>
<tr>
<td>Replace:</td>
<td>
<input type="text" id="replace" name="replace" size="30">
</td>
</tr>
</table>
<input id="findnReplaceButton" type="button" value="Find & Replace" onclick="findnReplace()"
title="Fill in both textbox" />
<span id="num"></span>
</table>

Related

JS auto compute without submit button

i want to auto calculate the 5 textboxes without using a submit button from the value of my main textbox so
1 textbox = (auto computed) 5textbox
this is the js in my <head> tag
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script>
$('#tb6').keyup(function(){
var textbox;
var tb1;
var tb2;
var tb3;
var tb4;
var tb5;
textbox = parseInt($('#textbox').val());
tb1 = parseInt($('#tb1').val());
tb2 = parseInt($('#tb2').val());
tb3 = parseInt($('#tb3').val());
tb4 = parseInt($('#tb4').val());
tb5 = parseInt($('#tb5').val());
tb1 = textbox * 0.10;
tb2 = textbox * 0.10;
tb3 = textbox * 0.10;
tb4 = textbox * 0.50;
tb5 = tb1+ tb2 + tb3;
var tb6 = tb4 - tb5;
$('#tb6').val(tb6.toFixed(2));
});
</script>
</head>
form
<form>
<br>input textbox: <input id = "textbox" type = "text" name="textbox" required>
</td>
</td>
</table>
<table>
<tr><td>
<br>
<p id="para">label1</p>
<br>textbox1: <input id = "tb1" type = "text" name = "tb1" required>
<br>textbox2: <input id = "tb2" type = "text" name = "tb2" required>
<br>textbox3: <input id = "tb3" type = "text" name = "tb3" required>
</td>
<td><br><br><br><br><p id="paraa">label2</p>
<br>textbox4: <input id = "tb4" type = "text" name = "tb4" readonly>
<br>textbox5: <input id = "tb5" type = "text" name = "tb5" readonly>
// result
<br>textbox5: <input id = "tb6" type = "text" name = "tb6" readonly>
</td></tr>
</form>
im new on JS, i dont know whats the problem. how am i able to auto calculate?
thank you guys
https://jsfiddle.net/no619pmu/5/
First thing you have written readonly in tb6 and keyup on same input which can not be possible
Do
$('input[type="text"]').keyup(function() { if you want auto compute on input text..
As per you code I modified in jquery
$('input[type="text"]').keyup(function() {
var textbox = parseInt($('#textbox').val());
var tb1 = parseInt($('#tb1').val());
var tb2 = parseInt($('#tb2').val());
var tb3 = parseInt($('#tb3').val());
var tb4 = parseInt($('#tb4').val());
var tb5 = parseInt($('#tb5').val());
tb1 = textbox * 0.10;
tb2 = textbox * 0.10;
tb3 = textbox * 0.10;
tb4 = textbox * 0.50;
tb5 = tb1 + tb2 + tb3;
var tb6 = tb4 - tb5;
$('#tb6').val(tb6.toFixed(2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<br>input textbox:
<input id="textbox" type="text" name="textbox" required>
<table>
<tr>
<td>
<br>
<p id="para">label1</p>
<br>textbox1:
<input id="tb1" type="text" name="tb1" required>
<br>textbox2:
<input id="tb2" type="text" name="tb2" required>
<br>textbox3:
<input id="tb3" type="text" name="tb3" required>
</td>
<td>
<br>
<br>
<br>
<br>
<p id="paraa">label2</p>
<br>textbox4:
<input id="tb4" type="text" name="tb4" readonly>
<br>textbox5:
<input id="tb5" type="text" name="tb5" readonly>
// result
<br>textbox5:
<input id="tb6" type="text" name="tb6" readonly>
</td>
</tr>
</table>
</form>
//As you didnot mentioned what will be in other textboxes..
when do
$('#tb6').keyup(function(){})
the tb6 input is not render

can not add two multiplications result in text box in html

sir
i have 7 text boxes .1st two take values from user and display the multiplication result on 3rd text box when it clicked.4th and 5th textboxes also take values and display the multiplication result in 6th text box when it clicked.now 7th textbox will display the addition result when it clicked.7th textbox takes the values from 3rd and 6th textbox.
my problem is that i can not do the addition and cant display the result in 7th text box in html and jscript.plz help me.....i am attached the code...
<html>
<script>
function getText1(){
var in1=document.getElementById('in1').value;
var in2=document.getElementById('in2').value;
var tot1=parseInt(in1)*parseInt(in2);
document.getElementById('tot1').value=tot1;
}
function getText2(){
var in1=document.getElementById('in3').value;
var in2=document.getElementById('in4').value;
var tot2=parseInt(in1)*parseInt(in2);
document.getElementById('tot2').value=tot2;
}
function gt1(){
var in1=document.getElementById('tot1').value;
var in2=document.getElementById('tot2').value;
var gt1=parseInt(in1)+parseInt(in2);
document.getElementById('gt').value = gt1;
</script>
<form>
<input type="text"id="in1"/>
<input type="text" id="in2"/>
<input type="text" onclick="getText1()" id="tot1"/>
<br>
<input type="text"id="in3"/>
<input type="text" id="in4"/>
<input type="text" onclick="getText2()" id="tot2"/>
<br>
<input type="text" onclick="gt1()" id="gt1"/>
</form>
</html>
<html>
<script>
function getText1(){
var in1=document.getElementById('in1').value;
var in2=document.getElementById('in2').value;
var tot1=parseInt(in1)*parseInt(in2);
document.getElementById('tot1').value=tot1;
}
function getText2(){
var in1=document.getElementById('in3').value;
var in2=document.getElementById('in4').value;
var tot2=parseInt(in1)*parseInt(in2);
document.getElementById('tot2').value=tot2;
}
function gt(){
var in1=document.getElementById('tot1').value;
var in2=document.getElementById('tot2').value;
var gt1=parseInt(in1)+parseInt(in2);
document.getElementById('gt1').value = gt1;
}
</script>
<form>
<input type="text"id="in1"/>
<input type="text" id="in2"/>
<input type="text" onclick="getText1()" id="tot1"/>
<br>
<input type="text"id="in3"/>
<input type="text" id="in4"/>
<input type="text" onclick="getText2()" id="tot2"/>
<br>
<input type="text" onclick="gt()" id="gt1"/>
</form>
</html>
use this code it is working. and compare with own code. thanks..
There are several problem
1). Element id is one line is incorrect. It should be:
document.getElementById('gt1').value = gt1;
2). result variable is undefined. It should be:
if (!isNaN(gt1))
3). onclick="gt1()" will not work (because there is id with the same name gt1). Use, for example:
function getText3() { ... }
and
<input type="text" onclick="getText3()" id="gt1"/>
Fiddle.
Update. Ok, I didn't notice that you want multiplication, but somewhy had written + in getText1() and getText2() functions. Then you should also replace these two + with *:
Multiplication fiddle.
You dont have element with id 'gt'.
Change last line of code to this:
document.getElementById('gt1').value = gt1;
You have not defined 'result' variable
and in 'gt1()' :
document.getElementById('gt').value = gt1;
1- There is no 'gt' element in the page
2- 'gt1' should renamed to 'result'
and at the end code will be:
<script language="javascript" type="text/javascript">
function getText1() {
var in1 = document.getElementById('in1').value;
var in2 = document.getElementById('in2').value;
var tot1 = parseInt(in1) + parseInt(in2);
document.getElementById('tot1').value = tot1;
}
function getText2() {
var in1 = document.getElementById('in3').value;
var in2 = document.getElementById('in4').value;
var tot2 = parseInt(in1) + parseInt(in2);
document.getElementById('tot2').value = tot2;
}
function gt1() {
var in1 = document.getElementById('tot1').value;
var in2 = document.getElementById('tot2').value;
var result = parseInt(in1) + parseInt(in2);
if (!isNaN(result)) {
document.getElementById('gt1').value = result;
}
//document.getElementById('gt1').value=gt1;
}
</script>
this is work properly.
Check the below code.
<script >
function getext3(){
txt1 = document.getElementById("text1").value;
txt2 = document.getElementById("text2").value;
document.getElementById("text3").value = parseInt(txt1)*parseInt(txt2);
}
function getext6(){
txt1 = document.getElementById("text4").value;
txt2 = document.getElementById("text5").value;
document.getElementById("text6").value = parseInt(txt1)*parseInt(txt2);
}
function getext7(){
txt1 = document.getElementById("text3").value;
txt2 = document.getElementById("text6").value;
document.getElementById("text7").value = parseInt(txt1)+parseInt(txt2);
}
</script>
Text1 : <input type="text" id="text1" value="5"> <br/>
Text2 : <input type="text" id="text2" value="2"> <br/>
Text3 : <input type="text" id="text3" value="" onclick="getext3()"> <br/>
Text4 : <input type="text" id="text4" value="7"> <br/>
Text5 : <input type="text" id="text5" value="10"> <br/>
Text6 : <input type="text" id="text6" value="" onclick="getext6()"> <br/>
Text7 : <input type="text" id="text7" value="" onclick="getext7()"> <br/>

Modifying old javascript code to new [duplicate]

This question already has answers here:
How can I access object properties containing special characters?
(2 answers)
Closed 9 years ago.
The old html and javascript code:
<tr>
<input id="pret_id_1" type="text" name="pret" />
<input id="val_id_1" type="text" name="val"/>
<input id="val_tva_id_1" type="text" name="val_tva"/>
<input id="cant_id_1" type="text" name="cant" />
</tr>
<script>
var x=document.form_factura;
x.val.value = (x.pret.value * x.cant.value).toFixed(2) ;
x.val_tva.value = ((x.pret.value * x.cant.value) * tva_val).toFixed(2);
if(!/^[a-z()+ A-Z()-]*$/.test(x.val_tva.value)){
var suma = (x.pret.value * x.cant.value)- (-x.val_tva.value);
} else {
var suma = (x.pret.value * x.cant.value);
}
x.suma.value = suma.toFixed(2);
...
</script>
I try to multiply this .. and I added arrays in the name elements .
<tr class="row1">
<input id="pret_id_1" type="text" name="pret[]" />
<input id="val_id_1" type="text" name="val[]"/>
<input id="val_tva_id_1" type="text" name="val_tva[]"/>
<input id="cant_id_1" type="text" name="cant[]" />
</tr>
<tr class="row2">
<input id="pret_id_2" type="text" name="pret[]" />
<input id="val_id_2" type="text" name="val[]"/>
<input id="val_tva_id_2" type="text" name="val_tva[]"/>
<input id="cant_id_1" type="text" name="cant[]" />
</tr>
How can I update the javascript code for array input name elements ??
if it's only one row (.row1) the javascript not working.. must be at least 2 elements with same name.
EDIT: I forgot to mention that I use php and mysql to store the data.
Thanks.
First you should not add the [] in the fields' names:
<tr class="row1">
<input id="pret_id_1" type="text" name="pret" />
<input id="val_id_1" type="text" name="val"/>
<input id="val_tva_id_1" type="text" name="val_tva"/>
<input id="cant_id_1" type="text" name="cant" />
</tr>
<tr class="row2">
<input id="pret_id_2" type="text" name="pret" />
<input id="val_id_2" type="text" name="val"/>
<input id="val_tva_id_2" type="text" name="val_tva"/>
<input id="cant_id_1" type="text" name="cant" />
</tr>
Then x.val will return an array of DOM elements (instead of one single element like before):
<script>
var x=document.form_factura;
for(var i=0; i<x.pret.length; i++) {
x.val[i].value = (x.pret[i].value * x.cant[i].value).toFixed(2) ;
x.val_tva[i].value = ((x.pret[i].value * x.cant[i].value) * tva_val).toFixed(2);
if(!/^[a-z()+ A-Z()-]*$/.test(x.val_tva.value)){
var suma = (x.pret[i].value * x.cant[i].value)- (-x.val_tva[i].value);
} else {
var suma = (x.pret[i].value * x.cant[i].value);
}
x.suma[i].value = suma.toFixed(2);
...
}
</script>
Well you have unique ids so you can loop
for(var i=1;i<=2;i++) {
var pret = document.getElementById("pret_id_" + i );
var cant = document.getElementById("cant_id_" + i );
var val = document.getElementById("val_id_" + i );
val.value = (pret.value * cant.value).toFixed(2) ;
}
if you want to do it by name,
var pretElems = document.form_factura["pret[]"];
var cantElems = document.form_factura["cant[]"];
var valElems = document.form_factura["val[]"]];
for(var i=1;i<=2;i++) {
var pret = pretElems[i];
var cant = cantElems[i];
var val = valElems[i];
val.value = (pret.value * cant.value).toFixed(2) ;
}

Textarea count characters validation

i'm writing an asp page using vb.net and i need to count the number of characters in my textarea and display the message:"X characters Remaining."
that's my asp code:
<td valign='top'>
<textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50"></textarea>
</td>
Here is a JSFiddle
HTML:
<textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50"></textarea>
<p id="message"></p>
JS:
var area = document.getElementById("content_txt");
var message = document.getElementById("message");
var maxLength = 50;
var checkLength = function() {
if(area.value.length < maxLength) {
message.innerHTML = (maxLength-area.value.length) + " characters remaining";
}
}
setInterval(checkLength, 300);
I have a little but functional solution my friend, try this:
HTML CODE
<textarea name="message"placeholder="Reply message..." maxlength="155" onkeyup="counter(this);"></textarea>
<div id="counter_div">0/155</div>
JAVASCRIPT CODE
<script>
function counter(msg){
document.getElementById('counter_div').innerHTML = msg.value.length+'/155';
}
</script>
This case limit 155 characters.
this will return current length of the textarea using jquery var length = $('#content_txt').val().length; and rest of the logic you have to give it a try..
try this
function fix(dis)
{
var total=50; // ho many you want to show
var val = dis.value;
var count = val.length;
document.getElementById('remaining').innerHTML= total-count;
}
<td valign='top'>
<textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50" onkeyup="fix(this)"></textarea>
</td>
<p><span id="remaining">0</span> Characters remaining</p>
<td valign='top'>
<textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50"></textarea>
<span id="character-count">100</span> characters remaining.
</td>
var totallength = 100;
$('textarea#input').on('keydown, keyup', function(e) {
$('span#character-count').text((totallength - input.val().length));
});

Issue Cloning Form Fields Within Table with Javascript

In the code below it works great to clone the table, but it doesn't go deep enough to rename the inputs of each form field in the table. For example Attendee1, Attendee2, Attendee3 etc.
Is there a way instead of just grabbing NewEl.children a way to just find all the input elements within the table then rename them?
I am not trying to add a row, I need to clone the entire table.
Any help you all out there in cyberland can give will be greatly appreciated.
<form name="EditRoster" method="post" action="DoRoster.php">
<table id="RosterTbl" cellspacing="0" cellpadding="2">
<tr style="text-align:left;vertical-align:top;">
<td><b>Name</b>:</td>
<td>
<input type="text" name="Attendee" value="" size="25" onclick="alert(this.name)">
</td>
<td><b>Paid</b>:</td>
<td>
<input type="checkbox" name="Paid" value="Yes" size="25">
</td>
</tr>
<tr style="text-align:left;vertical-align:top;">
<td><b>Email</b>:</td>
<td>
<input type="text" name="Email" value="" size="25">
</td>
<td><b>Paid When</b>:</td>
<td>
<input type="text" name="PaidWhen" value="" size="10">
</td>
</tr>
</table>
<div style="padding:5px;">
<input type="hidden" name="NumStudents" value="0">
<input type="button" name="AddPersonButton" value="Add Person" onclick="CloneElement('RosterTbl','NumStudents');">
</div>
</form>
<script language="javascript">
var TheForm = document.forms.EditRoster;
function CloneElement(ElToCloneId, CounterEl) {
var CloneCount = TheForm[CounterEl].value;
CloneCount++;
TheForm[CounterEl].value = CloneCount;
var ElToClone = document.getElementById(ElToCloneId);
var NewEl = ElToClone.cloneNode(true);
NewEl.id = ElToCloneId + CloneCount;
NewEl.style.display = "block";
var NewField = NewEl.children;
for (var i = 0; i < NewField.length; i++) {
var InputName = NewField[i].name;
if (InputName) {
NewField[i].name = InputName + CloneCount;
}
var insertHere = document.getElementById(ElToCloneId);
insertHere.parentNode.insertBefore(NewEl, insertHere);
}
}
</script>
Looked like you were on the right track, but I think you were taking a few extra steps, so I think I simplified it ;)
One thing you were missing was that the value of NumStudents is returned as a string so you have to call parseInt() on it.
var theForm = document.forms.EditRoster;
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function CloneElement(cloneID, counterName) {
var clone = document.getElementById(cloneID);
var newClone = clone.cloneNode(true);
var counter = theForm[counterName].value = parseInt(theForm[counterName].value) + 1;
// Update the form ID
newClone.id = newClone.id + counter;
// Update the child Names
var items = newClone.getElementsByTagName("*");
for (var i = 0; i < items.length; i++) {
if (items[i].name != null)
items[i].name = items[i].name + counter;
}
insertAfter(clone, newClone);
}
Here's a working copy on jsFiddle.
P.s. I wasn't sure if you wanted the new fields clearing so I left them.

Categories