1

Okay, let me break it down for you. We have a form that when submitted it reloads the page. However, in that form that we're submitting I want to grab a text input value and add THAT value to an element on page load. But this won't work...what am I doing wrong?

$('#btnDoneCampaignFields').bind('click',function(){
    var getValue = $('.field-set-wrap').find('.color-picker-frmfields').val();

    $('.sb-form > input').css('color', getValue);
});
Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
Mike Barwick
  • 6,288
  • 6
  • 51
  • 76
  • 1
    "*But this won't work*": how? What happens? – Blender Mar 08 '13 at 04:05
  • 2
    If you're "reloading the page" (and not doing an async call), you either need to resort to server-side solutions to put it in the request response, or use a cookie and craft code to read your value(s) on page load and put them where you want them... When the page has loaded. – Jared Farrish Mar 08 '13 at 04:07
  • on page load, css color is not binding to the input – Mike Barwick Mar 08 '13 at 04:08
  • Is the code above running before or after the "page is reloaded/submitted"? If it's before... Well. The response to your form submit request obliterates that page if it's a non-async request. You're not giving the information we need, "binding" doesn't tell us much seeing your depiction of what's occurring. – Jared Farrish Mar 08 '13 at 04:10
  • how are you submitting the form? you may need to use Ajax for this to update you element before or after the submit. – Rayshawn Mar 08 '13 at 04:11
  • It's running before. Sorry if I'm not explaining myself well enough here. – Mike Barwick Mar 08 '13 at 04:15
  • @RayEatmon yeah, The form is not ajax and I wanted to see if there was a none server-side route. I thought you could .bind() elements on page load... – Mike Barwick Mar 08 '13 at 04:17
  • `$.bind()` is just a bland way of saying attach in this case. You can look at Knockout.js for some compelling "data binding" features, but event these don't work across complete page reloads without server-client cooperation. – Jared Farrish Mar 08 '13 at 04:19
  • You may want to try .on() instead for delegation it has a similar effect but more helpful in your case. [jquery on function](http://api.jquery.com/on/) – Rayshawn Mar 08 '13 at 04:20
  • 1
    Read a bit on [stateless procotols](http://en.wikipedia.org/wiki/Stateless_protocol) (as HTTP is), and here is a [SO answer explaining what it means](http://stackoverflow.com/questions/4913763/what-does-it-mean-when-they-say-http-is-stateless). Cookies were an early way to bypass "statelessness" by adding textual data to each request that is, literally, constantly sent back and forth. Single page apps (Backbone.js, Knockout.js, Angular.js are some of the frameworks) use newer features like localStorage, sessionStorage, web sockets and asynchronous loading/pushState to make the client "fat". – Jared Farrish Mar 08 '13 at 04:25
  • 1
    If you're interested, [this talk](http://www.youtube.com/watch?v=NEWTPFzt2-E) is also pretty informative on how HTTP is meant to work, and how it's abused (not looking at you, Twitter). – Jared Farrish Mar 08 '13 at 04:35

1 Answers1

4

If you are posting page, i.e. reloading, the page than you need to store that value somewhere to get it back when the request response is received by the browser.

If you are using html5 than you can do this:

$('#btnDoneCampaignFields').bind('click',function()
{
    var getValue = $('.field-set-wrap').find('.color-picker-frmfields').val();

    sessionStorage.Fieldvalue = getValue;
}

Using a document.ready:

$(document).ready(function()
{
    if (sessionStorage.Fieldvalue) {
        $('.sb-form > input').css('color', sessionStorage.Fieldvalue);
    }
});

Check about this in more detail: What is HTML5 Web Storage?

Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
Pranay Rana
  • 175,020
  • 35
  • 237
  • 263