Changing input field value while writing - javascript

Let's say I have a input field
<input type="text" class="form-control" name="filename">
and do write something like this:
Hällo
Is it possible to check while writing if that field has a the letter ä and change it to an a while writing ?
So far, I built this:
$search = array('ä', 'Ä');
$replace = array('ae', 'Ae');
$project = str_replace($search, $replace, $input);

You don't do this with PHP, you would do it with Javascript:
var el = document.getElementById("filename");
el.addEventListener('keyup', function(){
var replace = ['ä','å'];
var replacewith = 'a';
var replace1 = ['ö'];
var replacewith1 = 'o';
replace.forEach(function(letter){
el.value = el.value.replace(letter, replacewith);
});
replace1.forEach(function(letter){
el.value = el.value.replace(letter, replacewith1);
});
});
Add id="filename" to the input element for this to work. You can add as many letters to the replace array as you would like.
You can also add more arrays to replace letters.
https://jsfiddle.net/dek5as1x/1
Edit: Solution for several letters
var el = document.getElementById("filename");
el.addEventListener('keyup', function(){
var replaces = [['ä','å'],['ö','ø'],['ï','ì'],['ü','ù','û'],['ë','ê']];
var replacewith = ['a','o','i','u','e'];
replaces.forEach(function(letterGroup, index){
letterGroup.forEach(function(letter){
el.value = el.value.replace(letter, replacewith[index]);
});
});
});
Here you add a new array ([]) to replaces. Then you add all the letters to that array that should be turned into the same letter to that array. Example: ['ê','ë','è']. Then you add the letter to the replacewith array. It is important that the letter comes to replace the letters in the array has the same index as the corresponding array in replaces.
This solution should be a little cleaner for when you have lots of letters to replace.

You can't do this using PHP because PHP is serverside.
But you can do this using JavaScript.
Try:
<script language="JavaScript">
function replace() {
var input = document.getElementById("filename");
input.value = input.value.replace("ä","a");
}
<script>
<input type="text" class="form-control" name="filename" onchange="replace()">

Related

Possibility to find a clicked number in a value using jQuery

