Develop Reference

Remove everything in every line after/before the mentioned text using JavaScript

I want to remove everything in every line after/before the mentioned text. In the following code, I want when the "Remove After!" button is pressed then in every line text after mentioned text "love" must be removed. When the "Remove Before!" button is pressed then in every line text before mentioned text "love" must be removed.
Example:
I love donuts! --> Remove After! --> "I love"
I love donuts! --> Remove Before! --> "love donuts!"
Note I want this for every line. I have no idea about how I can do this so I am just giving scratch code!
Code:
function afterFun() {
var rAfter = document.getElementById("iAfter").value;
document.getElementById("TextInput").value = document.getElementById("TextInput").value.replace(rAfter, "");
}
function beforeFun() {
var rBefore = document.getElementById("iBefore").value;
document.getElementById("TextInput").value = document.getElementById("TextInput").value.replace(rBefore, "");
}
<textarea cols="30" id="TextInput" rows="10" style="width: 100%;">I love donuts!</textarea><br><br>
<input value="love" type="text" id="iAfter"><br>
<input onclick="afterFun()" type="button" value="Remove After!" /><br /><br>
<input value="love" type="text" id="iBefore"><br>
<input onclick="beforeFun()" type="button" value="Remove Before!" /><br /><br>

You are doing the same thing in both function, just changing the variables name. My approach would be to split the input string by the target word:
let result = str.split(target);
It would return an array of strings saved in the result variable, with the beforeText at index [0] and the afterText at index [1];
Then, just get the index you want (depends on the button you clicked) and add the target before or after the result:
function afterFun() {
var target = document.getElementById("iBefore").value;
var text = document.getElementById("TextInput").value;
var lines = text.split("\n"); //split lines
document.getElementById("TextInput").value = "";
lines.map(line => {
var result = line.split(target);
document.getElementById("TextInput").value += result[0] + target + "\n";
})
}
function beforeFun() {
var target = document.getElementById("iBefore").value;
var text = document.getElementById("TextInput").value;
var lines = text.split("\n"); //split lines
document.getElementById("TextInput").value = "";
lines.map(line => {
var result = line.split(target);
document.getElementById("TextInput").value += target + result[1] + "\n";
})
}
<textarea cols="30" id="TextInput" rows="10" style="width: 100%;">I love donuts!</textarea><br><br>
<input value="love" type="text" id="iAfter"><br>
<input onclick="afterFun()" type="button" value="Remove After!" /><br /><br>
<input value="love" type="text" id="iBefore"><br>
<input onclick="beforeFun()" type="button" value="Remove Before!" /><br /><br>

Print an array from user input in JavaScript

I am trying to create an array from user input in JavaScript and display the latest array as the numbers are appended to the array. The numbers are not getting printed.
Kindly help.
HTML part :
<textarea form = "arrays" cols = 10 rows = 2 id = "num">
</textarea><br />
<form id = "arrays" method = "" onsubmit="arrAppend(document.getElementById('num').value);">
<input type ="submit" value="Append" />
</form>
JavaScript part :
<script>
var myarr = [];
function arrAppend(num) {
myarr.push(+num);
text = "";
for (var x = 0; x< myarr.length; x++) {
text += myarr[x];
}
console.log(text);
}
</script>

