<html>
<body>
<table class="form">
<tr>
<td class="number">
۱
</td>
<td >
۱ خرداد ۲۰:۲۹
</td>
<td class="team1">
کوردوبا </td>
<td>
<ul>
<input type="button" class="home" id="home1" value="میزبان">
<input type="button" class="draw" id="draw1" value="مساوی">
<input type="button" class="away" id="away1" value="میهمان">
</ul>
</td>
<td class="team2">
الچه </td>
</tr>
<tr>
<td class="number">
۲
</td>
<td>
۱ خرداد ۲۰:۲۹
</td>
<td>
گیرونا </td>
<td>
<ul>
<input type="button" class="home" id="home2" value="میزبان">
<input type="button" class="draw" id="draw2" value="مساوی">
<input type="button" class="away" id="away2" value="میهمان">
</ul>
</td>
<td>
مایورکا </td>
</tr>
<tr>
<td class="number">
۳
</td>
<td>
۱ خرداد ۲۰:۲۹
</td>
<td>
تنریفه </td>
<td>
<ul>
<input type="button" class="home" id="home3" value="میزبان">
<input type="button" class="draw" id="draw3" value="مساوی">
<input type="button" class="away" id="away3" value="میهمان">
</ul>
</td>
<td>
وایادولید </td>
</tr>
<tr>
<td class="number">
۴
</td>
<td>
۱ خرداد ۲۰:۲۹
</td>
<td>
آلباسته </td>
<td>
<ul>
<input type="button" class="home" id="home4" value="میزبان">
<input type="button" class="draw" id="draw4" value="مساوی">
<input type="button" class="away" id="away4" value="میهمان">
</ul>
</td>
<td>
آلکارکون </td>
</tr>
<tr>
<td class="number">
۵
</td>
<td>
۱ خرداد ۲۲:۴۵
</td>
<td>
دپرتیو لگانس </td>
<td>
<ul>
<input type="button" class="home" id="home5" value="میزبان">
<input type="button" class="draw" id="draw5" value="مساوی">
<input type="button" class="away" id="away5" value="میهمان">
</ul>
</td>
<td>
هوئسکا </td>
</tr>
<tr>
<td class="number">
۶
</td>
<td>
۱ خرداد ۱۵:۰۰
</td>
<td>
دینامو مسکو روسیه </td>
<td>
<ul>
<input type="button" class="home" id="home6" value="میزبان">
<input type="button" class="home" id="draw6" value="مساوی">
<input type="button" class="away" id="away6" value="میهمان">
</ul>
</td>
<td>
زنیت </td>
</tr>
<tr>
<td class="number">
۷
</td>
<td>
۱ خرداد ۱۵:۰۰
</td>
<td>
لوکوموتیو مسکو </td>
<td>
<ul>
<input type="button" class="home" id="home7" value="میزبان">
<input type="button" class="draw" id="draw7" value="مساوی">
<input type="button" class="away" id="away7" value="میهمان">
</ul>
</td>
<td>
موردویا </td>
</tr>
<tr>
<td class="number">
۸
</td>
<td>
۱ خرداد ۱۵:۰۰
</td>
<td>
دینامو اوفا </td>
<td>
<ul>
<input type="button" class="home" id="home8" value="میزبان">
<input type="button" class="draw" id="draw8" value="مساوی">
<input type="button" class="away" id="away8" value="میهمان">
</ul>
</td>
<td>
اسپارتا مسکو </td>
</tr>
<tr>
<td class="number">
۹
</td>
<td>
۱ خرداد ۱۸:۳۰
</td>
<td>
گلاسکو رنجرز اسکاتلند </td>
<td>
<ul>
<input type="button" class="home" id="home9" value="میزبان">
<input type="button" class="draw" id="draw9" value="مساوی">
<input type="button" class="away" id="away9" value="میهمان">
</ul>
</td>
<td>
هیبرنین </td>
</tr>
<tr>
<td class="number">
۱۰
</td>
<td>
۱ خرداد ۱۸:۳۰
</td>
<td>
ساندسول </td>
<td>
<ul>
<input type="button" class="home" id="home10" value="میزبان">
<input type="button" class="draw" id="draw10" value="مساوی">
<input type="button" class="away" id="away10" value="میهمان">
</ul>
</td>
<td>
اوسترسوندس </td>
</tr>
</table>
<section>
<table ng-app="" class='money'>
<tr>
<td ><input type='text' id="moneyinput" placeholder='مبلغ به دلار'
ng-model="name" value="" ></td>
<td class="math"><img src="multiply.png"></td>
<td class="z">200</td>
<td ng-bind="name*200" class="w"> </td>
<td class="d"> <img src="dollar-coin-stack.png" ></td>
</tr>
</table>
<input type="button" id="sabt" value="ثبت فرم" onclick="notbalance2()">
<input type="button" id="sabt2" value="ثبت نهایی فرم" onclick="showform2()">
<p id="notbalance1"> موجودی کافی نیست افزایش موجودی از بخش <a href="balance-increase.php">افزایش موجودی</a></p>
<p id="notbalance2">فرم با موفقیت ثبت شد</p>
<p id="notbalance3">حداقل مبلغ شرط بندی 1دلار</p>
<p id="eror">همه ی بازی ها پیش بینی شود</p>
</section>
</body>
</html>
jQuery’s code:
(document).ready(function(){$('#home1').focusin(function(){x=document.getElementById('home1').value; document.getElementById('yselect1').value=x; })})
$(document).ready(function(){$('#draw1').focusin(function(){x=document.getElementById('draw1').value; document.getElementById('yselect1').value=x; })})
$(document).ready(function(){$('#away1').focusin(function(){x=document.getElementById('away1').value; document.getElementById('yselect1').value=x; })})
$(document).ready(function(){$('#home2').focusin(function(){x=document.getElementById('home2').value; document.getElementById('yselect2').value=x; })})
$(document).ready(function(){$('#draw2').focusin(function(){x=document.getElementById('draw2').value; document.getElementById('yselect2').value=x; })})
$(document).ready(function(){$('#away2').focusin(function(){x=document.getElementById('away2').value; document.getElementById('yselect2').value=x; })})
$(document).ready(function(){$('#home3').focusin(function(){x=document.getElementById('home3').value; document.getElementById('yselect3').value=x; })})
$(document).ready(function(){$('#draw3').focusin(function(){x=document.getElementById('draw3').value; document.getElementById('yselect3').value=x; })})
$(document).ready(function(){$('#away3').focusin(function(){x=document.getElementById('away3').value; document.getElementById('yselect3').value=x; })})
$(document).ready(function(){$('#home4').focusin(function(){x=document.getElementById('home4').value; document.getElementById('yselect4').value=x; })})
$(document).ready(function(){$('#draw4').focusin(function(){x=document.getElementById('draw4').value; document.getElementById('yselect4').value=x; })})
$(document).ready(function(){$('#away4').focusin(function(){x=document.getElementById('away4').value; document.getElementById('yselect4').value=x; })})
$(document).ready(function(){$('#home5').focusin(function(){x=document.getElementById('home5').value; document.getElementById('yselect5').value=x; })})
$(document).ready(function(){$('#draw5').focusin(function(){x=document.getElementById('draw5').value; document.getElementById('yselect5').value=x; })})
$(document).ready(function(){$('#away5').focusin(function(){x=document.getElementById('away5').value; document.getElementById('yselect5').value=x; })})
$(document).ready(function(){$('#home6').focusin(function(){x=document.getElementById('home6').value; document.getElementById('yselect6').value=x; })})
$(document).ready(function(){$('#draw6').focusin(function(){x=document.getElementById('draw6').value; document.getElementById('yselect6').value=x; })})
$(document).ready(function(){$('#away6').focusin(function(){x=document.getElementById('away6').value; document.getElementById('yselect6').value=x; })})
$(document).ready(function(){$('#home7').focusin(function(){x=document.getElementById('home7').value; document.getElementById('yselect7').value=x; })})
$(document).ready(function(){$('#draw7').focusin(function(){x=document.getElementById('draw7').value; document.getElementById('yselect7').value=x; })})
$(document).ready(function(){$('#away7').focusin(function(){x=document.getElementById('away7').value; document.getElementById('yselect7').value=x; })})
$(document).ready(function(){$('#home8').focusin(function(){x=document.getElementById('home8').value; document.getElementById('yselect8').value=x; })})
$(document).ready(function(){$('#draw8').focusin(function(){x=document.getElementById('draw8').value; document.getElementById('yselect8').value=x; })})
$(document).ready(function(){$('#away8').focusin(function(){x=document.getElementById('away8').value; document.getElementById('yselect8').value=x; })})
$(document).ready(function(){$('#home9').focusin(function(){x=document.getElementById('home9').value; document.getElementById('yselect9').value=x; })})
$(document).ready(function(){$('#draw9').focusin(function(){x=document.getElementById('draw9').value; document.getElementById('yselect9').value=x; })})
$(document).ready(function(){$('#away9').focusin(function(){x=document.getElementById('away9').value; document.getElementById('yselect9').value=x; })})
$(document).ready(function(){$('#home10').focusin(function(){x=document.getElementById('home10').value; document.getElementById('yselect10').value=x; })})
$(document).ready(function(){$('#draw10').focusin(function(){x=document.getElementById('draw10').value; document.getElementById('yselect10').value=x; })})
$(document).ready(function(){$('#away10').focusin(function(){x=document.getElementById('away10').value; document.getElementById('yselect10').value=x; })})
;
$(document).ready(function(){$('#home1').click(function(){$(this).css({background:'black',color:'white'}),$('#draw1'). css({background:'white',color:'black'}), $('#away1'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#draw1').click(function(){$(this).css({background:'black',color:'white'}),$('#home1'). css({background:'white',color:'black'}), $('#away1'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#away1').click(function(){$(this).css({background:'black',color:'white'}),$('#home1'). css({background:'white',color:'black'}), $('#draw1'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#home2').click(function(){$(this).css({background:'black',color:'white'}),$('#draw2'). css({background:'white',color:'black'}), $('#away2'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#draw2').click(function(){$(this).css({background:'black',color:'white'}),$('#home2'). css({background:'white',color:'black'}), $('#away2'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#away2').click(function(){$(this).css({background:'black',color:'white'}),$('#home2'). css({background:'white',color:'black'}), $('#draw2'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#home3').click(function(){$(this).css({background:'black',color:'white'}),$('#draw3'). css({background:'white',color:'black'}), $('#away3'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#draw3').click(function(){$(this).css({background:'black',color:'white'}),$('#home3'). css({background:'white',color:'black'}), $('#away3'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#away3').click(function(){$(this).css({background:'black',color:'white'}),$('#home3'). css({background:'white',color:'black'}), $('#draw3'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#home4').click(function(){$(this).css({background:'black',color:'white'}),$('#draw4'). css({background:'white',color:'black'}), $('#away4'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#draw4').click(function(){$(this).css({background:'black',color:'white'}),$('#home4'). css({background:'white',color:'black'}), $('#away4'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#away4').click(function(){$(this).css({background:'black',color:'white'}),$('#home4'). css({background:'white',color:'black'}), $('#draw4'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#home5').click(function(){$(this).css({background:'black',color:'white'}),$('#draw5'). css({background:'white',color:'black'}), $('#away5'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#draw5').click(function(){$(this).css({background:'black',color:'white'}),$('#home5'). css({background:'white',color:'black'}), $('#away5'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#away5').click(function(){$(this).css({background:'black',color:'white'}),$('#home5'). css({background:'white',color:'black'}), $('#draw5'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#home6').click(function(){$(this).css({background:'black',color:'white'}),$('#draw6'). css({background:'white',color:'black'}), $('#away6'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#draw6').click(function(){$(this).css({background:'black',color:'white'}),$('#home6'). css({background:'white',color:'black'}), $('#away6'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#away6').click(function(){$(this).css({background:'black',color:'white'}),$('#home6'). css({background:'white',color:'black'}), $('#draw6'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#home7').click(function(){$(this).css({background:'black',color:'white'}),$('#draw7'). css({background:'white',color:'black'}), $('#away7'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#draw7').click(function(){$(this).css({background:'black',color:'white'}),$('#home7'). css({background:'white',color:'black'}), $('#away7'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#away7').click(function(){$(this).css({background:'black',color:'white'}),$('#home7'). css({background:'white',color:'black'}), $('#draw7'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#home8').click(function(){$(this).css({background:'black',color:'white'}),$('#draw8'). css({background:'white',color:'black'}), $('#away8'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#draw8').click(function(){$(this).css({background:'black',color:'white'}),$('#home8'). css({background:'white',color:'black'}), $('#away8'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#away8').click(function(){$(this).css({background:'black',color:'white'}),$('#home8'). css({background:'white',color:'black'}), $('#draw8'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#home9').click(function(){$(this).css({background:'black',color:'white'}),$('#draw9'). css({background:'white',color:'black'}), $('#away9'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#draw9').click(function(){$(this).css({background:'black',color:'white'}),$('#home9'). css({background:'white',color:'black'}), $('#away9'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#away9').click(function(){$(this).css({background:'black',color:'white'}),$('#home9'). css({background:'white',color:'black'}), $('#draw9'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#home10').click(function(){$(this).css({background:'black',color:'white'}),$('#draw10'). css({background:'white',color:'black'}), $('#away10'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#draw10').click(function(){$(this).css({background:'black',color:'white'}),$('#home10'). css({background:'white',color:'black'}), $('#away10'). css({background:'white',color:'black'}) })});
$(document).ready(function(){$('#away10').click(function(){$(this).css({background:'black',color:'white'}),$('#home10'). css({background:'white',color:'black'}), $('#draw10'). css({background:'white',color:'black'}) })});
function notbalance2(){
x=document.getElementById('moneyinput').value;
y=document.getElementById('dollar').value;
z=document.getElementById('yselect1').value;
if(x > y){$('#notbalance1').show();$('#notbalance2').hide();$('#notbalance3').hide()}
else if(x==0){$('#notbalance3').show();$('#notbalance1').hide();}
else{$('#notbalance1').hide(); $('#sabt2').show();$('#notbalance3').hide();$('.money , #sabt').hide();}
};
function showform2(){
p=document.getElementById('moneyinput').value;
o=document.getElementById('dollar').value;
ys1=document.getElementById('yselect1').value;
ys2=document.getElementById('yselect2').value;
ys3=document.getElementById('yselect3').value;
ys4=document.getElementById('yselect4').value;
ys5=document.getElementById('yselect5').value;
ys6=document.getElementById('yselect6').value;
ys7=document.getElementById('yselect7').value;
ys8=document.getElementById('yselect8').value;
ys9=document.getElementById('yselect9').value;
ys10=document.getElementById('yselect10').value;
mn=document.getElementById('moneyinput').value;
if(ys1==0||ys2==0||ys1==0||ys3==0||ys4==0||ys5==0||ys6==0||ys7==0||ys8==0||ys9==0||ys10==0){
$('#eror').show();
}
else{$('#eror').hide(); $('#notbalance2').show();document.getElementById('jayze').value=(mn*200) + ""+ 'دلار';$('#showform2').show(); document.getElementById('dollar').value=o-p ;document.getElementById('pish').value=12;}
}
css code
.form{
position: relative;
right: 73px;
border: rgb(100,100,100) solid 1px;
border-collapse: collapse;
border-radius: 10px;
font-family:"B Yekan+";
border-radius: 5px;
}
.form td{
background: white;
color: rgb(100,100,100);
text-align: center;
padding: 10px;
border: rgb(100,100,100) solid 1px;
}
.form ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.form input{
display: inline-block;
padding: 12px 22px;
background: white;
color: rgb(100,100,100);
border-radius: 5px;
border: rgb(100,100,100) solid 1px;
cursor: pointer;
outline: none;
font-family:"B Yekan+";
width: 110px
}
.number{
background: black !important;
color:rgb(200,200,200) !important;
}
.home:hover,.draw:hover,.away:hover{
background: rgb(80,80,80);
color: aliceblue;
background: rgb(80,80,80);
}
.form200{
position: relative;
width: 702px;
text-align: center;
background: rgb(30,30,30);
color: aliceblue;
padding: 20px;
font-family:"B Yekan+";
margin-top: 0;
margin-bottom: 5px;
right: 71px;
border-radius: 8px;
}
#clock{
position: relative;
width: 694px;
text-align: center;
background: white;
color: dimgray;
padding: 10px 20px 10px 20px ;
font-family:"B Yekan+" ;
border: solid 1px rgb(30,30,30);
margin-bottom: 3px;
margin-top: 0;
position: relative;
right: 75px;
border-radius: 5px;
}
#clock p{
padding: 0;
margin: 0;
}
.money{
width: 734px;
height: 100px;
background:white;
position: relative;
right: 74px;
direction: ltr;
border: solid 1px rgb(30,30,30);
text-align: center;
font-family:"B Yekan+";
border-radius: 5px;
margin-top: 3px;
}
#moneyinput{
border: solid 1px rgb(80,80,80);
outline: none;
width: 75px;
height: 75px;
text-align: center;
color: dimgray;
font-size: 17px;
font-weight: 400;
border-radius: 5px;
font-family:"B Yekan+"
}
.z{
color: dimgray;
font-size: 20px;
font-weight: 500
}
.w{
width: 50px;
height: 50px;
color: dimgray;
font-size: 20px;
font-weight: 500;
}
.money td{
width: 50px;
padding: 0;
margin: 0;
}
.money tr{
padding: 0;
}
.d{
width: 10px !important;
padding: 0;
}
#sabt{
width: 736px;
height: 50px;
background:rgb(30,30,30);
border: none;
outline: none;
position: relative;
right: 40px;
color: aliceblue;
font-size: 18px;
font-weight: 500;
cursor: pointer;
font-family:"B Yekan+";
margin-top: 3px;
border-radius: 5px;
}
#sabt2{
width: 736px;
height: 50px;
background:rgb(30,30,30);
border: none;
outline: none;
position: relative;
right: 40px;
top: 30px;
color: aliceblue;
font-size: 18px;
font-weight: 500;
cursor: pointer;
font-family:"B Yekan+";
display: none;
}
#sabt:hover{
background: black;
}
#myform{
background: rgb(20,20,20);
color: aliceblue;
padding-top:10px;
padding-bottom:15px;
width:148px;
font-family:"B Yekan+";
position: absolute;
top: 300px;
right: 9px;
text-align: center;
border: solid 1px rgb(20,20,20);
-webkit-transition:0.3s;
border-radius: 5px;
cursor: pointer;
}
#myform:hover{
background: white;
border: solid 1px rgb(20,20,20);
color: rgb(20,20,20);
}
#notbalance1{
background: rgb(20,20,20);
color: aliceblue;
width: 340px;
padding: 20px;
position: relative;
right: 200px;
font-family:"B Yekan+";
display: none;
}
#notbalance a{
color: aliceblue;
margin-bottom: 0;
}
#notbalance2{
border: solid 3px rgb(0,40,0);
color: white;
width: 690px;
padding: 20px;
position: relative;
right: 75px;
font-family:"B Yekan+";
display: none;
background:rgb(0,40,0);
top: 20px;
}
#notbalance3{
border: solid 3px rgb(100,0,0);
color: white;
width: 690px;
padding: 20px;
position: relative;
right: 75px;
font-family:"B Yekan+";
display: none;
background: rgb(100,0,0);
}
#eror{
border: solid 3px rgb(100,0,0);
color: white;
width: 690px;
padding: 20px;
position: relative;
right: 75px;
font-family:"B Yekan+";
display: none;
background: rgb(100,0,0);
top: 20px;
}
#dollar{
background: white;
border: none;
outline: none;
}
#hnumberform{
background: white;
}
#showform2{
border-collapse: collapse;
width: 900px;
text-align: center;
font-family:"B Yekan+";
display: none;
position: relative;
right: 100px;
background: white;
top: 30px;
}
.yselect{
background: none;
color: rgb(30,30,30);
border: none;
outline: none;
font-family:"B Yekan+";
}
#showform2 td{
border: solid 1px rgb(30,30,30);
}
#hshowform2 {
background: rgb(30,30,30);
color: white;
}
#numbersf2{
background: rgb(30,30,30);
color: white;
}
#jayze{
background: rgb(30,30,30);
color: white;
border: none;
outline: none;
font-family:"B Yekan+";
}
.bimg {
background-image: url(pexels-photo-102448.jpeg);
margin: 0;
}