Jquery - How to copy an input that has a value on load

Question

I have a website url field that has the value set for returning visitors who have previously filled out the form. If they change the value, then ('keyup blur paste', function() will copy it to a div. If they do not change the value, the ('keyup blur paste', function() does not copy the value to the div

I would like to figure out how to add to this script a function that would also copy the value to the div if they do not change it, because blur only works if they click in the input before they submit the form.

Here is my current script:

$(function () {
     $('#Website').on('keyup blur paste', function() {
    var self = this;
    setTimeout(function() {
      var str = $(self).val();
      $("#viewer").text(str.replace(/^http\:\/\//, ''));
    }, 0)
    })
});

Are you asking how to retrieve a cookie? Is this a duplicate of http://stackoverflow.com/questions/20369344/jquery-copying-an-input-to-a-div-with-keyup-paste-having-an-issue-with-autofi ? — Grahame A, Dec 04 '13 at 21:58
You need a plugin for that... http://stackoverflow.com/questions/1599287/create-read-and-erase-cookies-with-jquery — loveNoHate, Dec 04 '13 at 21:59
@Gallen No I have the cookie retrieved in an input already, but I want it copied to a div if they submit it. I would put it into the div when the page is generated, but they might change it. — Michael Falciglia, Dec 04 '13 at 22:01
question is too vague and no html or cookie code provided. Not clear what you are asking to do — charlietfl, Dec 04 '13 at 22:07
@dollarvar I am not trying to change the cookie. I am just trying to copy a the input to hidden `div`. So if they come to the page and see the field already has the correct value from the cookie. — Michael Falciglia, Dec 04 '13 at 22:07
@charlietfl I just rephrased it, I just realized how it is prepopulated is irrelevant. I really meant if the field has been pre-populated by any method. Whether populated by a cookie or even if the page was dynamically generated. I just need to a field with a value already set to be copied to a `div` if the value is not changed. — Michael Falciglia, Dec 04 '13 at 22:18
still not clear at all what you are needing. Issue should be clearly defined, which it is not. You can tell by other comments and answers that a concise explanation is needed — charlietfl, Dec 04 '13 at 22:26
When you say "pre-populated" do you mean that the input field has a `value` on pageload? If that is the case, of course it would not fill the `div`, since there is not event that triggers your script. — Steve, Dec 04 '13 at 22:29
@Steve Sorry my terminology is wrong. So yes it has a value on pageload. So in many cases the value will be not changed, but in some cases it is changed. The cases where it is changed, I'm using `('keyup blur paste', function()`, but if they keep the value and do not click in the field at all, then it is not copied to the `div` — Michael Falciglia, Dec 04 '13 at 22:46
@charlietfl Sorry my terminology has been wrong, I am going to rewrite it again. — Michael Falciglia, Dec 04 '13 at 22:47
@Steve I updated the question for you, I can see how it was confusing, sorry about that. — Michael Falciglia, Dec 04 '13 at 23:00
still no cookie code.... this question is going nowhere fast. — charlietfl, Dec 04 '13 at 23:11
@ steve, Its irrelevant. I rewrote the entire question if you look, there is no mention of cookie anywhere. But I will make a fiddle with it so you can see it and I don't mess up the question to anyone just looking at it. give me a few minutes — Michael Falciglia, Dec 04 '13 at 23:20
@Steve I rewrote the entire question if you look, there is no mention of cookie anywhere because I felt it was irrelevant. But here is a fiddle with both scripts and the html [http://jsfiddle.net/mikeef74/8kn4V/1/] — Michael Falciglia, Dec 04 '13 at 23:27
but cookie was in original question.....sure know how to get people confused. If it isn't relevant, why was it mentioned to begin with? nobody understands what is populating your elements — charlietfl, Dec 05 '13 at 00:35
If the content of the input `value` is populated on pageload, you shouldn't need JS for this. Just use the same value you are using to populate the input `value` and also populate the `#viewer` div. I.e. `` and `
$myServerVariable
`. If `$myServerVariable` is populated, they will both have the same value, if not they will both be empty. And if the user changes the value, it will reflect correctly. — Steve, Dec 05 '13 at 00:48
@charlietfl At first I thought it was relevant, but then after thinking about it, I realized that it did not play a role in what I was trying to do. If it came from a client side or server method, its not playing a factor in the next event. It was an honest mistake, sorry about that — Michael Falciglia, Dec 05 '13 at 00:52
suggest you start all over again with proper question that explicitly outlines your issue — charlietfl, Dec 05 '13 at 01:08

score 0 · Answer 1 · answered Dec 04 '13 at 22:14

0

on your page load...

   $('#mydiv').html('whatever the value of the cookie');

is that what you need? as they mentioned in the comments above, your question is a little confusing.

answered Dec 04 '13 at 22:14

jplara

141
6

I just rephrased it, I just realized how it is prepopulated is irrelevant. I really meant if the field has been pre-populated by any method. Whether populated by a cookie or even if the page was dynamically generated. I just need to a field with a value already set to be copied to a `div` if the value is not changed. – Michael Falciglia Dec 04 '13 at 22:19
so you need to check if input value is the same as div text if not then write it to your div – jplara Dec 04 '13 at 22:38

CupawnTae · Accepted Answer · 2013-12-05T10:05:17.580

0

If I get you correctly, you want to populate the div on load as well as on keyup/blur/paste? Something like this?

$(function () {
    $('#Website').on('keyup blur paste', function() {
        var self = this;
        setTimeout(function() {
            var str = $(self).val();
            $("#viewer").text(str.replace(/^http\:\/\//, ''));
        }, 0)
    });
    // just add the line below
    $("#viewer").text($('#Website').val().replace(/^http\:\/\//, ''));
});

I've updated the fiddle you created to demonstrate this working: http://jsfiddle.net/8kn4V/2/

edited Dec 05 '13 at 10:05

answered Dec 04 '13 at 22:25

CupawnTae

14,192
3
29
60

I updated my question, I can see how it was not clear, sorry about that. – Michael Falciglia Dec 04 '13 at 22:58
I think the problem is you're not saying *when* you want the value copied. My solution copies the value on page load. As long as you're using jquery (which you are) and have the code in the right order (the same as your fiddle), this should work for you. I've updated my answer with a jsfiddle to demonstrate. – CupawnTae Dec 05 '13 at 10:06

roberto tomás · Answer 3 · 2013-12-05T01:44:03.040

use val() for input , select and textareas, and use text() for general elements like divs.

First solution

It seems now you are using a timeout of 0. That is not necessary at all, I think. So please check out this Fiddle:

$('#website').on("keyup blur paste", function () {
    var s = $(this).text();
    $("#viewer").text(s.replace(/^http\:\/\//, ''));
});

Edited solution

Now it seems you also want code that update #viewer from #website even when not triggered. Here is a second fiddle — I hope you'll give credit if this solves the problem as it stands currently.

Relevant code:

function viewerupdate(me){
    var s = me.text();
    $("#viewer").text(s.replace(/^http\:\/\//, ''));
}

$('#website').on("keyup blur paste", function () { viewerupdate($(this)) });

var current_viewer = $('#viewer').text();
$('#submit').click(function(){ // assumes in the case that no change was made, that the submission is done through #submit
    if($('#viewer').text() == current_viewer )
        viewerupdate($('#website'));
});

I rewrote the question, I realized it was hard to understand, sorry about that — Michael Falciglia, Dec 04 '13 at 23:28

Jquery - How to copy an input that has a value on load

3 Answers3

First solution

Edited solution