CODEWITHSUNDEEP
javascriptjquerywordpress
user1202292
user1202292

Reputation: 543

Get live value of input field in wordpress

I am trying to set a variable to the current text in an input box in the "edit post" screen in wordpress using a function

I currently have:

jQuery(document).on("change, keyup, click", "#input_box_1, #input_box_2, #input_box_3", functionName);

    function functionName(){
        var myvar = parseFloat(jQuery("#input_box").val());
    var myvar2 = parseFloat(jQuery("#input_box_2").val());
    var myvar3 = parseFloat(jQuery("#input_box_3").val());
      }
    });

Which of course only works when you save the draft TWICE (when you enter a value for the first time, the html value of the input box does not change until you save it, then when you save it again, it sets the variable to the new value).

Is there a way to set the variable to update every time the user types anything (using, changes,keyup and click) in the input box using my approach?

Upvotes: 0

Views: 3087

Answers (4)

jarmie
jarmie

Reputation: 383

You'll have to bind to the input box so that the variable is updated whenenver a user enters characters :
js : 

$('#input_box').on('keyup', function() {
    var my_value = $(this).val();
    $('#result').html(my_value);
});

html : 

<input id="input_box" />
<p id="result"></p>

Fiddle : http://jsfiddle.net/a8jbF/

--Update --

New fiddle : http://jsfiddle.net/a8jbF/1/

Using a timeout so that the update code can be throttled

-- Update 2 --

Your code above works as is - but it is alot of overhead as you are changing every variable with every keystroke - regardless if it is the input being modified --

If you are set on doing this with one function and want to improve performance, I would add in the delay function (in my second fiddle) and then modify your functionName a bit to cut (some) overhead : 

function functionName(){
    // wrap your variable set in a delay
    delay(function(){
        // actions to do after the delay is complete
        var myvar = parseFloat(jQuery("#input_box").val());
        var myvar2 = parseFloat(jQuery("#input_box_2").val());
        var myvar3 = parseFloat(jQuery("#input_box_3").val());
    }, 1000);
  }

Upvotes: 0

Andrew
Andrew

Reputation: 505

There sure is!

I created this Fiddle for you:

http://jsfiddle.net/7HQ4W/

<p>Original Input Value:
    <br />
    <input type="text" id="origVal">
</p>
<p>Target Input Value:
    <br />
    <input type="text" id="tarVal">
</p>

$('#origVal').keyup(function () {
    $('#tarVal').val($(this).val());
});

[UPDATE BASED ON COMMENTS]

http://jsfiddle.net/7HQ4W/1/

I tweaked it for you based on your new code sample. How does that look?

$('#input_box_1, #input_box_2, #input_box_3').keyup(function () {
    var myVar1 = $('#input_box_1').val();
    var myVar2 = $('#input_box_2').val();
    var myVar3 = $('#input_box_3').val();
    $('#display').html("<p>myVar1 = " + myVar1 +
        "<p>myVar2 = " + myVar2 +
        "<p>myVar3 = " + myVar3);
});

Upvotes: 1

gashu
gashu

Reputation: 492

Handle events blur or focusout on your $('#inputBox')

Upvotes: 0

tymeJV
tymeJV

Reputation: 104785

You can use focusout() to capture the input each time the input loses focus.

$("#input_box").focusout(function() {
    //Assign the value somewhee
    var myVar = $(this).val();
});

Demo: http://jsfiddle.net/8wY7Q/

Upvotes: 0

Related Questions