How to recreate an element by giving css property through inputs in javascript or jquery

Question

i had created a layout in which i have a form with multiple inputs and a block element (Div) which has already created. Now i want give value (as in px) in input fields and block should be recreated for e.g if the block has 30px width and 30px height initially now i want to change it through inputs when i submit the form the block should be recreated. i think this is to be done in javascript or jquery. Please help me out of this situation your will will be appericiated. here is code below

This is the Fiddle https://jsfiddle.net/gr0q5ea0/

Html

    <div class="form-container">
        <form action="" id="myForm" name="myForm">
            <div class="recreateBox"></div>
            <div class="form-row">
                <div class="leftSetction">
                    <div class="input-container">
                        <label for="name" class="form-label">Height:</label>
                        <input type="text" class="form-input inputbox" name="height">
                    </div>
                </div>
                <div class="leftSetction">
                    <div class="input-container">
                        <label for="name" class="form-label">Width:</label>
                        <input type="text" class="form-input inputbox" name="width">
                    </div>
                </div>

            </div>
            <div class="form-row">
                <div class="leftSetction">
                    <div class="input-container">
                        <label for="name" class="form-label">Border Width:</label>
                        <input type="text" class="form-input inputbox" name="Borderwidth">
                    </div>
                </div>
                <div class="leftSetction">
                    <div class="input-container">
                        <label for="name" class="form-label">Border Radius:</label>
                        <input type="text" class="form-input inputbox" name="Borderradius">
                    </div>
                </div>

            </div>

            <div class="form-row">
                <div class="input-container">
                    <button type="submit" class="btnSubmit" >Submit</button>
                </div>
            </div>
        </form>
    </div>

css

.form-container{
    position: relative;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    background: rgba(40, 91, 255, 0.24);
    margin: auto auto 35px auto;
    max-width: 50%;
    top: 17px;
}
.input-container{
    width: 100%;
    height:auto;
    padding-bottom: 12px;
}
.form-label{
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 15px;
    display: block;
    color:#000;
}
.form-input{
    display: block;
    width: 50%;
    height: 35px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-row{
    position: relative;
    width: 100%;
    padding: 14px;
    display: inline-block;
    box-sizing: border-box;
}
.btnSubmit{
    padding: 10px 40px;
    position: relative;
    background: #31708f;
    border-radius: 5px;
    outline: none;
    box-shadow: none;
    color: white;
    border:none;

}

.leftSetction ,.rightSection{
    width: 49%;
    padding-top: 12px;
    box-sizing: border-box;
    padding-right: 30px;
    position: relative;
    float: left;
}
.inputbox{
    width: 100%;
}
.recreateBox{
    width:150px;
    height:150px;
    position: relative;
    margin: 0 auto;
    padding: 15px;
    background: #5cb85c;
}

Theodore K. · Accepted Answer · 2017-04-19 10:02:25Z

1

With jQuery you can solve it like this (demo here https://codepen.io/8odoros/pen/rmOyEN)

$('.btnSubmit').click(function(){
  //Get the given values
  var h = $('input[name=height]').val();
  var w = $('input[name=width]').val();
  var bw = $('input[name=Borderwidth]').val();
  var br = $('input[name=Borderradius]').val();

  //Set the values
  $('.recreateBox').css('height',h);
  $('.recreateBox').css('width',w);
  $('.recreateBox').css('border-width',bw);
  $('.recreateBox').css('border-radius',br+'px');//Needs that 'px' to work
});

There's no need to use form submit for this, so I also changed the button type from submit to button

edited Apr 19, 2017 at 10:02

answered Apr 19, 2017 at 9:17

Theodore K.

5,2064 gold badges32 silver badges47 bronze badges

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

1 Comment

Mujtaba Hussain Bhat Over a year ago

@ TheodoreK . i have another question can you please help in that... this is the url stackoverflow.com/questions/43470056/…

Thoby · Accepted Answer · 2017-04-19 10:09:17Z

0

Try using jQuery to solve it. Whenever the form is submitted just give the box a new CSS-attribute:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>

    // Hook onto the form's submittion-event
    $('#myForm').submit( function( event ) {

        // Cancel the original submitting-event
        event.preventDefault();

        // Retrieve the values from the inputfields
        var height = $('#myForm input[name="height"]').val();
        var width = $('#myForm input[name="width"]').val();
        var borderWidth = $('#myForm input[name="Borderwidth"]').val();
        var borderRadius = $('#myForm input[name="Borderradius"]').val();

        // Retrieve field (best practice for jQuery)
        $recreateBox = $('.recreateBox');

        // Set CSS-attributes of the box
        $recreateBox.css('height', height);
        $recreateBox.css('width', width);
        $recreateBox.css('border-width', borderWidth);
        $recreateBox.css('border-radius', borderRadius + 'px');

    });
</script>

Just copy & paste this at the bottom of your file.

Updated JSFiddle: https://jsfiddle.net/gr0q5ea0/5/

Best of luck!

edited Apr 19, 2017 at 10:09

answered Apr 19, 2017 at 9:18

Thoby

3361 silver badge6 bronze badges

5 Comments

Mujtaba Hussain Bhat Over a year ago

can you please update the Fiddle With this code that will be your most kindness

Theodore K. Over a year ago

@Mujtaba Hussain Bhat, you need to add a "px" to the value in order to work.

Mujtaba Hussain Bhat Over a year ago

@ TV why should only for border radius why not others.. i am not getting this... but its works ... Thank u soooooooooooooo much.... i have another question can you please help in that... this this url stackoverflow.com/questions/43470056/…

Thoby Over a year ago

@TheodoreK. Oh thanks! Edited that. jsfiddle.net/gr0q5ea0/5 Totally forgot about it, thank you for pointing it out Theodore.

Mujtaba Hussain Bhat Over a year ago

@ TheodoreK . i have another question can you please help in that... this is the url stackoverflow.com/questions/43470056/…

Pragati · Accepted Answer · 2017-04-19 09:15:54Z

0

Take value for input height and width and use jquery for modifying the width and height of the box.

var height= $("input[name=height]").val();
$(".recreateBox").css("height", height);

answered Apr 19, 2017 at 9:15

Pragati

167 bronze badges

Comments

A.Sri · Accepted Answer · 2017-04-19 09:19:43Z

0

if you know this can be done through jquery what you have tried ?

you can get the value of the input boxes using class selector something like this -

var a = $('.input').val()

and then use that value to set the css od that div -

$(".yourDiv").css({"height": a });

you can do all this on the click event of the button.

answered Apr 19, 2017 at 9:19

A.Sri

3112 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to recreate an element by giving css property through inputs in javascript or jquery

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related