Using form value to change CSS with jquery

Question

Once a form is submitted, I'd like to get the value of a field called 'featuredOneImage', and apply that the CSS background of a div.

So once the 'Save' button is pressed, here's the jQuery to submit the ajax needed (which saves the values to a db)

$("form#featuredItems").submit(function() {

    // we want to store the values from the form input box, then send via ajax below
    var $form = $(this);        
    $.ajax({
            type: "POST",
            url: "ajax/featuredItems.php",
            data: $form.serialize(),
            success: function(){
                showAction('Featured Items Saved');
                }
        }); // End .ajax function
    return false;
    }); //End submit function()

So, inside the success function, I'd put something like "get value of 'featuredOneImage' and set the background equal to that value for the div with id 'featuredOneBox'"

I just wasn't sure how to tell the jQuery which field to get the value from.

Anriëtte Myburgh · Accepted Answer · 2011-02-14 07:30:42Z

2

I just edited Shaz's function to the following, I used the jQuery val() function instead:

success: function(){
   showAction('Featured Items Saved');
   $("#featuredOneBox").css("background-image", "url('" + ($('#featuredOneImage').val()) + "')");
}

answered Feb 14, 2011 at 7:30

Anriëtte Myburgh

13.5k11 gold badges54 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anriëtte Myburgh Over a year ago

@Shaz: Sorry for copying your function.

Shaz Over a year ago

ëtte That's fine, it's what I get for trying to build an example and not putting more haste into it, haha. ;)

Shaz · Accepted Answer · 2011-02-14 07:40:15Z

2

Could try:

    success: function(){
          showAction('Featured Items Saved');
          $("#featuredOneBox").css("background-image", "url('" + $('#featuredOneImage').val() + "')");
        }

example

edited Feb 14, 2011 at 7:40

answered Feb 14, 2011 at 6:55

Shaz

15.9k4 gold badges44 silver badges60 bronze badges

4 Comments

Andelas Over a year ago

It's not working. I'm wondering if this code should be different if it's getting the value from a <select> field? So, whatever dropdown value is selected, is the name we're using for the background.

Shaz Over a year ago

Just to make sure, are you using the same code as above? I edited the thing a few times. ;)

Anriëtte Myburgh Over a year ago

You're shorting an ending bracket on the css() function, that's why the code is not working.

Andelas Over a year ago

Thank you. I used your code and Anriette's above to get the values. Working now! Appreciate the help.

Collectives™ on Stack Overflow

Using form value to change CSS with jquery

2 Answers 2

2 Comments

example

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related