2017-04-19 34 views
0

我創建了一個佈局,其中我有一個具有多個輸入的表單和一個已經創建的塊元素(Div)。現在我想在輸入字段中給出值(如在px中),並且應該重新創建塊,例如,如果塊最初具有30px寬度和30px高度,現在我想通過輸入更改它,當我提交表單時應該重新創建塊。我認爲這是在JavaScript或jQuery中完成的。請幫助我擺脫這種情況,你的意志會變得渺茫。這裏低於如何重新創建一個元素,通過在javascript或jquery中輸入css屬性

此代碼的小提琴https://jsfiddle.net/gr0q5ea0/

的Html

輸入的高度和寬度和使用的jquery
<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; 
} 

回答

0

嘗試使用jQuery來解決它。每當提交表單只是給文本框中輸入新的CSS屬性:

<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> 

只要複製粘貼&這在你的文件的底部。

更新的jsfiddle:https://jsfiddle.net/gr0q5ea0/5/

祝您好運!

+0

你能請更新小提琴與這個代碼將會是你最仁慈的 –

+0

https://jsfiddle.net/gr0q5ea0/4/你去! – Thoby

+0

@電視我認爲邊界半徑不起作用 –

0

採取值用於修改的寬度和高度盒子。

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

使用jQuery你可以解決它像這樣(演示這裏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 
}); 

有沒有必要使用的形式提交了這一點,所以我也改變了按鈕式的submitbutton

+0

@ TheodoreK。我有另一個問題,你可以請幫助在這...這是網址http://stackoverflow.com/questions/43470056/validation-for-inputs-in-jquery-using-regex –

0

如果你知道這可以通過jQuery完成你已經嘗試過嗎?

您可以使用類選擇像這樣得到的輸入框中的值 -

風險價值= $(「輸入」)VAL()

,然後使用該值來設置css od that div -

$(「。yourDiv」).css({「height」:a});

您可以在按鈕的單擊事件上執行所有操作。

相關問題