Jquery changing css and form data

Question

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?

palaѕн · Accepted Answer · 2013-05-28 07:39:39Z

3

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

answered May 28, 2013 at 7:39

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

1 Comment

palaѕн Over a year ago

@HundkartanJonas: Here's a very good resource for parseInt. Have a look :)

Pir Abdul · Accepted Answer · 2013-05-28 07:46:09Z

0

You need parseInt to handle strings as numbers.

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

answered May 28, 2013 at 7:46

Pir Abdul

2,3721 gold badge28 silver badges35 bronze badges

Comments

notquiteamonad · Accepted Answer · 2013-05-28 07:50:55Z

0

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.

edited May 28, 2013 at 7:50

answered May 28, 2013 at 7:45

notquiteamonad

1,1693 gold badges13 silver badges29 bronze badges

Comments

E Behrangi · Accepted Answer · 2013-05-28 08:10:51Z

0

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

edited May 28, 2013 at 8:10

answered May 28, 2013 at 7:40

E Behrangi

411 silver badge9 bronze badges

Collectives™ on Stack Overflow

Jquery changing css and form data

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related