1

I'm trying to disable the button during form submission but not able to do so. Here is the javascript code

<script type="text/javascript">
function Validate(b)
{
function stuff()
{
var temp = document.getElementById("<%=txt_stuff.ClientID %>").value;
var val = /^[a-zA-Z0-9 ]+$/
if(temp=="")
{
alert("Please Enter Stuff");
return false;
}
else if(val.test(temp))
{
return true;
}
else
{
alert("Name accepts only spaces and charcters");
return false;
}
}
function price()
{
var temp2 = document.getElementById("<%=txt_price.ClientID %>").value;
var val2 = /^[0-9 ]+$/
if(temp2=="")
    {
    alert("Please Enter Price");
    return false;
    }
else if(val2.test(temp2))
    {
    return true;
    }
else
    {
    alert("Price accepts only Number");
    return false;
    }
}
if(stuff() && price())
{
b.disabled = true;
b.value = 'Submitting...';
return true;
}
else
{
return false;
}
}

</script>
Here is the button code



 <asp:Button ID="Button2" runat="server" Text="Add Record" OnClientClick = "return Validate(this)" 
         onclick="Button2_Click" />

The button gets disabled but the value isn't submitted into the database.

Database update code is

 protected void Button2_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(500);
            SqlConnection con = new SqlConnection();
            con.ConnectionString = "Data Source=DTPXP-77A;Initial Catalog=practice;Integrated Security=true";
            con.Open();
            SqlCommand cmd = new SqlCommand("insert into expense values(@person,@item,@expdate,@price)", con);
            cmd.Parameters.Add("@person", SqlDbType.VarChar);
            cmd.Parameters.Add("@item", SqlDbType.VarChar);
            cmd.Parameters.Add("@expdate", SqlDbType.DateTime);
            cmd.Parameters.Add("@price", SqlDbType.Int);
            cmd.Parameters["@person"].Value = droplist_person.SelectedItem.ToString();
            cmd.Parameters["@item"].Value = txt_stuff.Text;
            cmd.Parameters["@expdate"].Value = DateTime.Now.ToString();
            cmd.Parameters["@price"].Value = txt_price.Text;
            cmd.ExecuteNonQuery();
            InsertHistory();
            Response.Redirect("Add.aspx");

        }
Shad Khan
  • 119
  • 4
  • 12
  • Add a break point to the event and see if it is reached on button click? – Kaf Oct 08 '13 at 12:10
  • No Button2_Click event is not getting started. – Shad Khan Oct 08 '13 at 12:19
  • I think since the button is disabled it is not firing the event. On the other hand if you are posting back, what is the point of disabling the button on client side when you can do it on server side like `Button2.Enable = true;`. – Kaf Oct 08 '13 at 12:22
  • Check the updated code above. Actually I've a Validate function and it returns true and false depending upon the inserted values. I want to validate as well as disable the submit button. for ex OnClientClick = "return Validate(this);" if it returns true, submit into database and disable submit for that period of time and if it is false disable submit and alert with the validate message. – Shad Khan Oct 08 '13 at 13:49
  • Actually when I write OnClientClick= "return Validate();this.disabled=true" then values are submitted but button is not disabled but if I just reverse it OnClientClick= "this.disabled=true;return Validate()" then button is disabled but value isn't submitted. – Shad Khan Oct 08 '13 at 14:36
  • @ShadKhan: That is expected behavior. See http://stackoverflow.com/questions/2879175/disable-buttons-on-post-back-using-jquery-in-net-app – NotMe Oct 08 '13 at 16:10
  • after looking back at this i'm a bit lost in the validate function but besides that you could also try; replacing disabled true with add attribute disabled, disabled – ufosnowcat Oct 14 '13 at 09:09

2 Answers2

1

remove the UseSubmitBehavior="false" attribute? and you dont need to return anithing in the javascript (return false is used to cancel a postback)

ufosnowcat
  • 558
  • 2
  • 13
  • I agree, removing the UseSubmitBehavior="false" could solve the issue as well. I missed that in my answer. – Humpy Oct 08 '13 at 12:52
  • Actually the mess() func is just used as an example. Actually I've a Validate function and it returns true and false depending upon the inserted values. I want to validate as well as disable the submit button. for ex OnClientClick = "return Validate(this);" if it returns true, submit into database and disable submit for that period of time and if it is false disable submit and alert with the validate message. – Shad Khan Oct 08 '13 at 13:25
  • Actually when I write OnClientClick= "return Validate();this.disabled=true" then values are submitted but button is not disabled but if I just reverse it OnClientClick= "this.disabled=true;return Validate()" then button is disabled but value isn't submitted. – Shad Khan Oct 08 '13 at 14:35
