Drehen Sie den Ergebnistext auf Senden

Question

Ich versuche, ein Formular zu machen, wo der Benutzer die Option auswählt, wie das Ergebnis beim Senden gedreht werden soll. Was ich will ist, dass bei der Übermittlung der ausgewählte Wert um 90 Grad oder 45 Grad, je nach der ausgewählten Option drehen sollte.

$(document).ready(function(){ 
    $("#btnsubmit").click(function(){ 
    var text = $("#sel1 option:selected").text(); 
    $("#result").text(text); 
    }); 
    $("input[type='radio']").change(function(){ 
    if($(this).val() == 90){ 
     $(this).val().css("transform","rotate(90deg)"); 
    } 
    }); 
}); 

https://codepen.io/index1337/pen/ZKPNyJ

Answer 1

Sie wollen, dass die zu #result Transformation anzuwenden. Ich würde es auch inline-block machen, so dass es sich an Ort und Stelle dreht. Außerdem wurde den Eingängen ein form-Tag hinzugefügt und das Ereignis submit deaktiviert.

$(document).ready(function() { 
 
    $result = $('#result'); 
 
    $("#btnsubmit").click(function() { 
 
    var text = $("#sel1 option:selected").text(); 
 
    $result.text(text); 
 
    }); 
 
    $("input[type='radio']").change(function() { 
 
    if ($(this).val() == 90) { 
 
     $result.css("transform", "rotate(90deg)"); 
 
    } else { 
 
     $result.css("transform", "rotate(45deg)"); 
 
    } 
 
    }); 
 
});

#result { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form onsubmit="return false;"> 
 
    <input type="radio" value="90" name="rotate" class="90deg" />90deg 
 
    <input type="radio" value="45" name="rotate" class="45deg" />45deg 
 
    <select name="selection" id="sel1"> 
 
    <option value="1">90</option> 
 
    <option value="2">45</option> 
 
</select><br> 
 
    <button name="submit" value="submit" id="btnsubmit">Submit</button> 
 
</form> 
 

 
<div id="result"> 
 
</div>

Answer 2

Vielleicht eine bessere Lösung, die für alle Browser funktioniert. Die Drehung erfolgt durch Hinzufügen und Entfernen einer Klasse.

$(document).ready(function(){ 
 
    $("#btnsubmit").click(function(){ 
 
     var text = $("#sel1 option:selected").text(); 
 
     $("#result").text(text); 
 
    }) 
 
    $("input[type='radio']").change(function() { 
 
    if($(this).val() == 90) { 
 
\t $("#result").addClass("rotated90"); 
 
    \t $("#result").removeClass("rotated45"); 
 
    }else{ 
 
    \t $("#result").removeClass("rotated90") 
 
    \t $("#result").addClass("rotated45"); 
 
    } 
 
}); 
 
    
 
});

.rotated90{ 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 

 
.rotated45{ 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 
#result{ 
 
    position:absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<input type="radio" value="90" name="rotate" class="90deg"/>90deg 
 
<input type="radio" value="45" name="rotate" class="45deg"/>45deg 
 
<select name="selection" id="sel1"> 
 
    <option value="1">90</option> 
 
    <option value="2">45</option> 
 
</select><br> 
 
<button name="submit" value="submit" id="btnsubmit">Submit</button> 
 
<div id="result"> 
 
</div>