[SOLVED] Simple Javascript check won't work. I am sure it is easy fix please help

[Jason28]

Hello, I am new to javascript and tried modifying an existing script but it doesn't work.  It is used to see if one option on a form is selected, and the other form field is empty, it will error.  Here is what I modified:

 

<script language="JavaScript" type="text/javascript">
				<!--
				function check_music()
				{
					if (form.music_fan.value == 1 && form.musician_name.value == "") 
					{
						alert( "test." );
						form.music_fan.focus();
						return false ;
					}

					return true ;
				}
				//-->
				</script>

 

and on the first <form I added:

 

onSubmit="return checkme_signup()"

 

There are no errors but it just continues to the next page.  I used the php && so perhaps javascript uses something else for "and" or something.  Basically I only want it to alert when the music_fan value is = 1 and the musician_name is empty.  If the music_fan value is 0 or the musician_name is not empty it will not error.  Thanks!

[hansford]

plesse post your form.

[Jason28]

Ok thanks.

 

<form action="signup.php?action=page2" enctype="multipart/form-data" method="post" onSubmit="return check_music()">
<table width="65%" border="0" align="center" cellpadding="3" cellspacing="1" class="maintable">
  <tr>
    <th class="thHead" colspan="2" height="25" valign="middle">Registration Information</th>
  </tr>
  <tr>
    <td class="row2 smalltext" colspan="2">Fields marked with an asterisk are required</td>
  </tr>
  <!-- BEGIN show/hide -->
  <tr class="row1">
    <td width="38%" class="row1 bigtext">Account Type: *
<br>
<br>
<span class="smalltext">Please choose between a musician or fan account.  You can change this option later on after you have registered.</span>
<br>
<br>
 <a href="pop_up_window.php?action=fan_or_musician" target="_blank" onClick="openWin(this.href, '400', '600', 'yes'); return false;">More Info</a></td>
    <td class="row2 bigtext">
 <table width="100%" border="0" cellpadding="4">
  <tr align="center">
	<td>{musician_img}</td>
	<td>{fan_only_img}</td>
  </tr>
  <tr align="center">
	<td class="bigtext"><input name="music_fan" type="radio" value="1" onClick="javascript:showHide('div1'); showHide('div2')"> Musician and Fan</td>
	<td class="bigtext"><input name="music_fan" type="radio" value="0" checked="checked" onClick="javascript:alwaysHide('div1'); alwaysHide('div2')"> Fan Only</td>
  </tr>
</table>	</td>
  </tr>	 
  <tr id="div1" style="display:none">
    <td class="row1 bigtext">Musician Name: *</td>
    <td class="row2"><input type="text" class="post" style="width: 250px" name="musician_name" size="25" maxlength="20" value=""></td>
  </tr>
  <tr id="div2" style="display:none">
    <td class="row1 bigtext">Package Plan: *</td>
    <td class="row2">{row_plan_drop}</td>
  </tr>
  <!-- END show/hide -->
  <tr>
    <td class="row1 smalltext" colspan="2"> </td>
  </tr>
  <tr>
    <td class="catBottom" colspan="2" align="center" height="28">
      <input type="submit" name="continue" value="Continue" class="mainoption" />
     </td>
  </tr>
</table>
</form>

[hansford]

i don't know exactly what youre trying to do -you'd probably want an onchange event handler here. I suppose when the user selects from a dropdown box -you'd call this function

-----------------------------

let me know if this is not what youre looking for

---------------------------

<form name='form1' method='post' action='mextpage.html'>

<select name='music_fan' onchange='check_music(this.form);'>

<option value='1'>1</option/>

<option value='2'>2</option/>

<option value='3'>3</option/>

</select><br>

<input type='text' name='musician_name' size='30'/><br>

<input type='submit' value='submit'/>

</form>

 

<script language="JavaScript" type="text/javascript">

<!--

 

function check_music(frm)

{

if (frm.music_fan.options[frm.music_fan.selectedIndex].value== 1 && frm.musician_name.value == "")

{

frm.music_fan.focus();

}

return;

}

//-->

</script>

[Jason28]

Can't I just fix the javascript function instead of rewritting everything?  Plus I cannot easily modify my form option since it generated from a php function that is used a lot and I do not want to edit it for a simple popup message.

[hansford]

