if statement question

justAnoob · December 18, 2009

i have an onclick that calls a js function.

Am I able to have something like

onclick="if (condition) {do something}

if so. my condition would be my other js function that validates a form. here is my validation function.(special thanks to the members of phpfreaks for my validation function)

function validate(form1)
    {
    var valid = true;

    if (!form1.item_name.value)
    {
        document.getElementById('item_name_error').innerHTML = '*';
        valid = false;
    }
    else
    {
        document.getElementById('item_name_error').innerHTML = '';
    }
    
if (!form1.description.value)
    {
        document.getElementById('description_error').innerHTML = '*';
        valid = false;
    }
    else
    {
        document.getElementById('description_error').innerHTML = '';
    }

if (!form1.in_return.value)
    {
        document.getElementById('in_return_error').innerHTML = '*';
        valid = false;
    }
    else
    {
        document.getElementById('in_return_error').innerHTML = '';
    }

if (form1.listmenu.value == '1')
    {
        document.getElementById('listmenu_error').innerHTML = '*';
        valid = false;
    }
else
    {
        document.getElementById('listmenu_error').innerHTML = '';
    }

if (!form1.image.value)
    {
        document.getElementById('image_error').innerHTML = '*';
        valid = false;
    }
else
    {
        document.getElementById('image_error').innerHTML = '';
    }
return valid;
    }

Basicaly , what I'm looking for is for my onclick to check that the validation is good, and the run the onclick

KevinM1 · December 18, 2009

i have an onclick that calls a js function.

Am I able to have something like

onclick="if (condition) {do something}

Nope, that kind of thing isn't possible. Event handlers must be functions. What's stopping you from doing

someElement.onclick = function() {
   if (condition) { /* do something */ }
   else { /* do other thing */ }
}

??

justAnoob · December 18, 2009

I'm a little lost. Are you saying that would go into the input tag like a onclick would. I'm still learning here.

KevinM1 · December 18, 2009

I'm a little lost. Are you saying that would go into the input tag like a onclick would. I'm still learning here.

Ah, sorry. I don't tend to use inline JavaScript (i.e., JavaScript that's placed inside HTML elements). I prefer an unobtrusive (JavaScript that's separate from the HTML) style as it's easier to maintain, debug, and alows sites to degrade gracefully if the user is viewing it with an incompatible browser.

So, my example would apply to a page that looks like:

<!DOCTYPE html>
<html>
   <head>
      <title>Unobtrusive JavaScript Example</title>
   </head>

   <body>
      <form name ="myForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
         <!-- Inputs go here -->
         <input type="submit" name="submit" value="submit" />
      </form>
   </body>

   <script type="text/javascript"/>
      var submit = document.forms["myForm"].elements["submit"];

      submit.onclick = function() {
         if (/* condition */) { /* Do something */ }
         else { /* Do other thing */ } 
      }
   </script>

</html>

justAnoob · December 18, 2009

Still a little confused. Sorry This is what I got so far. What I'm trying to do is if my validation passess when the submit button is clicked, then show the hidden div. If validation is not passed, then keep the div hiding.

<script type="text/javascript"/>
var submit = document.forms["form1"].elements["submit"];
submit.onclick = function()
{
if (valid = false)
{
  var messID = document.getElementById(message_box);
  messID.style.display = 'block';
}
else
{
  var messID = document.getElementById(message_box);
  messID.style.display = 'none';
}
}
</script>

Here is my div inside the form

<form action="postnewitem_test0167.php" method="post" enctype="multipart/form-data" name="form1" id="form1" onSubmit="return validate(this);">
<table id="message_box" width="600" border="0" bgcolor="#9AA4AD" style="display:none">
                  <tr>
                  <td>
                  Uploading... Please be patient while your item is posting.</p>
                  </td>
                 </tr>
               </table>  
</form>

the return validate is my validation which is this.

<script type="text/javascript"/>
function validate(form1)
    {
    var valid = true;

    if (!form1.item_name.value)
    {
        document.getElementById('item_name_error').innerHTML = '*';
        valid = false;
    }
    else
    {
        document.getElementById('item_name_error').innerHTML = '';
    }
    
if (!form1.description.value)
    {
        document.getElementById('description_error').innerHTML = '*';
        valid = false;
    }
    else
    {
        document.getElementById('description_error').innerHTML = '';
    }

if (!form1.in_return.value)
    {
        document.getElementById('in_return_error').innerHTML = '*';
        valid = false;
    }
    else
    {
        document.getElementById('in_return_error').innerHTML = '';
    }

if (form1.listmenu.value == '1')
    {
        document.getElementById('listmenu_error').innerHTML = '*';
        valid = false;
    }
else
    {
        document.getElementById('listmenu_error').innerHTML = '';
    }

if (!form1.image.value)
    {
        document.getElementById('image_error').innerHTML = '*';
        valid = false;
    }
else
    {
        document.getElementById('image_error').innerHTML = '';
    }
return valid;
    }
</script>

I'm still attempting to learn javascript

KevinM1 · December 19, 2009

You shouldn't have two functions here. Just tie your div display function to your validate function:

function validate(form) {
   // all your previous validation code

   if (!valid) {
      var messID = document.getElementById("message_box");
      messID.style.display = "block";
   }

   return valid
}

You don't need an else-clause there as you should make the div have a display set to "none" by default in the CSS, and if the form is valid, the user will be sent to where ever the form's action takes them.

justAnoob · December 19, 2009

that works out pretty good. i'm really starting to like js. I just need to put some more time is to learning. The only thing i changed was

if (!valid) to if(valid)

That way, if my form passes the validation, then it will display to div.

Thanks a bunch.

Sign In

if statement question

Recommended Posts

justAnoob

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

justAnoob

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

justAnoob

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

justAnoob

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information