Disable or enable a button

[SerbanSpire]

Here is what i found while googling:

Code: Select all

<script language="Javascript" type="text/javascript">
 function enable(){  
  if (document.ships_form.fighter.checked==' '){
   document.ships_form.frigate.disabled=true
  }else{
   document.ships_form.frigate.disabled=false
  }  
 }
</script>  

 <form name="ships_form">
 <input type="button" name="fighter" value="Fighter" onchange="enable()">
 <br>  
 <input type="submit" value="Frigate" disabled name="frigate">

The code above should enable the button Frigate after Fighter was pressed. But the example i found was with a check box not a button. What should be in the if statement instead of .checked? I am pretty sure that's the problem. Thanks in advance

[Xaleph]

The thing is, the button has no state. How can I explain; like a radio or checkbox, you can see wether it`s clicked or active, that`s not the case with a button. So you`ll have to think of a different way to do this ( use a button and, in secret, activate a checkbox which is not shown )

[Jackolantern]

Your script is also loading before the DOM. If your JS script is written above the HTML (which makes up the Document Object Model or DOM), it will run before the DOM is created. The simplest fix is to put the script block below all of your HTML. However, if you are like me, you want all of your in-page JS at the top of the page to keep it uniform between pages, you can simply use an event to fire when the page is loaded:

Code: Select all

function yourFunctionName() {
    //all of your JS code goes here
}

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            yourFunctionName();
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

This will basically work in all browsers, and will play well if a framework or library is also using onLoad. I got this code from StackOverflow, as it was better than mine since it also considered other onLoad payloads from other code.

[SerbanSpire]

I feel somewhat stupid

The frigate button doesn't need to have onchange = "enable()" pfff. The correct instruction is onclick = "enable()"
And the if statement should look like this if (document.ships_form.fighter.disabled==false) . I think it's correct this way.

the final code will look like this...and it works too.

Code: Select all

<form name="ships_form">
 <input type="button" name="fighter" value="Fighter" onclick="enable_frigate()">
 <input type="button" name="bomber" value="Bomber" onclick="enable_frigate()">
 <br>
 <input type="submit" value="Frigate" disabled name="frigate">
 </form>
<script language="Javascript" type="text/javascript">
 function enable_frigate(){
  if (document.ships_form.fighter.disabled==false || document.ships_form.bomber.disabled==false){
   document.ships_form.frigate.disabled=false
  }else{
   document.ships_form.frigate.disabled=true
  }
 }
</script>

What i actually did here i included another bomber button and whether i click bomber or fighter it will enable frigate button.
Works like a charm. The next problem i encounter is when i include a forth button. Yeap i will have a lot of buttons in my research tree. I am just trying to build a research tree before i dive into timing events and whatnot.

Here is the code with the 4th button involved.

Code: Select all

<form name="ships_form">
 <input type="button" name="fighter" value="Fighter" onclick="enable_frigate()">
 <input type="button" name="bomber" value="Bomber" onclick="enable_frigate()">
 <br>
 <input type="submit" value="Frigate" disabled name="frigate" onclick="enable_destroyer()">
 </form>
 <form name "destroyer_form">
 <br>
 <input type="submit" value="Destroyer" disabled name="destroyer">
 </form>
 

<script language="Javascript" type="text/javascript">
 function enable_frigate(){
  if (document.ships_form.fighter.disabled==false || document.ships_form.bomber.disabled==false){
   document.ships_form.frigate.disabled=false
  }else{
   document.ships_form.frigate.disabled=true
  }
 }

  function enable_destroyer(){
  if (document.destroyer_form.frigate.disabled == false) {
   document.destroyer_form.destroyer.disabled=false
  }
   else
   {
     document.destroyer_form.destroyer.disabled = true
   }
  }

</script>

So when i press either fighter or bomber it will enable the frigate button. and when i press the frigate button it should enable the destroyer button. But what the code does is: when i press either fighter or bomber button it will enable frigate...perfect...when i press frigate it doesn't enable destroyer button and it disables frigate button. In other words the page refreshes to it's original state. Why?

PS i decided to write the javascript code at the end as i didn't understand your special event entirely and i want my buttons to be at my hand easily. Besides it's the first time i use javascript in my game and i hope i will only use it again when i do timing events

[Jackolantern]

Putting the JS at the bottom is a perfectly good solution to the "DOM before JS" issue. I am just kind of picky about it personally and for whatever reason I like all JS at the top lol. Glad you got it all worked out

[Winawer]

So when i press either fighter or bomber it will enable the frigate button. and when i press the frigate button it should enable the destroyer button. But what the code does is: when i press either fighter or bomber button it will enable frigate...perfect...when i press frigate it doesn't enable destroyer button and it disables frigate button. In other words the page refreshes to it's original state. Why?

You're submitting the form when you click on the frigate button so the page gets refreshed. Fighter and bomber are not submit buttons so there is no refresh.

[SerbanSpire]

OMG how couldn't i see that? Thanks it all works now. The thing is i never used button only submit button. But when i saw button i could have just experiment with it. Oh well, it works now and does what i want . And btw Jack is funny how sometimes i get to answer my own post ).

[SerbanSpire]

After i put everything in my head in order, i will try now to do everything above, Ajax style . Just for the sake of exercise.
So what i am thinking and i hope is correct is to make the ajaxRequest.responseText to enable a button. My questions are. Is this thinking correct? What should i write in if(ajaxRequest.readyState == 4){... } in such a fashion that this if enables my button?

[SerbanSpire]

Don't bother guys. The entire code doesn't work. I tried and i fail. So let's try to solve the important part first. I tried to follow hallsofvallhala's specifications on how to build your code with ajax and this is what i got. The problem is that is doesn't insert anything into my table.

Please take your time and read the entire scripts carefully to help me spot the mistake.
In military_research.php

Code: Select all

<link href = "MainScreenStyle.css" rel="stylesheet" type="text/css" />

<?php

include 'Research.php';

print"<td><div id='Military_tree_div'>";
print"<form name='ships_form'>";
 include 'militaryres_buttons.php';
print"</form>";
print"</div>";

 ?>

In militaryres_buttons.php

Code: Select all

<?php


 echo "<form method='post' action='javascript:researched(33)'><input type='submit' name='fighter' value='Fighter'></form><br>";
//other buttons doesn't matter only fighter for now.
 echo "<form method='post' action='javascript:researched(34)'><input type='button' name='bomber' value='Bomber'></form><br>";
 print"<input type='button' value='Frigate' disabled name='frigate' onclick='enable_destroyer()'><br>";
 print"<input type='button' value='Destroyer' disabled name='destroyer' onclick='enable_cruiser()'><br>";
 print"<input type='button' value='Cruiser' disabled name='cruiser' onclick='enable_dreadnought()'><br>";
 print"<input type='button' value='Dreadnought' disabled name='dreadnought' onclick='enable_carrier()'><br>";
 print"<input type='button' value='Carrier' disabled name='carrier' onclick='enable_fighter_bomber()'><br>";
 print"<input type='button' value='Heavy fighter' disabled name='h_fighter' onclick='enable_super_carrier()'>";
 print"<input type='button' value='Heavy bomber' disabled name='h_bomber' onclick='enable_super_carrier()'><br>";
 print"<input type='button' value='Super carrier' disabled name='super_carrier'>";


?>

In function.js

Code: Select all

function researched(res_id)
		{

		//alert(playertag);
		var ajaxRequest;  // The variable that makes Ajax possible!

	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
//idk what to write in here. Main idea is that this if should enable the next button, frigate (bomber is already enabled)
		}}

		var queryString = "?res_id=" + res_id;
		//alert(queryString);

	ajaxRequest.open("GET", "research_index.php" + queryString, true);
		ajaxRequest.send(null);



		}

And in research_index.php

Code: Select all

<link href = "MainScreenStyle.css" rel="stylesheet" type="text/css" />

<?php
  include_once 'connect.php';
  
  if (isset($_SESSION['player']))
{
 $player=$_SESSION['player'];
 $playerinfo = "SELECT * from players where name='$player'";
$playerinfo2 = mysql_query($playerinfo) or die ("Could not get player stats!");
$playerinfo3 = mysql_fetch_array($playerinfo2);
}
else
{
 echo "Not logged in <br><br> <a href='login.php'> Login </a>";
 exit;
}

  $player_id=$playerinfo3['id'];
  $res_id=$_GET['res_id'];



  $res_info= "SELECT * from researches WHERE Research_id = $res_id";
  $res_info2= mysql_query($res_info) or die("Could not select research");
  $res_info3= mysql_fetch_array($res_info2);

  if($res_id == 33)//in the table of all available technologies (Researches) the fighter has the id = 33. So if the id is 33 it should insert into the researched table the fighter technology
  {
   $researched_table = "INSERT INTO researched(Player_id,Name) VALUES ('$player_id','$res_info3[Name]')"; //  it doesn't insert anything into the researched table
   mysql_query($researched_table) or die("Could not insert research");;
  }
?>

Now, if i was hallsofvallhala i would insert this code

Code: Select all

  if (isset($_SESSION['player']))
{
 $player=$_SESSION['player'];
 $playerinfo = "SELECT * from players where name='$player'";
$playerinfo2 = mysql_query($playerinfo) or die ("Could not get player stats!");
$playerinfo3 = mysql_fetch_array($playerinfo2);
}
else
{
 echo "Not logged in <br><br> <a href='login.php'> Login </a>";
 exit;
}

  $player_id=$playerinfo3['id'];

into military_research.php, the first php script , but i don't understand how will the ajax function get the player_id to insert it into queryString together with res_id. In his tutorial ajax/javascript tutorial pid for me comes from nowhere )

Code: Select all

function traveled(direction)
		{
		
		//alert(playertag);
		var ajaxRequest;  // The variable that makes Ajax possible!
		
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			//var test = ajaxRequest.responseText;
			//document.getElementById('title').innerHTML=ajaxRequest.responseText;
			//window.location.href = "test.php";
			//alert(ajaxRequest.responseText);
			playertag = ajaxRequest.responseText;
		}}
		var newplayertag = playertag.split("v");
		var queryString = "?pid=" + pid + "&direction=" + direction + "&playertag=" + newplayertag[1];
		//alert(queryString); 
	ajaxRequest.open("GET", "travelmap.php" + queryString, true);
		ajaxRequest.send(null); 
		
		setTimeout("travel();", 500);
		
		}

Please take your time and read the entire scripts carefully to help me spot the mistake. This portion of coding kept me from going on for days!!!

[hallsofvallhalla]

are you getting any type of error in chrome error console? F12 then console then click errors.

What happens if you navigate tp

travelmap.php?pid=3&direction=1&playertag=1;

or whatever should go there..does it then put it in?