You must Sign In to post a response.
  • Category: HTML

    How to check submit button onsubmit and onclick event like this?


    Are you looking for a way to check submit button onsubmit and onclick event ? then read this thread to know how to check it



    Friends,

    i am designing my website in html with javascript. i have two submit buttons in my web pages. if user click save button, want to check first validation script and then action script. if user click view button want to show the details not to check the validation script. how to check submit button onsubmit and onclick event like this?

    This is my html code

    <html>
    <title>Construction Management System</title>
    <head>
    <link rel="stylesheet" type="text/css" href="CSS_CMS.css">
    <script type="text/javascript" src="validation.js"></script>
    <script type="text/javascript">
    function OnSubmitForm()
    {
    if(document.pressed == 'Save')
    {
    document.myForm.action ="Customer_Master_DB.php";
    }
    else
    if(document.pressed == 'View')
    {
    document.myForm.action ="View.php";
    }
    // Trigger the validations
    return true;
    }
    </script>

    </head>
    <body>
    <form name="myForm" method="post" action="" onsubmit="return OnSubmitForm();">
    <!<form name="myForm" action="Customer_Master_DB.php" onsubmit="return validateFormOnSubmit(this)" method="post" >>
    <div class="wrapper">
    <div class="banner">
    <img class="logo" src="1.jpg"/>
    </div>

    <div id='cssmenu'>
    <ul>
    <li class='active'><a href='index.html'><span>Home</span></a></li>
    <li class='has-sub'><a href='#'><span>Master</span></a>
    <ul>
    <li><a href='#'><span>Customer Master</span></a></li>
    <li><a href='#'><span>Supplier Master</span></a></li>
    <li><a href='#'><span>Site Master</span></a></li>
    <li><a href='#'><span>Material Master</span></a></li>
    <li class='last'><a href='#'><span>Calculation Master</span></a></li>
    </ul>
    </li>
    <li ><a href='#'><span>Transactions</span></a>
    <ul>
    <li><a href='#'><span>Estimation</span></a></li>
    <li><a href='#'><span>Log Book</span></a></li>
    <li><a href='#'><span>Inward Material</span></a></li>
    <li><a href='#'><span>Make Payment</span></a></li>
    <li class='last'><a href='#'><span>Outward Material</span></a></li>
    </ul>
    </li>
    <li class='has-sub'><a href='#'><span>Utility</span></a>
    <ul>
    <li><a href='#'><span>Backup Location Assign</span></a></li>
    <li><a href='#'><span>Backup</span></a></li>
    <li><a href='#'><span>New User Account Create</span></a></li>
    <li><a href='#'><span>Password Change</span></a></li>
    <li><a href='#'><span>Password Reset</span></a></li>
    <li class='last'><a href='#'><span>User Rights <span></a></li>
    </ul>
    </li>

    <li class='has-sub'><a href='#'><span>Reports</span></a>
    <ul>
    <li><a href='#'><span>Estimation Report</span></a></li>
    <li><a href='#'><span>Log Book Report</span></a></li>
    <li><a href='#'><span>Inward Material Report</span></a></li>
    <li><a href='#'><span>Payment Report</span></a></li>
    <li class='last'><a href='#'><span>Outward Material</span></a></li>
    </ul>
    </li>
    <li class='last'><a href='#'><span>Logout</span></a>
    </ul>
    </div>

    <!<div class="contents">
    <div class="heading">
    <div class="col">Category ID</div>
    <div class="col">Category </div>
    </div>
    <div class="table-row">
    <div class="col">1</div>
    <div class="col">PHP</div>
    </div>
    <div class="table-row">
    <div class="col">2</div>
    <div class="col">WordPress</div>
    </div>
    <div class="table-row">
    <div class="col">3</div>
    <div class="col">Dot Net</div>
    </div>
    <div class="table-row">
    <div class="col">4</div>
    <div class="col">ASP</div>
    </div>
    </div>>

    <br>


    <div>
    <fieldset>
    <legend>Add Customer</legend>
    <table id="customers">

    <tr>
    <td>
    <div class="label"><label>Customer Name</label></div>
    </td>
    <td>
    <div><input class="input" type="text" name="cname" autofocus/></div>
    </td>
    </tr>

    <tr>
    <td>
    <div class="label"><label>Customer Address</label></div>
    </td>
    <td>
    <div><textarea class="textarea" cols="25" rows="4" name="caddress"></textarea></div>
    </td>
    </tr>

    <tr>
    <td>
    <div class="label"><label>Area</label></div>
    </td>
    <td>
    <div><input class="input" type="text" name="carea"/></div>
    </td>
    </tr>

    <tr>
    <td>
    <div class="label"><label>City</label></div>
    </td>
    <td>
    <div><input class="input" type="text" name="ccity"/></div>
    </td>
    </tr>

    <tr>
    <td>
    <div class="label"><label>Contact No 1</label></div>
    </td>
    <td>
    <div><input class="input" type="text" name="ccn1" /></div>
    </td>
    </tr>

    <tr>
    <td>
    <div class="label"><label>Contact No 2</label></div>
    </td>
    <td>
    <div><input class="input" type="text" name="ccn2"/></div>
    </td>
    </tr>

    <tr>
    <td>
    <div class="label"><label>Email</label></div>
    </td>
    <td>
    <div><input class="input" type="text" name="cmail"/></div>
    </td>
    </tr>
    </table>

    <br>

    <table id="customers">
    <tr>
    <td>
    <input type="submit" name="Save" value="Save" id="submit" onclick="document.pressed=this.value"/>
    <input type="submit" name="View" value="View" id="submit" onclick="document.pressed=this.value"/>
    </td>
    </tr>
    </table>
    </fieldset>
    </div>

    <?php
    //include("View.php");
    ?>

    <div id="footer">
    <div class="copyright">
    Copyright © 2014 Dvaita Software Solutions [P] Ltd. All rights reserved.
    </div>
    </div>
    </div>
    </form>
    </body>
    </html>


    -

    this is my validation script


    function validateFormOnSubmit(theForm)
    {
    var reason = "";
    reason += validateName(theForm.cname);
    reason += validateAddress(theForm.caddress);
    reason += validateArea(theForm.carea);
    reason += validateCity(theForm.ccity);
    reason += validatePhone(theForm.ccn1);
    reason += validateEmail(theForm.cmail);

    if (reason != "")
    {
    alert("Please Fill Out The Following Details:\n" + reason);
    return false;
    }
    return true;
    }


    // Customer Name validation
    function validateName(fld)
    {
    var error = "";
    if (fld.value == "")
    {
    error = "Please Enter The Customer Name.\n";
    fld.style.background = '#F5A9A9';
    }
    else
    {
    fld.style.background = 'White';
    }
    return error;
    }

    // Customer Address validation
    function validateAddress(fld)
    {
    var error = "";
    if (fld.value == "")
    {
    error = "Please Enter The Customer Address.\n";
    fld.style.background = '#F5A9A9';
    }
    else
    {
    fld.style.background = 'White';
    }
    return error;
    }


    // Area validation
    function validateArea(fld)
    {
    var error = "";
    if (fld.value == "")
    {
    error = "Please Enter The Customer Area.\n";
    fld.style.background = '#F5A9A9';
    }
    else
    {
    fld.style.background = 'White';
    }
    return error;
    }

    // City validation
    function validateCity(fld)
    {
    var error = "";
    if (fld.value == "")
    {
    error = "Please Enter The Customer City.\n";
    fld.style.background = '#F5A9A9';
    }
    else
    {
    fld.style.background = 'White';
    }
    return error;
    }

    // Phone number validation
    function validatePhone(fld)
    {
    var error = "";
    var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');
    if (fld.value == "")
    {
    error = "Please Enter The Contact No 1.\n";
    fld.style.background = '#F5A9A9';
    }
    else if (fld.value==0)
    {
    error = "The Phone Number Must Be Greater Than Zero.\n";
    fld.style.background = '#F5A9A9';
    }
    else if (isNaN(parseInt(stripped)))
    {
    error = "Use Numbers Only in Phone Number.\n";
    fld.style.background = '#F5A9A9';
    }
    else if (!(stripped.length == 10))
    {
    error = "The Phone Number Length is Wrong. Maximum Length is 10.\n";
    fld.style.background = '#F5A9A9';
    }
    else
    {
    fld.style.background = 'White';
    }
    return error;
    }

    function trim(s)
    {
    return s.replace(/^\s+|\s+$/, '');
    }



    // Email validation
    function validateEmail(fld)
    {
    var error="";
    var tfld = trim(fld.value); // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
    if (fld.value == "")
    {
    fld.style.background = '#F5A9A9';
    error = "Please Enter The Email Address.\n";
    }
    else if (!emailFilter.test(tfld))
    {
    //test email for illegal characters
    fld.style.background = '#F5A9A9';
    error = "Please Enter A Valid Email Address.\n";
    }
    else if (fld.value.match(illegalChars))
    {
    fld.style.background = '#F5A9A9';
    error = "The Email Address Contains Illegal Characters.\n";
    }
    else
    {
    fld.style.background = 'White';
    }
    return error;
    }
  • #748144
    Hi,

    For the validation upon button click, check like the below-

    function fncheck()
    {
    var pgng = document.getElementById("<%=textboxid.ClientID%>").value.trim();
    if(pgnd == "")
    {
    alert('The textbox should not be empty...');
    document.getElementById("<%=txtfname.ClientID%>").focus();
    return false;
    }
    }
    Use whatever validation you want in the function.

    And to view the data upon button click-

    Use sessions to view the data, because it will not be beneficial to save this data. Session will be the good options. Let me know if you need code for this.

    Thanks,
    Ashutosh Jha
    http://tricksroad.com

  • #748156
    When you are calling the function at that time you can pass the reference of the control as the function parameter and then in the function check which control has invoked that function.

    Based on the control id which has invoked the function take the required action. You can also pass this as function argument which sends the reference of the button which has triggered the action.

    Miss. Jain
    Microsoft Certified Technology Specialist in .Net


  • Sign In to post your comments