CODEWITHSUNDEEP
javascriptjqueryforms
Stichy
Stichy

Reputation: 1515

Jquery changing css and form data

I'm making a form where the users fill in a title which they can size up or down. I have a preview window that changes when they click on the "size up button". But I want to store this in a hidden form to get the value when posting.

HTML - FORM

<input id="title" name="title" />
<input id="titlesize" name="titlesize" value="50" />
<div id="sizeUp">Size up!</div>

HTML - PREVIEW WINDOW

<h2 id="titlepreview" style="font-size: 50px;">Title</h2>

Javascript

$(document).ready(function() {
$("#sizeUp").click(function() {
        $("#titlepreview").css("font-size","+=5"),
        $("#titlesize").val("+=5");   // <-- Here's the problem
});

Any ideas?

Upvotes: 0

Views: 142

Answers (4)

E Behrangi
E Behrangi

Reputation: 41

you can get variable like this:

$(document).ready(function () {
$("#sizeUp").click(function () {
    $("#titlepreview").css("font-size", "+=5");
    var up=parseInt(($("#titlepreview").css("font-size")),10);
    $("#titlesize").val(up);
 });
});

example:fiddle

Upvotes: 0

notquiteamonad
notquiteamonad

Reputation: 1169

OK, I'm not entirely sure where the problem is here, but here's a way of going about it anyway:

If you want a range of sizes so you can't get a title too big or small, you could (while this is long-winded) make a css class for each size.

Then, you could use JqueryUI's .addClass() and .removeClass. With these you could do something like:
$("#sizeupbutton").click(function(e){
$(#title).removeClass("size45");
$(#title).addClass("size50");
});

Sorry if I've completely got your question wrong, but good luck!

Edit: OK, now i think i understand what you want, I would advise you check out Vucko's answer below.

Upvotes: 0

Pir Abdul
Pir Abdul

Reputation: 2334

You need parseInt to handle strings as numbers.

$("#sizeUp").click(function () {   
 var obj = $("#titlesize");
 var value = parseInt(obj.val());
 obj.val(value + 5);
});

Upvotes: 0

palaѕн
palaѕн

Reputation: 73906

Try this using the .val( function(index, value) ):

$(document).ready(function () {
    $("#sizeUp").click(function () {
        $("#titlepreview").css("font-size", "+=5"),
        $("#titlesize").val(function (index, value) {
            return parseInt(value, 10) + 5;
        });
    });
});

FIDDLE DEMO

Upvotes: 3

Related Questions