Modify the Value of Each Textfield Based on Original Value Using Jquery

Modify the value of each textfield based on original value using jQuery

Can just use val() with a callback argument. It will loop over all elements for you:

$('input[type=text]').val(function( index, originalValue){
     return $.trim(originalValue);
});

val() API docs

Input jQuery get old value before onchange and get value after on change

The simplest way is to save the original value using data() when the element gets focus. Here is a really basic example:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/e4ovx435/

$('input').on('focusin', function(){
    console.log("Saving value " + $(this).val());
    $(this).data('val', $(this).val());
});

$('input').on('change', function(){
    var prev = $(this).data('val');
    var current = $(this).val();
    console.log("Prev value " + prev);
    console.log("New value " + current);
});

Better to use Delegated Event Handlers

Note: it is generally more efficient to use a delegated event handler when there can be multiple matching elements. This way only a single handler is added (smaller overhead and faster initialisation) and any speed difference at event time is negligible.

Here is the same example using delegated events connected to document:

$(document).on('focusin', 'input', function(){
    console.log("Saving value " + $(this).val());
    $(this).data('val', $(this).val());
}).on('change','input', function(){
    var prev = $(this).data('val');
    var current = $(this).val();
    console.log("Prev value " + prev);
    console.log("New value " + current);
});

JsFiddle: http://jsfiddle.net/TrueBlueAussie/e4ovx435/65/

Delegated events work by listening for an event (focusin, change etc) on an ancestor element (document* in this case), then applying the jQuery filter (input) to only the elements in the bubble chain then applying the function to only those matching elements that caused the event.

*Note: A a general rule, use document as the default for delegated events and not body. body has a bug, to do with styling, that can cause it to not get bubbled mouse events. Also document always exists so you can attach to it outside of a DOM ready handler :)

How to edit the TextField value, with the value is already pre defined

As others stated, the problem is that you need onChange and value to point at same value/variable in state.

As a step further, I would clean all these variables in state and use only one method to change the properties (if for example you have many fields and the code gets long enough)

  const changeField = (name, value) => {
    let newCountryInfo = [...countryInfo];
    newCountryInfo[0].data.Country[0][name] = value;
    setCountry(newCountryInfo);
  };

and in each TextField you add sth like the following depending on the field

  onChange={event => {
    changeField("name", event.target.value);
  }}

Check this codesandbox link

Detecting value change of input[type=text] in jQuery

Update - 2021

As of 2021 you can use input event for all the events catering input value changes.

$("#myTextBox").on("input", function() {
   alert($(this).val()); 
});

Original Answer

just remember that 'on' is recommended over the 'bind' function, so always try to use a event listener like this:

$("#myTextBox").on("change paste keyup", function() {
   alert($(this).val()); 
});

jQuery change input text value

no, you need to do something like:

$('input.sitebg').val('000000');

but you should really be using unique IDs if you can.

You can also get more specific, such as:

$('input[type=text].sitebg').val('000000');

EDIT:

do this to find your input based on the name attribute:

$('input[name=sitebg]').val('000000');

How do you replace a specific value of an input field using jQuery?

Use $('input').val() not $('input').value() with jQuery's each().

$('input').each(function(i, el){  var str = $(el).val().replace(/undefined/g, '');  console.log(str);  $('input').val(str);});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="hidden" name="address1" id="address1" value="Some address undefined" class="address1">
<input type="hidden" name="address2" id="address2" value="Another address undefined" class="address1">

Change the Input text field value by keeping the original value

What you can do is create a hidden field when you submit the form and assign the encrypted value to the hidden field and append the field to the form and catch the encrypted value in your User class.

change type of input field with jQuery

It's very likely this action is prevented as part of the browser's security model.

Edit: indeed, testing right now in Safari, I get the error type property cannot be changed.

Edit 2: that seems to be an error straight out of jQuery. Using the following straight DOM code works just fine:

var pass = document.createElement('input');
pass.type = 'password';
document.body.appendChild(pass);
pass.type = 'text';
pass.value = 'Password';

Edit 3: Straight from the jQuery source, this seems to be related to IE (and could either be a bug or part of their security model, but jQuery isn't specific):

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
    throw "type property can't be changed";

Update text field value each time

You should get the emailAdresss child of current dialog, like:

$(this).find('#emailAddresss').val(valueofText);

See following example, where I've created 4 dialogs:

var html = '<form>Enter email address <input id="emailAddresss" type="text"></form>';
function openDialog(valueofText){  var $dialog = $('<div></div>')  .html(html)  .dialog({    autoOpen: false,    modal: true,    height: 200,    width: 250,    draggable: false,    title: "Some title",
    open: function (event, ui) {      console.log("id is  "+valueofText);      $(this).find('#emailAddresss')      .val(valueofText);      $(this).css('overflow', 'hidden');    }  });  $dialog.dialog('open');}
for(valueofText=1; valueofText<5; valueofText++){  openDialog(valueofText);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

---

Related Topics