Match the value of inputs on change using jquery

Match the value of inputs on change using jquery - javascript

I have two inputs which I want to have the same input values when one is typed in. It kind of works but not all the time.
I will leave the code here:
$('#google-querynav').keypress(function() {
var text = $(this).val();
$('#google-querystat').attr('value', text);
})
$('#google-querystat').keypress(function() {
var text = $(this).val();
$('#google-querynav').attr('value', text);
})
Thanks for the help

You need to use change and keyup event to do this work. Also you can use val() method to change value of input instead of attr("value").
$('#google-querynav').on("change keyup", function() {
var text = $(this).val();
$('#google-querystat').val(text);
})
$('#google-querystat').on("change keyup",function() {
var text = $(this).val();
$('#google-querynav').val(text);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="google-querynav"/>
<input type="text" id="google-querystat"/>
You can use shorter code to do this
$('#google-querynav, #google-querystat').on("keyup change", function() {
var text = $(this).val();
$('#google-querynav, #google-querystat').val(text);
})
Test it in jsfiddle

Use keyup instead of keypress. And use val instead of attr
$('#google-querynav').on('keyup change', function() {
var text = $(this).val();
$('#google-querystat').val(text);
})
$('#google-querystat').on('keyup change', function() {
var text = $(this).val();
$('#google-querynav').val(text);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="google-querynav">
<input id="google-querystat">

Related

check if text exists in text box jquery

how to check if the text exists in text box jquery
I need to check if the text exists in the input box,if checking text is not exist thend append new data
I have tried with below code
$(document).ready(function(){
$("#item_inv_desc").change(function(){
var item_inv_desc = $('select[name=item_inv_desc]').val();
if (item_inv_desc == 7)
{
var invoice_number = "123456789";
//I need check if text "CRN" exists in text box
var data=$('#invoice_number:contains("CRN")')
if(data)
{
//if text "CRN" exist no need to append data
}
else
{
//if not exist
$("#invoice_number").val(invoice_number+"CRN");
}
}
});
})
//Html
<input type="text" id="invoice_number" value="">
I am having problem when try to insert append value it adds extra CRN number to invoice number,I need to avoid duplicating,

Try includes() with the val() of the text box:
var data = $('#invoice_number').val().includes("CRN")
or, for older browsers, use indexOf():
var data = $('#invoice_number').val().indexOf("CRN") !== -1
Working Demo:
$(document).ready(function() {
$("#invoice_number").change(function() {
var invoice_number = "123456789";
var data = $('#invoice_number').val().includes("CRN");
if (data) {
} else {
$("#invoice_number").val(invoice_number + "CRN");
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="invoice_number" value="">

You can use regex to remove all the digits and get the text only from the value of the input text. If you want that on button click then add that block of code inside the click function:
var data = $('#invoice_number').val();
var res = data.replace(/[0-9]/g, '');
console.log(res);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="invoice_number" value="123456789CRN">

#Manjunath
var data=$('#invoice_numbe:contains("CRN")')
"r" is missing when you are checking below
var data=$('#invoice_numbe:contains("CRN")')
and use
var data=$('#invoice_number').val().indexOf("CRN");
if(data>-1){
// donot add CRN
}

insert value based on input field changes

I have following JavaScript codes in my view:
$('.f_opf_description_c').val(data['opf_description_c']);
$("#Form_2").on("input", function() {
$('.f_opf_description_c').val(this.value);
});
I need to insert value of data['opf_description_c'] to the field with id Form_2(class is f_opf_description_c ) when this field is not changed. If this field is changed, I need to insert val(this.value). How can I do it?

add some variable and change event
var isChange = false;
$(".f_opf_description_c").on("change", function() {
isChange = true;
});
$("#Form_2").on("submit", function() {
if (isChange)
$('.f_opf_description_c').val(data['opf_description_c']);
});

if I understood you correctly this fiddle can help
$(document).ready(function(){
var data ={'opf_description_c':'some value'};
$(".f_opf_description_c").val(data['opf_description_c']);
$("#Form_2").on("keydown", function() {
if($(this).val() == data['opf_description_c']){
$(this).val('')
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<input type="text" class="f_opf_description_c" id="Form_2">
</div>

Jquery :How to store textbox value clientside and display?

The below code will update the display value enter by user in textbox when button clicked but in this code it will not preserve the previous value enter by user .
<h1>Type your comment below </h1>
<input id="txt_name" type="text" value="" />
<button id="Get">Submit</button>
<div id="textDiv"></div> -
<div id="dateDiv"></div>
jQuery(function(){
$("button").click(function() {
var value = $("#txt_name").val();
$("#textDiv").text(value);
$("#dateDiv").text(new Date().toString());
});
});
Now I want preserve all the value enter by user and when user will submit the button show both value previous as well as current.
How to achieve this ?
Can below code will help to preserve all the value
var $input = $('#inputId');
$input.data('persist', $input.val() );
If yes how to display all value previous,current etc. when user click on button ?

If i got this right, this is what you need?
<h1>Type your comment below </h1>
<input id="txt_name" type="text" value="" />
<button id="Get">Submit</button>
<script type="text/javascript">
jQuery(function(){
$("button").click(function() {
var value = $("#txt_name").val();
$("#section").prepend('<div class="textDiv">'+value+'</div>')
$("#section").prepend('<div class="dateDiv">'+new Date().toString()+'</div>')
$("#txt_name").val('');
});
});
</script>
<!-- each time you press submit, a new line will be pushed here -->
<div id="section">
</div>

If you want to display only the previous and current value the user submitted and use the data function then:
$("button").click(function() {
var input = $("#txt_name").val();
var previous = $("#textDiv").data('previous') || '';
$("#textDiv").text(previous+input);
$("#textDiv").data('previous',input);
$("#dateDiv").text(new Date().toString());
});
If you want all the values and you want to store them, then I would create an array. But you could always concatenate the string.
var arr = [];
$("button").click(function() {
var input = $("#txt_name").val();
arr.push(input);
var previous = $("#textDiv").data('previous') || '';
$("#textDiv").text(previous+input);
$("#textDiv").data('previous',previous+input);
$("#dateDiv").text(new Date().toString());
});
Without using .data() you can do this:
$("button").click(function() {
var input = $("#txt_name").val();
$("#textDiv").text($("#textDiv").text()+input);
$("#dateDiv").text(new Date().toString());
});

Instead of using two separate divs for message and date, you can use a single div.
<h1>Type your comment below </h1>
<input id="txt_name" type="text" value="" />
<button id="Get">Submit</button>
<div id="msgDiv"></div>
$(document).ready(function() {
var preservedTxt = '';
$("button").click(function() {
var input = $("#txt_name").val();
var date = new Date().toString();
var msg = input + ' - ' + date;
preservedTxt = preservedTxt + '<br>' + msg;
$('#msgDiv').html(preservedTxt);
});
});
Jsfiddle : https://jsfiddle.net/nikdtu/p2pcwj2f/

Storing values in array will help
jQuery(function(){
var name=[];
var time=[];
$("button").click(function() {
var value = $("#txt_name").val();
name.push(value);
$("#textDiv").text(name);
time.push(new Date().toString())
$("#dateDiv").text(time);
});
});

Read the value of input returns undefined

I have this input
<input id="look" type="number" min="0" step="0.01" max="100000" class="form-control" name="number" required>
and I want to read the value that user will put at that time. So I wrote
$(function() {
$('#look').on('keyup', function(e) {
var temp2 = $('look').val();
alert(temp2);
});
});
and when the user starts typing the value inside the alert is undefined..

it should be #look rather than look, but rather than a selector use $( this )
$(function() {
$('#look').on('keyup', function(e) {
var temp2 = $(this).val(); //look should have been #look
alert(temp2);
});
});

$('#look').on('keyup', function(e) {
var temp2 = $('#look').val(); // you are missing #
alert(temp2);
});

Try this :
$(function() {
$('#look').on('keyup', function(e) {
var temp2 = $('#look').val(); //# is used for id selectors
alert(temp2);
});
});

while you are getting value from the input field, you missed "#" before ID.
replace
var temp2 = $('look').val();
with
var temp2 = $('#look').val();
or you can use $(this).val()

How do you handle a form change in jQuery?

In jQuery, is there a simple way to test if any of a form's elements have changed?
Say I have a form and I have a button with the following click() event:
$('#mybutton').click(function() {
// Here is where is need to test
if(/* FORM has changed */) {
// Do something
}
});
How would I test if the form has changed since it was loaded?

You can do this:
$("form :input").change(function() {
$(this).closest('form').data('changed', true);
});
$('#mybutton').click(function() {
if($(this).closest('form').data('changed')) {
//do something
}
});
This rigs a change event handler to inputs in the form, if any of them change it uses .data() to set a changed value to true, then we just check for that value on the click, this assumes that #mybutton is inside the form (if not just replace $(this).closest('form') with $('#myForm')), but you could make it even more generic, like this:
$('.checkChangedbutton').click(function() {
if($(this).closest('form').data('changed')) {
//do something
}
});
References: Updated
According to jQuery this is a filter to select all form controls.
http://api.jquery.com/input-selector/
The :input selector basically selects all form controls.

If you want to check if the form data, as it is going to be sent to the server, have changed, you can serialize the form data on page load and compare it to the current form data:
$(function() {
var form_original_data = $("#myform").serialize();
$("#mybutton").click(function() {
if ($("#myform").serialize() != form_original_data) {
// Something changed
}
});
});

A real time and simple solution:
$('form').on('keyup change paste', 'input, select, textarea', function(){
console.log('Form changed!');
});

You can use multiple selectors to attach a callback to the change event for any form element.
$("input, select").change(function(){
// Something changed
});
EDIT
Since you mentioned you only need this for a click, you can simply modify my original code to this:
$("input, select").click(function(){
// A form element was clicked
});
EDIT #2
Ok, you can set a global that is set once something has been changed like this:
var FORM_HAS_CHANGED = false;
$('#mybutton').click(function() {
if (FORM_HAS_CHANGED) {
// The form has changed
}
});
$("input, select").change(function(){
FORM_HAS_CHANGED = true;
});

Looking at the updated question try something like
$('input, textarea, select').each(function(){
$(this).data("val", $(this).val());
});
$('#button').click(function() {
$('input, textarea, select').each(function(){
if($(this).data("val")!==$(this).val()) alert("Things Changed");
});
});
For the original question use something like
$('input').change(function() {
alert("Things have changed!");
});

$('form :input').change(function() {
// Something has changed
});

Here is an elegant solution.
There is hidden property for each input element on the form that you can use to determine whether or not the value was changed.
Each type of input has it's own property name. For example
for text/textarea it's defaultValue
for select it's defaultSelect
for checkbox/radio it's defaultChecked
Here is the example.
function bindFormChange($form) {
function touchButtons() {
var
changed_objects = [],
$observable_buttons = $form.find('input[type="submit"], button[type="submit"], button[data-object="reset-form"]');
changed_objects = $('input:text, input:checkbox, input:radio, textarea, select', $form).map(function () {
var
$input = $(this),
changed = false;
if ($input.is('input:text') || $input.is('textarea') ) {
changed = (($input).prop('defaultValue') != $input.val());
}
if (!changed && $input.is('select') ) {
changed = !$('option:selected', $input).prop('defaultSelected');
}
if (!changed && $input.is('input:checkbox') || $input.is('input:radio') ) {
changed = (($input).prop('defaultChecked') != $input.is(':checked'));
}
if (changed) {
return $input.attr('id');
}
}).toArray();
if (changed_objects.length) {
$observable_buttons.removeAttr('disabled')
} else {
$observable_buttons.attr('disabled', 'disabled');
}
};
touchButtons();
$('input, textarea, select', $form).each(function () {
var $input = $(this);
$input.on('keyup change', function () {
touchButtons();
});
});
};
Now just loop thru the forms on the page and you should see submit buttons disabled by default and they will be activated ONLY if you indeed will change some input value on the form.
$('form').each(function () {
bindFormChange($(this));
});
Implementation as a jQuery plugin is here https://github.com/kulbida/jmodifiable

var formStr = JSON.stringify($("#form").serializeArray());
...
function Submit(){
var newformStr = JSON.stringify($("#form").serializeArray());
if (formStr != newformStr){
...
formChangedfunct();
...
}
else {
...
formUnchangedfunct();
...
}
}

You need jQuery Form Observe plugin. That's what you are looking for.

Extending Udi's answer, this only checks on form submission, not on every input change.
$(document).ready( function () {
var form_data = $('#myform').serialize();
$('#myform').submit(function () {
if ( form_data == $(this).serialize() ) {
alert('no change');
} else {
alert('change');
}
});
});

$('form[name="your_form_name"] input, form[name="your_form_name"] select').click(function() {
$("#result").html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Form "your_form_name"</h2>
<form name="your_form_name">
<input type="text" name="one_a" id="one_a" value="AAAAAAAA" />
<input type="text" name="one_b" id="one_b" value="BBBBBBBB" />
<input type="text" name="one_c" id="one_c" value="CCCCCCCC" />
<select name="one_d">
<option value="111111">111111</option>
<option value="222222">222222</option>
<option value="333333">333333</option>
</select>
</form>
<hr/>
<h2>Form "your_other_form_name"</h2>
<form name="your_other_form_name">
<input type="text" name="two_a" id="two_a" value="DDDDDDDD" />
<input type="text" name="two_b" id="two_b" value="EEEEEEEE" />
<input type="text" name="two_c" id="two_c" value="FFFFFFFF" />
<input type="text" name="two_d" id="two_d" value="GGGGGGGG" />
<input type="text" name="two_e" id="two_f" value="HHHHHHHH" />
<input type="text" name="two_f" id="two_e" value="IIIIIIII" />
<select name="two_g">
<option value="444444">444444</option>
<option value="555555">555555</option>
<option value="666666">666666</option>
</select>
</form>
<h2>Result</h2>
<div id="result">
<h2>Click on a field..</h2>
</div>
In addition to above #JoeD's answer.
If you want to target fields in a particular form (assuming there are more than one forms) than just fields, you can use the following code:
$('form[name="your_form_name"] input, form[name="your_form_name"] select').click(function() {
// A form element was clicked
});

Try this:
<script>
var form_original_data = $("form").serialize();
var form_submit=false;
$('[type="submit"]').click(function() {
form_submit=true;
});
window.onbeforeunload = function() {
//console.log($("form").submit());
if ($("form").serialize() != form_original_data && form_submit==false) {
return "Do you really want to leave without saving?";
}
};
</script>

First, I'd add a hidden input to your form to track the state of the form. Then, I'd use this jQuery snippet to set the value of the hidden input when something on the form changes:
$("form")
.find("input")
.change(function(){
if ($("#hdnFormChanged").val() == "no")
{
$("#hdnFormChanged").val("yes");
}
});
When your button is clicked, you can check the state of your hidden input:
$("#Button").click(function(){
if($("#hdnFormChanged").val() == "yes")
{
// handler code here...
}
});

Develop Reference

JavaScript is the programming language of the Web.

Match the value of inputs on change using jquery - javascript

Related

check if text exists in text box jquery

insert value based on input field changes

Jquery :How to store textbox value clientside and display?

Read the value of input returns undefined

How do you handle a form change in jQuery?

Categories

Resources