This is working :
HTML :
<input type = "text"
id = "addNumber" />
<input type = "button"
id = "addToArray"
value = "Append"
onclick = "arrAppend();" />
JavaScript :
function arrAppend() {
myarr[x] = document.getElementById('addNumber').value;
alert("Element : "+myarr[x]+" is added at index "+x);
x++;
document.getElementById('addNumber').value = "";

<textarea form = "arrays" cols = 10 rows = 2 id = "num">
</textarea><br />
<input type ="submit" value="Append" onclick="arrAppend(document.getElementById('num').value);"/>
why do you need a form? are you submitting something to the server? when you submit a form it will clear the global array as well.

sum string with number onclick

I have a global variable :
var a;
I put my onclick function into my html div in concatenation PHP :
$number =' <div onclick="select(this,'."'250000'".');" > ';
$number .= ...etc... //php function
$number .='</div>';
to insert string into div value onclick (button) :
function select (price){
if ($(id).attr('class') == "table2") { //unselect button
$(id).attr('class', 'table1');
var price2=document.getElementById("price").value.split(",");
var removePrice = price;;
var price3 = jQuery.grep(price2, function (value) { return value != removePrice;});
document.getElementById("price").value = price3;
if (n.length == 0) i = 0;
} else {
$(id).attr('class', 'table2'); //select button
if (i == 0) {
document.getElementById("price").value = price;
a = Number(document.getElementById("price").value); //assign the value into a
i = 1;
} else {
$(id).attr('class','table3');
}
}
From there, I have checkbox HTML :
<div id="CourseMenu"><input type="checkbox" value="50000" />&nbsp Ekstra Bed <input type="checkbox" value="50000" />&nbsp Breakfast</div>
After that I have another function to sum 2 div value (checkbox) :
$(function($) {
var sum = 0;
$('#CourseMenu :checkbox').click(function() { sum = 0;
$('#CourseMenu :checkbox:checked').each(function(idx, elm) {
sum += parseInt(elm.value, 10);
});
var b = parseInt(a||0, 10) + parseInt(sum||0, 10);
$('#sum').html(b); //<--resulted NaN when sum with button
document.getElementById("price").value=b; //<-- assign b as div value
});
});
The purpose is to sum the total price (button & checkbox) into div value
<input type="hidden" id="price" name="price" value="" />
it works fine when the function sum only the checkbox, but when I try to show the sum with the button (global variable) it resulted in NaN
I think I already convert the string into number there, is there something wrong with my code?

I think you have a problem in passing the arguments in onclick event:
onclick="select(this,'250000');" => passing this as first argument try changing to onclick="select('250000')";
but your select function is expecting string as the first argument:
function select(price){ //<-- simplified
document.getElementById("price").value=price;
a = Number(document.getElementById("price").value);
}

Here is an actual solution for your X/Y problem.
The code will initialise the field and clicking buttons or checking checkboxes work independently.
function calc() {
var sum = parseInt($("#price").text(), 10);
$('#CourseMenu :checkbox:checked').each(function() {
sum += parseInt(this.value, 10);
});
$('#sum').val(sum);
}
$(function() {
$("#CourseMenu .btn").on("click", function() {
$("#price").text($(this).data("price")); // using the data attribute
calc();
});
$('#CourseMenu input:checkbox').on("click",function() {
calc(); //
});
calc(); // initialise in case the page is reloaded.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="CourseMenu">
<button type="button" class="btn" data-price="25000">25000</button>
<button type="button" class="btn" data-price="35000">35000</button>
<div id="price">0</div>
<br/>
<label>
<input type="checkbox" value="200" />200</label>
<label>
<input type="checkbox" value="300" />300</label>
<label>
<input type="checkbox" value="400" />400</label>
<br/>
<input type="text" id="sum" value="" />
</form>
PS: If you do nothing else on click of checkboxes, you can write
$('#CourseMenu input:checkbox').on("click",calc);

Count values from <input type="text"

Hello i want to count the ids inside a input type="text"
the values return as this 1,4,6 etc
<input type="hidden" class="selected_ids" value="selected_ids" name="selected_ids[]" multiple="yes" id="selected_ids" />

here the only javascript version :
var testme = function() {
var myInput = document.getElementById('selected_ids');
var myValue = myInput.value;
var myCount = myValue.split(',').length;
document.body.innerHTML += '<br>myValue = ' + myValue + ' | myCount = ' + myCount;
}
<input type="text" class="selected_ids" value="1,4,6" name="selected_ids[]" multiple="yes" id="selected_ids" />
<button onclick='testme()'>test me</button>

You can use split function. for example :
var curval = document.getElementById('selected_ids').value;
var curval_arr = curval.split(',');
var cnt = curval_arr.length;

First, your input type needs to be text and not hidden. It's not possible to enter values in a hidden text box.
So your text box should be :-
<input type="text" class="selected_ids" value="selected_ids" name="selected_ids[]" multiple="yes" id="selected_ids" />
Now suppose the user enters 1,4,6 into the text box(make sure the numbers are separated by a comma). Then on the PHP side you can access as follows.
<?php
$array = explode(',', $_POST['selected_ids']); //this array consists all the elements.
//To get length, do :-
count($array);
?>

Addition of numbers using single textbox?

Can anyone please help me out in how to get or read two values from single textbox.
i.e when i read the first value it should be stored in string str1 , when operator button is clicked the textbox shld be cleared but must know which operator button was clicked and shld wait to accept second value.The second value shld be stored in str2.
This is like a simple calculator wherein we enter many number in one textbox.
Thank You
Here is my code:
window.onload = function () {
var value1 = "", value2 = "", result="";
document.getElementById('btnone').addEventListener('click', function () {
document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnone').value;
value1 = document.getElementById('textBox').value;
});
document.getElementById('btntwo').addEventListener('click', function () {
document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btntwo').value;
value2 = document.getElementById('textBox').value;
});
document.getElementById('btnadd').addEventListener('click', function () {
document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnadd').value;
});
document.getElementById('btneql').addEventListener('click', function () {
result = value1 + value2;
});

You can do this using Jquery
By click() event get the value of your input $('.YourInput').val()
Increase your sum
Clear your input $('.YourInput').val("")
see Fiddle
Update
Using Javascript:
If the user click on number button: 0-9 the value will be concatenated with the previous value, if the user clicked on plus operation the given value in the text field will be memorised till the user gives a new value and click on equal
Operation.
Fiddle
var value1=value2=result=0;
function calc(val) {
value1= parseInt(document.getElementById(val).value);
document.getElementById("textBox").value=document.getElementById("textBox").value+value1;
value1=parseInt(document.getElementById("textBox").value);
}
function DoSumm(){
document.getElementById("textBox").value="";
value2=value1;
value1=0;
}
function FindResult(){
result=value1+value2;
alert(result);
document.getElementById("textBox").value=result;
}
<table>
<tr>
<td>
<input type="text" id="textBox" size="5"/>
<br/><br/>
</td>
</tr>
<tr>
<td>
<input type="button" id="btnone" value=" 1 " OnClick="calc(this.id)"/>
<input type="button" id="btntwo" value=" 2 " OnCLick="calc(this.id)"/>
<input type="button" id="btnthree" value=" 3 " OnClick="calc(this.id)"/>
<br/>
<input type="button" id="btnfour" value=" 4 " OnClick="calc(this.id)"/>
<input type="button" id="btnfive" value=" 5 " OnCLick="calc(this.id)"/>
<input type="button" id="btnsix" value=" 6 " OnClick="calc(this.id)"/>
<br/>
<input type="button" id="btnseven" value=" 7 " OnClick="calc(this.id)"/>
<input type="button" id="btneight" value=" 8 " OnCLick="calc(this.id)"/>
<input type="button" id="btnnine" value=" 9 " OnClick="calc(this.id)"/>
<br/>
<input type="button" id="btnzero" value=" 0 " OnClick="calc(this.id)"/>
<input type="button" id="btneql" value=" = " OnClick="FindResult()"/>
<input type="button" name="plus" value=" + " OnClick="DoSumm()"/>
<br/>
</td>
</tr>
</table>

You should post the related HTML, otherwise we have to reverse engineer it. Anyhow, perhaps you have something like:
<form>
<input type="button" id="btnone" name="btnone" value="0">
<br>
<textarea name="textBox"></textarea>
<br>
<input type="button" id="btntwo" name="btntwo" value="0">
<br>
<input type="button" id="btnadd" name="btnadd" value="Add">
<br>
<input type="button" id="btneql" name="btneql" value="Equal">
<br>
<input type="text" readonly name="result">
</form>
In your function you have:
window.onload = function () {
var value1 = "", value2 = "", result="";
Variables don't have a type in javascript, so there's no point in initialising them to a value unless you intend to actually use it, so:
var value1, value2, result;
Then there is:
document.getElementById('btnone').addEventListener('click', function () {
document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnone').value;
value1 = document.getElementById('textBox').value;
});
All that code for so little work! If you add a listener using addEventListener, then the element will be this within the function. Also, you can use the names of form controls to reference them as named properties of the form, so:
var textBox = this.form.textBox;
textBox.value = textBox.value + this.value;
You don't say what the value of btnone is (I've assumed it's zero), but in any case it will be a string, as will the value of the text box. So you need to convert them to Numbers, otherwise + will do concatenation not addition. The easy way is to use the unary + operator, so:
textBox.value = +textBox.value + +this.value;
Then you do:
value1 = document.getElementById('textBox').value;
So value1 is a string again, so do it in the other order:
value1 = +textBox.value + +this.value;
textBox.value = value1;
And keep going… The code looks quite turgid and I don't really know if the following does what you're trying to do (particularly the listener on the btnadd element), at least it "works":
window.onload = function () {
var value1 = "", value2 = "", result="";
document.getElementById('btnone').addEventListener('click', function () {
var textBox = this.form.textBox;
value1 = +textBox.value + +this.value;
textBox.value = value1;
});
document.getElementById('btntwo').addEventListener('click', function () {
var textBox = this.form.textBox;
value2 = +textBox.value + +this.value;
textBox.value = value2;
});
document.getElementById('btnadd').addEventListener('click', function () {
var textBox = this.form.textBox;
textBox.value = value1 + value2;
});
document.getElementById('btneql').addEventListener('click', function () {
result = value1 + value2;
this.form.result.value = result;
});
};