mine was just an example for you to use to learn how to get the correct option value-the way you have it now means nothing. If you try and call the function on the submit button then the page will be submitted and your function will never fire. you can try-although not necessarily cross-browser friendly- to add a button instead of the submit.

<input type='button' value='submit' onclick='check_music(this.form);'>

 

then you can submit the form by frm.submit();

---------------------------

If you never want this function to submit the form then you'll need to use a different handler ie: onchange

[haku]

Function you are calling:

 

onSubmit="return checkme_signup()"

 

Function you defined:

 

check_music()

 

checkme_signup != check_music

[Jason28]

Function you are calling:

 

onSubmit="return checkme_signup()"

 

Function you defined:

 

check_music()

 

checkme_signup != check_music

 

Sorry that was just a typo in this topic the function names are the same.  Ok, this works alone:

 

function check_music()
{

if (document.forms[0].musician_name.value == "" && document.forms[0].music_fan.value == 1)
{
	alert("The Musician field is empty.  Please fill out this field.");
	document.forms[0].musician_name.focus();return(false)
}

}

 

However if I want it so that if I add the && document.forms[0].music_fan.value == 1 it doesn't work.

 

 

[Jason28]

The only thing I can assume is for some reason the correct value of music_fan is not being pulled.  Is there a way to test this using javascript?  I know with php you can use an echo to see what the value is doing.

[hansford]

var box = document.form[0];

var el = "";

for(var i=0; i < box.length;i++){

if(box.name == 'music_fan'){

if(box.checked){

el = box.value;

break;

}

}

}

 

if (document.forms[0].musician_name.value == "" && el == '1')

[hansford]

doh! forgot to add the i var

---------------------------

var box = document.form[0];

var el = "";

for(var i=0; i < box.length;i++){

if(box.name == 'music_fan'){

if(box.checked){

el = box.value;

break;

}

}

}

 

if (document.forms[0].musician_name.value == "" && el == '1')

[Jason28]

I assume you wanted me to use:

 

<!--
				function check_music()
				{

					var box = document.form[0];
					var el = "";
					for(var i=0; i < box.length;i++){
					if(box.name == 'music_fan'){
					if(box.checked){
					el = box.value;
					break;
					}
					}
}

if (document.forms[0].musician_name.value == "" && el == '1')
				     {
						alert("The Musician field is empty.  Please fill out this field.");
						document.forms[0].musician_name.focus();return(false)
					}

				}
				//-->

 

Sorry didn't work.

[kbh43dz_u]

Hello, I am new to javascript and tried modifying an existing script but it doesn't work.  It is used to see if one option on a form is selected, and the other form field is empty, it will error.  Here is what I modified:

 

<script language="JavaScript" type="text/javascript">
				<!--
				function check_music()
				{
					if (form.music_fan.value == 1 && form.musician_name.value == "") 
					{
						alert( "test." );
						form.music_fan.focus();
						return false ;
					}

					return true ;
				}
				//-->
				</script>

 

and on the first <form I added:

 

onSubmit="return checkme_signup()"

 

There are no errors but it just continues to the next page.  I used the php && so perhaps javascript uses something else for "and" or something.  Basically I only want it to alert when the music_fan value is = 1 and the musician_name is empty.  If the music_fan value is 0 or the musician_name is not empty it will not error.  Thanks!

 

 

 

 

..>

Your script (check music() should look like that:

<script language="JavaScript" type="text/javascript">
<!--
function check_music()
{
	if (document.getElementById('music_fan').checked && document.getElementById('musician_name').value == "") 
	{
		alert( "error - but my script works." );
		document.getElementById('musician_name').focus();
		return false;
	}
	return true;
}
//-->
</script>

The Value of "Music_fan" is ALWAYS == 1 because you never change the value of it - you just select it or not (this is why it always alerts you). also if you select the other checkbox, the value of checkbox one doesn't change. You want to use ".checked" ... ask if it is checked. (you don't need the values of the checkboxes in your script.)

 

In my example I'm calling the fields with "document.getElementById('musician_name')" so you will have tho add ID's for your fields - it's better because than your calls are unique.

 

(I added id="music_fan" to checkbox 1; id="music_fan2" to checkbox 2 and id="musician_name" to the musician_name-field. If you also want to check for a selection in the drop-down field you have to extend this script)

[Jason28]

Thanks vamosbenedikt you rock it works