JavaScript Form Examples

Transferring the text entered in the text box to Div, adding the text entered in the text box as an option to the select object, canceling the form submission if the text box is empty, changing the images in the img tag with JavaScript. Transferring the text entered into a text box into a div with JavaScript


var text=document.getElementById("text");
var show=document.getElementById("show");
yazi.onkeyup=function(){
display.innerHTML=text.value;
}

Cancel sending the form if the text box is empty with JavaScript;

var text=document.getElementById("text");
var send=document.getElementById("send");

gonder.onclick=function(e){
if(text.value=='')
{
e.preventDefault();//preventing default operation. We have prevented the submit object from running here.
//return false; //this definition is also correct.
}
}

Adding the text entered in the Text box as an option to the select object with JavaScript;

var text=document.getElementById("text");
var save=document.getElementById("save");
var team=document.getElementById("team");
save.onclick=function(e){
var newOpt=document.createElement("option");
newOpt.value=text.value;
newOpt.innerHTML=font.value;
takim.add(yeniOpt);//A new element has been added to the select object.
}

Changing images in img tag with JavaScript;

var images=["image/r00.jpg","image/r01.jpg","image/r02.jpg","image/r03.jpg","image/r04.jpg"];
var imageNo=document.getElementById("image-no");
var image=document.getElementById("image");
imageNo.onchange=function(e){
image.src=images[imageNo.value];
}

Increasing / Decreasing the Number When Clicking the Button

function increment(){
var result=document.getElementById("result");
result.value=Number(result.value)+1;
}
function reduce(){
var result=document.getElementById("result");
result.value=Number(result.value)-1;
}

Finding the Number of Characters Entered in Textarea Object

var text=document.getElementById("text");
var counter=document.getElementById("counter");
yazi.onkeypress=function(){
if(text.value.length>=160) return false;
}
yazi.onkeyup=function(e){
sayac.value=(160-text.value.length);
}

Calculating the Sum of Selected Fields in the Select Object

var result=document.getElementById("result");
var numbers=document.getElementById("numbers");

numbers.onclick=function(){
 var total=0;
 /* we rotate over all option objects.*/
 for (var i=0, length=this.options.length; i opt = this.options[i];

/*we learn the selected option objects.*/
 if ( opt.selected ) {

/*we perform addition operation on the selected option objects.*/
 total+=Number(opt.value);
 }
 }
 result.innerHTML=total;
}