I want to learn, can we find the same number in two input values.
For example:
<input type="hidden" id="multinumber" value="1,2,3,4,5">
<input type="hidden" id="justonenumber" value="3">
<div class="click">Click and test the same number</div>
JS
$(document).ready(function(){
$("body").on("click",".click", function(){
var multiple = $("#multinumber").val();
var single = $("#justonenumber").val();
});
});
When onClick event on the .click button then check the same number in the #multinumber and #justonenumber input values and get the result in an alert box.
Is there a way to do this ? Anyone can help me here please?
Just use indexOf or includes on your multiple string. :)
$(document).ready(function(){
$("body").on("click",".click", function(){
var multiple = $("#multinumber").val();
var single = $("#justonenumber").val();
var doesMultipleIncludeSingle = multiple.includes(single);
// OR
var doesMultipleIncludeSingle = multiple.indexOf(single) > -1;
});
});
As per the problem explained in the comment, it seems the requirement does involve splitting the array.
$(document).ready(function(){
$("body").on("click",".click", function(){
var multiple = $("#multinumber").val().split(',');
var single = $("#justonenumber").val();
var doesMultipleIncludeSingle = multiple.includes(single);
// OR
var doesMultipleIncludeSingle = multiple.indexOf(single) > -1;
});
});
You can get the value of first input box. Split it by , and check with .indexOf for the other input. If it's there, you can put the result in alert box like
$(".click").click(function(){
var x = $("#multinumber").val().split(",");
var y = $("#justonenumber").val();
if(x.indexOf(y) > 0){
alert(x.find(o=> o==y))
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="hidden" id="multinumber" value="1,2,3,4,5">
<input type="hidden" id="justonenumber" value="3">
<div class="click">Click and test the same number</div>
is this what you want?
$(document).ready(function(){
$("body").on("click",".click", function(){
var multiple = $("#multinumber").val();
var single = $("#justonenumber").val();
if(multiple.indexOf(single) > -1) alert(single + " is found");
else alert(single + " isn't found");
});
});

populate input fields from php / javascript

How can I populate 50 html5 input fields from an external delimited "|" text file ("players.txt"):
Smith, Bob|Jones, James|Cavanaugh, Harvey|
I have input fields like so:
<input type="text" name = "N01" id = "I01">
<input type="text" name = "N02" id = "I02">
<script>
$jQuery.get('assets/players.txt', function(data) {
splitString = dataString.split("|");
$('#I01').val(splitString[0]);
$('#I02').val(splitString[1]);
$('#I03').val(splitString[2]);
});
</script>
Try getting html elements using jquery $ sign such as
$('#I01').val(splitString[0]);
$('#I02').val(splitString[1]);
$('#I03').val(splitString[2]);
You're currently referencing the wrong data variable dataString, instead reference data. Also, if you know your IDs are sequential, you can avoid writing 50 different lines of JS and run a for loop, for instance:
for(i=0; i<splitString.length; i++){
id = "#I0"+(i+1);
$(id).val(splitString[i]);
}
Don't set the value of each element individually, use a forEach loop.
Make sure to take into account string padding.
splitString.forEach((str, i) => {
document.querySelector('#I' + String(i).padStart(2, '0'))
.value = str;
});
let dataString = "Smith, Bob|Jones, James|Cavanaugh, Harvey|";
let splitString = dataString.split("|");
for (let i = 0; i < splitString.length; i++) {
$("#I0" + i).val(splitString[i]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="N01" id="I01">
<input type="text" name="N02" id="I02">
Example without ajax:
$(function(){
var splitString = 'Smith, Bob|Jones, James|Cavanaugh, Harvey';
splitString = splitString.split("|");
$('#playersInputs').empty();
$.each(splitString, function(i,v){
$('<input type="text" />')
.attr('name', 'N'+("0"+(i+1)).slice(-2))
.attr('id', 'I'+("0"+(i+1)).slice(-2))
.val(v)
.appendTo('#playersInputs');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='playersInputs'>
</div>
Example With ajax:
you must replace /path/to/your/text-file with the actual url
$(function(){
$.get('/path/to/your/text-file', function(data) {
var splitString = data.split("|");
$('#playersInputs').empty();
$.each(splitString, function(i,v){
$('<input type="text" />')
.attr('name', 'N'+("0"+(i+1)).slice(-2))
.attr('id', 'I'+("0"+(i+1)).slice(-2))
.val(v)
.appendTo('#playersInputs');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='playersInputs'>
</div>

Replace string as you type

I want to create a web-friendly image name from user input on a form. I want to replace any spaces in the user entered string with a dash as the user types.
My code only replaces the first space.
How do I replace all spaces with dashes?
$('#form_model').keyup(function(event) {
var newText = event.target.value;
newText = newText.replace(" ", "-");
$('#form_image').val(newText+".png");
});
You have to replace the spaces globally for all the occurrences. So, use this,
newText = newText.replace(/ /g, "-");
Final Code
$('#form_model').keyup(function(event) {
var newText = event.target.value;
newText = newText.replace(/ /g, "-");
$('#form_image').val(newText+".png");
});
This is easily done by using a regexpression with the g flag. g stand for global, so it affects the whole string and NOT only the first value.
Here is the working fiddle:
$('#form_model').keyup(function(event) {
var newText = event.target.value;
newText = newText.replace(/\s/g, "-");
$('#form_image').val(newText+".png");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="form_model" type="text">
<input id="form_image" type="text" readonly>
JS function replace() only replace the first character that matches. I usually use
.split('X').join('Y');
So, in your code it would be:
newText = newText.split(' ').join('-');
In this way, you can 'replace' all maching characters.
$(document).ready(function () {
$('#form_model').keyup(function(event) {
var newText = event.target.value;
newText = newText.replace(" ", "-");
$('#form_image').val(newText+".png");
});
});
Example is here: https://jsfiddle.net/55qxy624/

List / output comma-separated values from single input

How would I go about outputting a list (whether as individual values or as an array) from a comma-separated value in a single input field?
Example
User enters the following into a text input field: Steve, Bruce, Matt, Natasha, Peter
Result:
Steve
Bruce
Matt
Natasha
Peter
Just split the input on comma, and generate the list
var input = "Steve, Bruce, Matt, Natasha, Peter",
ul = $('<ul />');
input.split(',').forEach(function(item) {
ul.append(
$('<li />', { text : item })
)
});
$('body').append(ul);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hope it helps you:
var myArray = $('input').val().split(',');
Using jQuery
Since you put jquery in your tags i guess you want a jQuery solution.
First of all you would want to split the values, and after that create a list (ul or ol) and add list elements (li)
$(function() {
$("#valuesForm").submit(function(e) {
e.preventDefault();
var values = $("#textfieldId").val().split(",");
if (values) {
for (var i in values) {
var value = values[i].trim(),
$valueList = $("#valueList"),
$valueItem = $("<li />");
$valueItem.text(value);
$valueList.append($valueItem);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="valuesForm">
<input type="text" id="textfieldId">
<input type="submit" value="Split!">
</form>
<ul id="valueList">
</ul>
There are several options.
1 Splitting
var aux = "Steve, Bruce, Matt, Natasha, Peter";
aux = aux.split(',');
This one gives you the names within an array but with the space after the comma.
2 White Space Removal
var aux = "Steve, Bruce, Matt, Natasha, Peter";
aux = aux.split(', ');
This one does resolve the white-space after the comma.
3 Alternative
var aux = "Steve, Bruce, Matt, Natasha, Peter";
aux = aux.split(',');
aux = jQuery.map( aux, function( n, i ) {
return n.trim();
});
This last one is more flexible and i'm showing it just to give an example.

Having trouble with input and output in Javascript

I have recently started doing my own project with javascript and I ran into a roadblock. I'm doing a reverse string project where the user inputs a string and the output reverses it. Now my problem is that I can't get the reverse string to show up in the output area.
The Javascript part:
<script>
function pass() {
var input = document.getElementById('inputfield');
var output = document.getElementById('results');
var string = input.value;
var reverse = function (string) {
return string.split('').reverse().join('');
};
output.innerHTML = reverse;
}
</script>
The HTML:
<div id="reverse">
<h1>Type Below:</h1>
<form name="form">
<input type="text" name="inputfield" id="inputfield">
<button onClick="pass();">Submit</button></br>
<input type="text" name="out" placeholder="results" id="results">
</form>
</div>
You need to call the function.
output.value = reverse(input.value);
Luis,
When creating one function that receive an parameter, never forget to send this parameter.
In this case:
output.innerHTML = reverse(yourparameter);
Regards.
you will get reversed string like this:
output.innerHTML = reverse(string);
because
var reverse = function (string) {
return string.split('').reverse().join('');
};
is just a function declaration, the string is only a parameter of the function, but not equal to
var string = input.value;

Categories