The goal is to replace some characters directly when written in the form input, not after submitting the form. Also, I would like to change the contrast of the replacing character to be kind of grey/less visible.
I came up with something like that (but not working infortunately):
<form action="" method="post">
<input type="text" name="test_input" id="test_input" onkeypress="myFunction()" required>
<input type="submit" value="Subscribe!">
</form>
<script>
function myFunction() {
let str = document.getElementById("test_input").innerHTML;
let res = str.replace(/a/g, "b");
document.getElementById("test_input").innerHTML = res;
}
</script>
You have some mistakes in your code. Check out corrected code.
You need to correct your pattern.
<form action="" method="post">
<input type="text" name="test_input" id="test_input" onkeyup="myFunction()" required>
<input type="submit" value="Subscribe!">
</form>
<script>
function myFunction() {
let str = document.getElementById("test_input").value;
let res = str.replace(/a/g, "b");
console.log(res)
document.getElementById("test_input").value = res;
}
</script>
Try a cleaner solution that uses regular expressions:
<input type="text" onkeyup="this.value=this.value.replace(/[Search Expression]/flag,'New String');"/>
This solution prevents the user from typing a value outside the pattern established by the regex.
Example:
To remove all the numbers from "name" field:
<input type="text" onkeyup="this.value=this.value.replace(/[\d]/g, '');">
Related
I have a text input search field. I'd like to add an escape backslash to any colon entered by the user. This is what I have right now:
<form role="form" action="..." method="get">
<div>
<input id="input" type="text" name="q">
<button id="search_button" type="submit">Go!</button>
</span>
</div>
</form>
<script type="text/javascript">
document.getElementById("search_button").addEventListener('click', function() {
let text = document.getElementById('input').value;
let regex = /:/gi;
let new_text = text.replaceAll(regex, "\:");
});
</script>
It doesn't seem to work, though: the string sent to the 'q' parameter has the colon without the escape character. What am I missing?
Even when fixing the replacement with the additional backslash, your code still wont work because you also need to change the value of the form field with its new value, as follows "new code":
<form role = "form" action="..." method="get">
<div>
<input id="input" type="text" name="q">
<button id="search_button" type="submit">Go!</button>
</span>
</div>
</form>
<script type="text/javascript">
document.getElementById("search_button").addEventListener('click', function () {
let text = document.getElementById('input').value;
let regex = /:/gi;
let new_text = text.replaceAll(regex, "\\:"); // fix
document.getElementById('input').value = new_text; // new code
});
</script>
\ is a special character in string used in escape sequences. If you want to literally add a \ to a string you have to escape it as well.
let new_text = text.replaceAll(regex, "\\:");
Because the backslash have a special meaning you have to escape this character.
You can easily do it by \\:
<form role="form" action="..." method="get">
<div>
<input id="input" type="text" name="q">
<button id="search_button" type="submit">Go!</button>
</span>
</div>
</form>
<script type="text/javascript">
document.getElementById("search_button").addEventListener('click', function() {
let text = document.getElementById('input').value;
let regex = /:/gi;
let new_text = text.replaceAll(regex, "\\:");
document.getElementById('input').value = new_text; // new code
});
</script>
Would like your help resolving this piece of code.
Trying to clear inputs after submit but not able to.
Can someone give me a hint??
Thank you so much.
<script>
var list = document;
function process(idTable)
{
var newRow = list.createElement('tr');
newRow.insertCell(0).innerHTML = list.getElementsByName('name')[0].value;
newRow.insertCell(1).innerHTML = list.getElementsByName('surname')[0].value;
newRow.insertCell(2).innerHTML = list.getElementsByName('email')[0].value;
list.getElementById(idTable).appendChild(newRow);
return false;
list.getElemntsByName('form')[0].value="";
}
</script>
<section>
<form name="form" method="post" id="myForm" onsubmit=" return process('myTable')" >
<p> <label>Name:</label> <input type="text" name="name" placeholder = "Your first name" required> </p>
<p> <label>Surname:</label> <input type="text" name="surname" placeholder = "Your last name" required> </p>
<p> <label>Email:</label> <input type="e-mail" name="email" placeholder = "xpto#example.com" required> </p>
<p> <input type="submit" value="Add"> <input type="reset" value="Reset"> </p>
</form>
</section>
Two points:
You exited the function before assign value to the form
Better use list.getElemntsByName('form')[0].reset();
So your code will be like this:
<script>
var list = document;
function process(idTable)
{
var newRow = list.createElement('tr');
newRow.insertCell(0).innerHTML = list.getElementsByName('name')[0].value;
newRow.insertCell(1).innerHTML = list.getElementsByName('surname')[0].value;
newRow.insertCell(2).innerHTML = list.getElementsByName('email')[0].value;
list.getElementById(idTable).appendChild(newRow);
list.getElemntsByName('form')[0].reset();
return false;
}
</script>
Why don't you use button tag for your 'submit' and 'reset', then in that use clientclick event, have reset function that clears the input tag.
Use $('#id of input element ').val(' ') inside process function . Also write this code above return false statement
is there a way to submit some selected fields to the URL with a GET method ?
by clicking on a button, I want to put a string on the URL, but using a GET method.
expected result:
test.html?test=11,13,21,34&somewords=1,2,3&demo=2
A simple form would most likely do
<form action="test.html" method="GET">
<input type="text" name="test">
<input type="text" name="somewords">
<input type="text" name="2">
<input type="submit">
</form>
Yes! Example :
function submit() {
var test = document.getElementById('test').value;
var demo = document.getElementById('demo').value;
var somewords = document.getElementById('somewords').value;
var url = 'test.html?test=' +test + '&somewords=' + somewords + '&demo=' + demo;
console.log(url); // test.html?test=1,2,3,4&somewords=noting&demo=2
// Code for get request
}
HTML
<input type="text" value="1,2,3,4" id="test">
<input type="text" value="noting" id="somewords">
<input type="text" value="noting" id="dummy">
<input type="text" value="2" id="demo">
<button onclick="submit()">Submit</button>
Live example : https://jsbin.com/cayude/edit?html,js,console,output
Hope this helps. Thanks !
If you are only interested in changing the displayed URL, use History#pushState.
history.pushState(null, null, formatURL(query));
If you actually want to navigate to a different page,
window.location.href = formatURL(query);
Assuming formatURL is a small helper utility that formats a querystring URL like what you've provided.
I'm trying to make sure the input in a particular field is just an 11 digit number, however my if condition does not seem to be working:
Javascript:
<script>
function check() {
var x = document.forms["myform"]["mobile"].value;
if (!/^\d{11}$/.test(x)) {
myform.action="gender.html";
else {
myform.action="mobilerror.html"
}
}
</script>
And the HTML is:
<form id="myform" onsubmit="check();" >
<input class="input" type="text" name="mobile" required="required"
oninvalid="this.setCustomValidity('Number is empty')" oninput="setCustomValidity('')" />
</form>
Please help!
You can try maxlength and type attribute of input field:
<input class="input" type="text" name="mobile" maxlength="11" type="number" required="required"/>
If it satisfy your case then you don't need to call javascript function.
Your regular expression is working just fine. I think the error lies in the "if" condition. Try changing
if (!/^\d{11}$/.test(x)) {
myform.action="gender.html";
else {
myform.action="mobilerror.html"
}
to this
if (/^\d{11}$/.test(x)) {
myform.action="gender.html";
else {
myform.action="mobilerror.html"
}
As you can see I just took off the negation in the expression.
Note: Assuming that the "mobilerror.html" is shown when the user didn't type the 11 digit as expected.
Try this
function check() {
var x = document.forms["myform"]["mobile"].value;
var pattern = new RegExp("^1?([1-9])(\\d{10})");
if (pattern.test(x)) {
myform.action="gender.html";
} else {
myform.action="mobilerror.html"
}
}
^1?([1-9]) checks if the first number is not zero, so that the input value is numerically a 11-digit number. If you don't want it you can remove it.
This help you :
use type 'number':
<input type="number" id="number" class="input">
and test number digits is 11 or not with :
var patt = /.{11}/;
Example :
<html>
<head>
<style>
</style>
</head>
<body>
<form id="myform" onsubmit="check()" >
<input id="number" class="input" type="number">
<button type="submit">Submit</button>
</form>
<script>
var patt = /.{11}/;
function check(){
var num = document.getElementById("number").value;
var frm = document.getElementById("myform");
if(patt.test(num))
frm.action ="mobilerror.html"
else
frm.action = "gender.html";
}
</script>
</body>
</html>
I have a form in which there is one text field is provided with a submit button.On clicking submit button,it redirects to second php page from first php page.
index.php
<form action="submit.php" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert()" />
</form
<script type="text/javascript">
function convert()
{
alert("hi");
var str ;
str = document.getElementById("search").value;
document.writeln(str.toLowerCase());
}
</script>
On submitting the form,i want the url to become like submit.php?search=text
I want this text to be in lower case,although if text entered is uppercase.
Please guide me how to make this text lower case,I am using the above script for converting it to lower case.But its not converting the text in lower case in URL.
Please guide me on this..
There was a few errors, you were missing the right angle bracket on </form> and you were trying to write the value rather than setting the field value, try this...
<form action="submit.php" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert();" />
</form>
<script type="text/javascript">
function convert() {
alert("hi");
var str;
var srch=document.getElementById("search");
str = srch.value;
srch.value=str.toLowerCase();
}
</script>
You can do this only using javascript with a few extra stuff:
1) Give your <form> an id
<form action="submit.php" method="get" id="form1">
2) Make your <input> type as button. The reason for this is because we want to make sure the convert() function is executed first, and after that we will submit the form.
<input type="button" value="submit" onclick="convert()" />
3) Finally javascript to:
function convert()
{
alert("hi");
var str ;
str = document.getElementById("search");
str.value = (str.value.toLowerCase());
//get the form id and submit it
var form = document.getElementById("form1");
form.submit();
}
Fiddle
You are use form element so you can get any elements inside form element access by name, Here Our form name is form1 and inside this form inputbox name="search" and access this value by this way, document.form1.search.value.toLowerCase();
Check this Demo jsFiddle
JavaScript
function convert() {
alert("hi");
var str = document.form1.search.value.toLowerCase();
document.writeln(str);
//console.log(str);
}
HTML
<form name="form1" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert();" />
</form >
try like this:
alert("hi");
document.getElementById("search").value = document.getElementById("search").value.toLowerCase();
return true;
Fiddle Live