HTML5 Sample scripts for Enabling/Disabling Fields,Defaulting field,Opening URL based on condition
Sample Code snippet for Defaulting the textbox values
<!DOCTYPE html>
<html>
<title>
</title>
<h1>Defaulting the text box by pranay tiwari</h1>
<body>
<form>
<div>
<label for="firstbox">First Box</label>
<input type="textbox" id="firstbox" name="firstbox"></input>
</div>
<div>
<label for="firstbox">Second Box</label>
<input type="textbox" id="secondbox" name="secondbox"></input>
</div>
</form>
<script>
let val;
document.getElementById("firstbox").oninput=function(){
val=this.value;
document.getElementById("secondbox").value=val;
document.getElementById("secondbox").disabled=true;
}
</script>
</body>
</html>
Improving above code for reusability
<!DOCTYPE html>
<html>
<title></title>
<!--Internal CSS To declare box out line-->
<style>
.box,.box2{
width:300px;
height:300px;
border:solid 2px red;
}
.box2{
margin-top: 5px;
}
</style>
<!--declaration ends-->
<h1></h1>
<body>
<!--delcaring box1 class-->
<div class="box" >
<!-- image to be dragged-->
<img src="https://i.picsum.photos/id/1025/200/200.jpg" id="imagedragitem"> </div>
<div class="box2" id="targetbox"></div>
<!--box2 declared to received dragged image from box1-->
</form>
<script>
document.getElementById("imagedragitem").ondragstart=ondragstartevt;
document.getElementById("targetbox").ondrop=ondropevt;
document.getElementById("targetbox").ondragenter=ondragenterevt;
document.getElementById("targetbox").ondragover=ondrageoverevet;
function ondragstartevt(e){
console.log(e);
console.log("calling on drop");
let data='<img src="https://i.picsum.photos/id/1025/200/200.jpg" id="imagedragitem">';
e.dataTransfer.setData("text",data);
}
<!--ondrop event is --> dragged item (element or text selection) is dragged.t-->
function ondropevt(e){
console.log(e);
let fetchedData=e.dataTransfer.getData("text");
console.log(fetchedData);
this.innerHTML=fetchedData;
}
<!--ondragenter event is --> a dragged item enters a valid drop target-->
function ondragenterevt(e){
console.log("calling on drage enter");
let fetchedData=e.dataTransfer.getData("text");
console.log(fetchedData);
e.preventDefault();
document.querySelector(".box").innerHTML="";
}
<!--ondragover event is --> a dragged item is being dragged over a valid drop target, every few hundred milliseconds.-->
function ondrageoverevet(e){
console.log("dragover");
e.preventDefault();
}
</script>
</body>
</html>
Output of above code
__________________________________________________________________________________
________
<!DOCTYPE html>
<html>
<title>
</title>
<h1>Defaulting the text box by pranay tiwari</h1>
<body>
<form>
<div>
<label for="firstbox">First Box</label>
<input type="textbox" id="firstbox" name="firstbox"></input>
</div>
<div>
<label for="firstbox">Second Box</label>
<input type="textbox" id="secondbox" name="secondbox"></input>
</div>
</form>
<script>
let val;
document.getElementById("firstbox").oninput=function(){
val=this.value;
document.getElementById("secondbox").value=val;
document.getElementById("secondbox").disabled=true;
}
</script>
</body>
</html>
Improving above code for reusability
<!DOCTYPE html>
<html>
<title></title>
<!--Internal CSS To declare box out line-->
<style>
.box,.box2{
width:300px;
height:300px;
border:solid 2px red;
}
.box2{
margin-top: 5px;
}
</style>
<!--declaration ends-->
<h1></h1>
<body>
<!--delcaring box1 class-->
<div class="box" >
<!-- image to be dragged-->
<img src="https://i.picsum.photos/id/1025/200/200.jpg" id="imagedragitem"> </div>
<div class="box2" id="targetbox"></div>
<!--box2 declared to received dragged image from box1-->
</form>
<script>
document.getElementById("imagedragitem").ondragstart=ondragstartevt;
document.getElementById("targetbox").ondrop=ondropevt;
document.getElementById("targetbox").ondragenter=ondragenterevt;
document.getElementById("targetbox").ondragover=ondrageoverevet;
function ondragstartevt(e){
console.log(e);
console.log("calling on drop");
let data='<img src="https://i.picsum.photos/id/1025/200/200.jpg" id="imagedragitem">';
e.dataTransfer.setData("text",data);
}
<!--ondrop event is --> dragged item (element or text selection) is dragged.t-->
function ondropevt(e){
console.log(e);
let fetchedData=e.dataTransfer.getData("text");
console.log(fetchedData);
this.innerHTML=fetchedData;
}
<!--ondragenter event is --> a dragged item enters a valid drop target-->
function ondragenterevt(e){
console.log("calling on drage enter");
let fetchedData=e.dataTransfer.getData("text");
console.log(fetchedData);
e.preventDefault();
document.querySelector(".box").innerHTML="";
}
<!--ondragover event is --> a dragged item is being dragged over a valid drop target, every few hundred milliseconds.-->
function ondrageoverevet(e){
console.log("dragover");
e.preventDefault();
}
</script>
</body>
</html>
Output of above code
__________________________________________________________________________________
________
Comments
Post a Comment