Remove comma after click the submit button

Remove comma after click the submit button - javascript

I was trying to remove comma from all of my input before submit to my database using below method :
<form method="POST" class="form-horizontal mb-5" onsubmit="submitForm()">
<input type="text" name="Salary" class="textInput form-control commanumber">
<input type="text" name="Bonus" class="textInput form-control commanumber">
<input type="text" name="Overtime" class="textInput form-control commanumber">
....
</form>
function submitForm() {
var input = $('.commanumber');
input.val(input.val().replace(/,/g, ''));
}
I managed to remove the comma and store it in my database but the problem is it converts all of the inputs to the same value. Now all of my inputs have the Salary value.
May I know how can I remove the comma from all of my .commanumber input properly and store it in the database?

Rather than select all elements, you need to select one by one individually by jQuery.each method.
function submitForm(e) {
e.preventDefault(); // remove this in your project!
$('.commanumber').each((index, input) => {
const $input = $(input);
$input.val($input.val().replace(/,/g, ''));
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" class="form-horizontal mb-5" onsubmit="submitForm(event)">
<input type="text" name="Salary" class="textInput form-control commanumber" value="1,234,567">
<input type="text" name="Bonus" class="textInput form-control commanumber" value="200,000">
<input type="text" name="Overtime" class="textInput form-control commanumber" value="300,000">
<input type="submit" value="Remove Commas!" />
</form>

You should give your inputs different Id's or class names
btn=document.getElementById("btn")
btn.addEventListener("click",(e)=>{
e.preventDefault() // you should remove this if use this code in your project
submitForm()
})
function submitForm() {
var input = $('#salary');
var input1 = $('#bonus');
console.log("before salary",input.val())
console.log("before bonus",input1.val())
input.val(input.val().replace(/,/g, ''));
input1.val(input1.val().replace(/,/g, ''));
console.log("after",input.val())
console.log("after",input1.val())
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" class="form-horizontal mb-5" onsubmit="submitForm()">
<input type="text" name="Salary" id="salary" class="textInput form-control commanumber">
<input type="text" name="Bonus" id="bonus" class="textInput form-control commanumber">
<input type="text" name="Overtime" class="textInput form-control commanumber">
<input type="submit" name="submit" id="btn">
</form>

Your input variable is an array of elements, so you need to select one by one in order to remove commas. I'm providing you 3 ways to do it :
function submitForm(e) {
e.preventDefault();
$('.commanumber').each((index, input) => { //1st way
const $input = $(input);
$input.val($input.val().replace(/,/g, ''));
});
let input = document.querySelectorAll('.commanumber'); //2nd way
input.forEach(index => {
$(index).val($(index).val().replace(/,/g, ''));
});
$.map(input, function(content, i) { //3rd way
$(content).val($(content).val().replace(/,/g, ''));
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" class="form-horizontal mb-5" onsubmit="submitForm(event)">
<input type="text" name="Salary" class="textInput form-control commanumber" value="8,210,010">
<input type="text" name="Bonus" class="textInput form-control commanumber" value="1,058,543">
<input type="text" name="Overtime" class="textInput form-control commanumber" value="16,789">
<input type="submit" value="Remove Commas!" />
</form>

Related

How to loop through text fields and concatenate the result using javascript

I need to write a javascript function that will loop through the input boxes and concatenates the text in each field together and displays the result in the result box. I tried multiple solutions and haven't been able to get any to work, I get that it needs an array of text fields but I can't seem to work it out.
<!DOCTYPE html>
<html>
<body>
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" onClick="myFunction()" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
<script>
function myFunction() {
var fields = [];
}
</script>
</body>
</html>

You can use filter and map
NOTE: I gave the button an ID of "btn"
document.getElementById('btn').addEventListener('click', function() {
const conc = [...document.querySelectorAll('#myform [id^=text]')] // id starts with text
.filter(fld => fld.value.trim() !== "") // not empty
.map(fld => fld.value) // store value
document.getElementById('result').value = conc.join(","); // join with comma
})
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" id="btn" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
In one pass:
document.getElementById('btn').addEventListener('click', function() {
const res = [];
[...document.querySelectorAll('#myform [id^=text]')]
.forEach(fld => { const val = fld.value.trim(); if (val !== "") res.push(val) })
document.getElementById('result').value = res.join(","); // join with comma
})
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" id="btn" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>

function myFunction() {
const data = document.querySelectorAll("#myform input[type='text'][id^=text]");
//console.log(data);
var fields = [];
data.forEach(item => {
if (item.value != '') {
fields.push(item.value)
}
})
document.getElementById("result").value = fields.join(",")
}
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" onClick="myFunction()" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>

Combining multiple .change functions into one using Jquery

I have a few text input fields that will update some hidden fields.
I have a few .change functions that will watch for changes on the visible input fields.
Here is my JSFiddle - https://jsfiddle.net/tcgmr698/
Jquery
$("#TravellerContact_ManualAddress1").change(function () {
$('input[id=TravellerContact_Address1]').val($('input[id=TravellerContact_ManualAddress1]').val())
});
$("#TravellerContact_ManualAddress2").change(function () {
$('input[id=TravellerContact_Address2]').val($('input[id=TravellerContact_ManualAddress2]').val())
});
$("#TravellerContact_ManualAddress3").change(function () {
$('input[id=TravellerContact_Address3]').val($('input[id=TravellerContact_ManualAddress3]').val())
});
$("#TravellerContact_ManualAddress4").change(function () {
$('input[id=TravellerContact_Address4]').val($('input[id=TravellerContact_ManualAddress4]').val())
});
$("#TravellerContact_ManualAddress5").change(function () {
$('input[id=TravellerContact_Address5]').val($('input[id=TravellerContact_ManualAddress5]').val())
});
$("#TravellerContact_ManualPostCode").change(function () {
$('input[id=TravellerContact_PostCode]').val($('input[id=TravellerContact_ManualPostCode]').val())
});
HTML
<div id="manualFullAddress" class="fullAddress">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress1" name="TravellerContact_ManualAddress1" placeholder="Address" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress2" name="TravellerContact_ManualAddress2" placeholder="Address 2" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress3" name="TravellerContact_ManualAddress3" placeholder="Address 3" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress4" name="TravellerContact_ManualAddress4" placeholder="City" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress5" name="TravellerContact_ManualAddress5" placeholder="Province" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualPostCode" name="TravellerContact_ManualPostCode" placeholder="Postal Code" type="text">
</div>
Hidden fields that get posted to the DB
<input class="HideValFromSet" id="TravellerContact_Address1" name="TravellerContact.Address1" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address2" name="TravellerContact.Address2" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address3" name="TravellerContact.Address3" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address4" name="TravellerContact.Address4" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address5" name="TravellerContact.Address5" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_PostCode" name="TravellerContact.PostCode" type="hidden" value="">
My main question is how do I go about combining these functions into one function? Is it possible?

The relevant elements are all children of #manualFullAddress. We can therefor add the .change() event handler to this parent element instead ("event delegation", but it would also work with one event handler per <input /> element)
We can use this to get the id of the <input /> element. And with .replace("Manual", "") we can get the id of the corresponding <input type="hidden" /> element.
$("#manualFullAddress").on("change", "input", function() {
const input = $(this);
$("#" + this.id.replace("Manual", "")).val(input.val());
});
$("#manualFullAddress").on("change", "input", function() {
const input = $(this);
$("#" + this.id.replace("Manual", "")).val(input.val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="manualFullAddress" class="fullAddress">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress1" name="TravellerContact_ManualAddress1" placeholder="Address" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress2" name="TravellerContact_ManualAddress2" placeholder="Address 2" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress3" name="TravellerContact_ManualAddress3" placeholder="Address 3" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress4" name="TravellerContact_ManualAddress4" placeholder="City" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress5" name="TravellerContact_ManualAddress5" placeholder="Province" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualPostCode" name="TravellerContact_ManualPostCode" placeholder="Postal Code" type="text">
</div>
<div>
"Hidden" Elements
<br />
<input class="HideValFromSet" id="TravellerContact_Address1" name="TravellerContact.Address1" value="">
<input class="HideValFromSet" id="TravellerContact_Address2" name="TravellerContact.Address2" value="">
<input class="HideValFromSet" id="TravellerContact_Address3" name="TravellerContact.Address3" value="">
<input class="HideValFromSet" id="TravellerContact_Address4" name="TravellerContact.Address4" value="">
<input class="HideValFromSet" id="TravellerContact_Address5" name="TravellerContact.Address5" value="">
<input class="HideValFromSet" id="TravellerContact_PostCode" name="TravellerContact.PostCode" value="">
</div>

In your case, you can bind change event using .manualAddressEntry-js and get the id dynamically as shown below.
$('.manualAddressEntry-js').change( function() {
var id = $(this).attr('id').replace("Manual", "");
$(`input[id=${id}]`).val($(`input[id=${id}]`).val());
});
But I will recommend changing id to data- and using that instead of id, if you're not using it anywhere else.

Delete all input element inside form jQuery

How to delete all kind of input field inside a form when clicking a href element?
<script type="text/javascript">
$('.delete-link').on('click', function() {
//remove all input inside #form-delete
});
</script>
<form id="form-delete" action="/post>" method="post">
<input type="text" name="test1" value="">
<textarea name="test2" rows="8" cols="80">TEST</textarea>
<input type="checkbox" name="test3" value="">
<input type="number" name="test4" value="">
<input type="password" name="test5" value="">
<input type="email" name="test5" value="">
</form>
<a href="#" class="delete-link">
<span>Remove All input</span>
</a>

To delete all input tags values (clear the input text)
//when the Document Loads, add event to clears all input fields
$(document).ready(function() {
$('.delete-link').on('click', function() {
$('input').val('');
});
});
Try it
http://jsfiddle.net/9q6jywmg/
To actually remove the element itself
//Document Loads, add event to remove all input tagged elements
$(document).ready(function() {
$('.delete-link').on('click', function() {
$('input').remove();
});
});
Try it
http://jsfiddle.net/hym5kde7/
Of course to remove textarea element, do the same by selecting textarea tagged elements also, like this
$('textarea').remove();

Just do this
document.getElementById('your_id').remove(); //also add ids to your input fields
Try it here!
http://jsfiddle.net/4WGRP/

<form id="form-delete" action="/post>" method="post">
<input type="text" name="test1" value="">
<textarea name="test2" rows="8" cols="80">TEST</textarea>
<input type="checkbox" name="test3" value="">
<input type="number" name="test4" value="">
<input type="password" name="test5" value="">
<input type="email" name="test5" value="">
</form>
<a href="#" class="delete-link">
<span>Remove All input</span>
</a>
<script type="text/javascript">
$('.delete-link').on('click', function() {
//remove elements
// $('#form-delete').children('input').remove();
//remove values
$('#form-delete').children('input').val('')
});
</script>

$(document).ready(function() {
$('.delete-link').on('click', function() {
$('#form-delete [my-input]').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-delete" action="/post>" method="post">
<input type="text" my-input='' name="test1" value="">
<textarea my-input='' name="test2" rows="8" cols="80">TEST</textarea>
<input my-input='' type="checkbox" name="test3" value="">
<input my-input='' type="number" name="test4" value="">
<input my-input='' type="password" name="test5" value="">
<input my-input='' type="email" name="test5" value="">
</form>
<button href="#" class="delete-link">
<span>Remove All input</span>
</button>

Use the remove() method:
$(function(){
$('.delete-link').on('click', function() {
$("#form-delete").find("input").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="form-delete" action="/post" method="post">
<input type="text" name="test1" value="">
<textarea name="test2" rows="8" cols="80">TEST</textarea>
<input type="checkbox" name="test3" value="">
<input type="number" name="test4" value="">
<input type="password" name="test5" value="">
<input type="email" name="test5" value="">
</form>
<a href="#" class="delete-link">
<span>Remove All input</span>
</a>

How to select input Value empty and not empty using JavaScript?

How to select input:empty and input:not(:empty) value after click on submit button and add following conditions:
If value is empty, after click change background color.
(It's not working as you can see in the input Text3)
If value is not empty, after click add these three conditions:
(It's not working in my sample code)
• {cursor: not-allowed;}
• readonly
• Change Background color
Here is my sample code:
$(".signupbtn").on('click', function() {
$("input").filter(function() {
return this.value.length !== 0;
}).val("Successfully Received!");
$("input:empty")
.css("background", "rgb(255,220,200)");
$("input:not(:empty)").style.cursor = "not-allowed";
$("input:not(:empty)")
.css("background", "rgb(220,20,60)");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" onsubmit="return false;">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="sss">
<button type="submit" class="signupbtn">Sign Up</button>
</form>

Here is a slightly modified version of your code. First select all the input tags with type of text then see if their length is 0 or not on this apply what you want to it.
$(".signupbtn").on('click', function() {
$('input:text').each(function(){
if($(this).val().length == 0 ){
$(this).css("background", "red");
}else{
$(this).val("Successfully Received!");
$(this).css("background", "green");
$(this).css("cursor","not-allowed");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" onsubmit="return false;">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="sss">
<button type="submit" class="signupbtn">Sign Up</button>
</form>

$(".signupbtn").on('click', function() {
$("input").filter(function() {
return this.value.length !== 0;
}).val("Successfully Received!");
$("input:empty")
.css("background", "rgb(255,220,200)");
$("input:not(:empty)").css("cursor","not-allowed");
$("input:not(:empty)")
.css("background", "rgb(220,20,60)");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" onsubmit="return false;">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="sss">
<button type="submit" class="signupbtn">Sign Up</button>
</form>

jQuery to populate array-named form fields based on first entered text box value

I have a form with variable number of inputs as an array
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
The idea is when i put some value in the first field (foo[1]) i need the jQuery or Javascript copy the value from #foo[1] into #foo[2], #foo[3], etc depending on the array.

Do you need following behavior :
$(document).ready(function(){
$("input[id^=foo\\[]").prop("disabled",true); //disable all elements first
$("input#foo\\[1\\]").prop("disabled",false); //then enable the first one
$("input#foo\\[1\\]").change(function(){
var source = $(this);
var currentVal = $(source).val();
$("input[id^=foo\\[]").each(function(){
if(!$(this).is(source))
$(this).val(currentVal);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value=""/>
<input type="text" id="foo[3]" name="foo[3]" value=""/>
<input type="text" id="foo[4]" name="foo[4]" value=""/>
<input type="text" id="foo[5]" name="foo[5]" value=""/>
</form>

$('input').on('input', function(){
$(this).siblings().val($(this).val());
});
Couldn't tell if you just wanted the first or all. If just the first, you can target with an id or jQuery.
$('input').eq(0).on('input', function(){});

Something like this
HTML
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
JavaScript
$("input[id=foo\\[1\\]").on("input", function (){
$(this).siblings().val($(this).val());
});
And if you want the other to be readonly:
$("input[id^=foo\\[]:not([id=foo\\[1\\]])").attr("readonly", "readonly");

Develop Reference

JavaScript is the programming language of the Web.

Remove comma after click the submit button - javascript

Related

How to loop through text fields and concatenate the result using javascript

Combining multiple .change functions into one using Jquery

Delete all input element inside form jQuery

How to select input Value empty and not empty using JavaScript?

jQuery to populate array-named form fields based on first entered text box value

Categories

Resources