I want to get value from these two id after they changed. How to do that.
$(document).ready(function(){
$("#Send").change(function(e){
alert(this.value);
});
$("#Receive").change(function(e){
alert(this.value);
})
})
I want something like
if( #send change && #receive change ){
var send
var receive
}
Actually, I want to see if both values of #send & #receive are changed or not. If both value are changed then I want to receive their value.
You have two possibilities to do it:
$(document).ready(function(){
$('#Send, #Receive').change(function(e){
alert(this.value);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Send">
<input type="text" id="Receive">
Or you could do it like that:
$(document).ready(function(){
$('#Send').add('#Receive').change(function(e){
alert(this.value);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Send">
<input type="text" id="Receive">
You can so something below
$(document).ready(function(){
var oldSend = $("#Send").val();
var oldReceive = $("#Receive").val();
$("#Send, #Receive").change(function(e){
var _t = $(this);
/*if(_t.attr('id') == 'Send'){
console.log('Send ' + _t.val() );
} else if('#Receive'){
console.log('Receive ' + _t.val() );
}*/
if(oldSend != $("#Send").val() && oldReceive != $("#Receive").val()){
console.log('changedd ', _t.val())
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Send">
<input type="text" id="Receive">
Related
Anyone help me to add localstorage to this Jquery code : to save the To-Do-List items to the Localstorage
<script type="text/javascript">
$(function() {
$("#add").on("click", function() {
var val = $("input").val();
if(val !== '') {
var elem = $("<li></li>").text(val);
$(elem).append("<button class='rem'>X</button>");
$("#mylist").append(elem);
$("input").val("");
$(".rem").on("click", function() {
$(this).parent().remove();
});
}
});
});
</script>
<h1>My To-Do List</h1>
<input type="text" placeholder="New item" />
<button id="add">Add</button>
<ol id="mylist"></ol>
You can use
window.localStorage.your_data = value
your_data is the name you want to set and value is the value or variable you want to save.
let's said i have a form for Quantity input with class txt-qty, and it will be loop based on data from database.
Than i want trying to check the value of quantity should not be 0, but if one of the quantity is bigger than 0 it will be true
this is my code that what i have tried :
<script type="text/javascript">
$(document).ready(function(){
var input_qty = false;
$('#checkout').submit(function(e){
e.preventDefault();
var qty = $('.txt-qty').each(function(){
$(this).val();
});
if(qty > 0){
input_qty = true;
}else{
input_qty = false;
}
if(input_qty == false){
alert('You must input one of quantity from the menu list');
}else{
this.submit();
}
});
});
</script>
in my script if i alert qty it would be return [object],[object].
guys can you help me how to check one of the value of quantity should not be 0?
If the goal is to check that at least one of the .txt-qty fields has a value > 0, then you can use get() to get a true array from your jQuery object and then Array#some to see if any field's value is > 0:
$(document).ready(function() {
$('#checkout').submit(function(e) {
e.preventDefault();
if (!$('.txt-qty').get().some(function(e) { return $(e).val() > 0; })) {
// Gets array ---^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// | Checks for at least one with a value > 0
alert('You must input one of quantity from the menu list');
} else {
this.submit();
}
});
});
That relies on implicit conversion of the string value to a number; you might consider using parseInt instead.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#checkout').click(function(e){
e.preventDefault();
var qty =[];
$('.txt-qty').each(function(){
if(parseInt($(this).val(),10) <= 0 )
{
qty.push($(this).val());
}
});
if(qty.length > 0){ // check this
input_qty = true;
}else{
input_qty = false;
}
if(input_qty == true){
alert('You must input one of quantity from the menu list');
}else{
this.submit();
}
});
});
</script>
</head>
<body>
<input type='text' class='txt-qty' />
<input type='text' class='txt-qty' />
<input type='text' class='txt-qty' />
<input type='text' class='txt-qty' />
<input type='text' class='txt-qty' />
<input type='text' class='txt-qty' />
<input type='submit' id='checkout'/>
</body>
</body>
</html>
I have 3 textboxes, I want to create something like this: When I type to textbox1, it will duplicate to textbox3, and when I type to textbox2, it will append to textbox3 with a delimiter ( - ).
For example, if I write STACK to textbox1, textbox3 will result STACK, then if I wrote down textbox2 with OVERFLOW, textbox3 value is: STACK-OVERFLOW
Here's my code at fiddle:
$(function() {
$("#text1").keyup(function() {
$('#text3').val(this.value);
});
$("#text2").keyup(function() {
$('#text3').val.append('-'+this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="text1" />
<input type="text" id="text2" />
<input type="text" id="text3" />
Anyone can fix my code?
$(function() {
var text1value , text2value;
$("#text1").keyup(function() {
text1value = $(this).val();
$('#text3').val(text1value);
});
$("#text2").keyup(function() {
text2value = $(this).val();
$('#text3').val(text1value+'-'+text2value);
});
});
You need to check also if text2 is empty so you don't have to concatenate the '-' in that case.
JS Fiddle
$(function() {
$("#text1").keyup(function() {
var text2 = $('#text2').val();
var temp = $(this).val();
if (text2 != '') {
temp = $(this).val()+'-'+text2;
}
$('#text3').val(temp);
});
$("#text2").keyup(function() {
var temp = $('#text1').val()+'-'+$(this).val();
$('#text3').val(temp);
});
});
$(function() {
$("#text1").keyup(function() {
$('#text3').val(this.value);
});
$("#text2").keyup(function(e) {
$('#text3').val(function(index, val) {
return $("#text1").val() + "-" + e.target.value;
});
});
});
This should do it
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="text1" />
<input type="text" id="text2" />
<input type="text" id="text3" />
This is one way to do it:
http://jsfiddle.net/6qojd9L4/
$(function() {
$("#text1").keyup(function() {
$('#text3').val(this.value + '-' + $('#text2').val());
});
$("#text2").keyup(function() {
$('#text3').val($('#text1').val() + '-'+this.value);
});
});
<input id="input1" type="text" />
<br />
<input id="input2" type="text" />
I have followed this simple script that stores the focus on the input text.
$(document).ready(function() {
changeFocus();
$("#input1").click(function(){
localStorage.setItem('txtObjectid', "input1");
changeFocus();
return false;
});
$("#input2").click(function(){
localStorage.setItem('txtObjectid', "input2");
changeFocus();
return false;
});
});
function changeFocus(){
if(localStorage.getItem('txtObjectid')==null)
id="input1"
else
id=localStorage.getItem('txtObjectid');
var v = "#" + id;
$(v).focus();
}
What I want to learn/know about is how to make the script flexible? How could I make this so that it won't search of the id = "input1" instead it will search for input[type=text]?
Something like this should do it
$(document).ready(function () {
var id = 'input1';
if (localStorage.getItem('txtObjectid')) {
id = localStorage.getItem('txtObjectid');
}
$('#' + id).focus();
$('input[type="text"]').on('focus', function () {
localStorage.setItem('txtObjectid', this.id);
});
});
FIDDLE
Is it possible to write a Javascript function to delete form a field when somebody does not fill in the field?
<form id="myform">
<label for="q1" id="q1label">question 1</label>
<input type="text" id="q1" name="q1"/>
<label for="q2" id="q2label">question 2</label>
<input type="text" id="q2" name="q2"/>
<label for="q3" id="q3label">question 3</label>
<input type="text" id="q3" name="q3"/>
<input type="submit" value="Delete blank fields" onclick="return checkanddelete"/>
</form>
If somebody does not fill in question 2 for example, it deletes question 2 label and the field.
For jQuery:
<script type="text/javascript">
function checkanddelete() {
$('input').each(function(){
if ($(this).val() == '') {
var id = $(this).attr('id');
$.remove('#' + id);
$.remove('#' + id + 'label');
}
});
}
</script>
For JavaScript:
<script type="text/javascript">
function checkanddelete() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++)
{
if (document.getElementsByTagName("input")[i].value.length == 0) {
var id = document.getElementsByTagName("input")[i].id;
(elem=document.getElementById(id)).parentNode.removeChild(elem);
(elem=document.getElementById(id + 'label')).parentNode.removeChild(elem)
}
}
}
</script>
Something like this?
With jquery:
$("#myform :text").each(function(){
if( !$.trim($(this).val()) )
$(this).prev('label').andSelf().remove();
});
i am using folloing function to remove element from document.
function removeElement(id)
{
if(typeof id === "object")
return id.parentNode.removeChild(id);
else
return (elem=document.getElementById(id)).parentNode.removeChild(elem);
}
You can pass a dom element or element Id itself to delete .
The following should do what you want :
var inputToDelete = document.getElementById("q2");
if (inputToDelete.value == "") {
var labelToDelete = document.getElementById("q2label");
var parentNode = document.getElementById("myform");
parentNode.removeChild(labelToDelete);
parentNode.removeChild(inputToDelete);
}