0

I think it's the way you are inserting the items into the database since you said that it disables the button but doesn't insert the database. So to me, that means the event is firing but something is wrong with the way you are inserting. This is how my buttons look, using your code..

protected void Button2_Click(object sender, EventArgs e)
    {
        string person = droplist_person.SelectedItem.Text;
        string item = txt_stuff.Text;
        string expdate = DateTime.Now.ToString();
        string price = txt_price.Text;

        System.Threading.Thread.Sleep(500);
        SqlConnection con = new SqlConnection("Data Source=DTPXP-77A;Initial Catalog=practice;Integrated Security=true");
        con.Open();
        SqlCommand cmd = new SqlCommand("INSERT INTO (expense person, item, expdate, price) VALUES (@person, @item, @expdate, @price)", con);
        cmd.Parameters.AddWithValue("@person", person);
        cmd.Parameters.AddWithValue("@item", item);
        cmd.Parameters.AddWithValue("@expdate", expdate);
        cmd.Parameters.AddWithValue("@price", price);
        cmd.ExecuteNonQuery();
        InsertHistory();
        Response.Redirect("Add.aspx");

        Button2.Enabled = false; //you can disable the button one the button click as well. 

        Page.ClientScript.RegisterStartupScript(this.GetType(), "Call my function", "mess();", true);

        }

I would also surround that in a try/catch. Also, as far as I know, the Add is the "old" way of inserting items into the database. AddWithValue is going to be the best way since you are inserting items from drop downs and from text boxes. I think this is the where the problem lies. You can also put the connection inside the connection inside the SqlConnection like above to "clean" things up a bit. As to your "2nd" question, I'm not completely sure what you mean, but I hope this solves the problem to your 1st question.

EDIT: Added the disabling of the button since it was described in the title.

EDIT 2: Also, remove the UseSubmitBehavior="false" and the OnClientClick. Instead, you can call the message in the behind code.. Look above for example.

EDIT 3: From what I understand then, you will want to keep what the code the inserts the values. So keep the OnClientClick = "return Validate();" And then in your button click, disable the button. Then you will want to add if(!PostBack) to the page load, like so.. This will enable the button on the page load if the postback has happened. So what will be happening is that you disable the button, then once it posts back, it will be re-enabled.

protected void Page_Load(object sender, EventArgs e)
{
    if(!IsPostBack)
     {
       Button2.Enabled = true;
     }
}
Humpy
  • 2,004
  • 2
  • 22
  • 45
  • Check the updated code above. Actually I've a Validate function and it returns true and false depending upon the inserted values. I want to validate as well as disable the submit button. for ex OnClientClick = "return Validate(this);" if it returns true, submit into database and disable submit for that period of time and if it is false disable submit and alert with the validate message. – Shad Khan Oct 08 '13 at 13:50
  • Actually when I write OnClientClick= "return Validate();this.disabled=true" then values are submitted but button is not disabled but if I just reverse it OnClientClick= "this.disabled=true;return Validate()" then button is disabled but value isn't submitted. – Shad Khan Oct 08 '13 at 14:36
  • Could you disable the button in the behind code? That would be an easy solution I think. – Humpy Oct 08 '13 at 15:38
  • But I don't want it to be disabled forever. I only want it to be disabled for the next postback( until submission). so that the person would not be able to click it during form submission. – Shad Khan Oct 08 '13 at 15:42
  • So once it's submitted, you want it to be disabled, but then once the page reloads (postbacks), you want it to be displayed again? – Humpy Oct 08 '13 at 15:44
  • Exactly!. The thing is, once it gets disabled the server side code doesn't run. I want it to execute even after the button has been disabled. – Shad Khan Oct 08 '13 at 15:49
  • Yes I solved it eventually. I wrote onclient click like OnClientClick = "if(Validate()){this.disabled=true;this.value='Proccessing...'}else{return false}" and then used UseSubmitBehavior ="false" to enable a force postback. – Shad Khan Oct 12 '13 at 16:26