Formatting: Focus in textarea: enter to submit form with serverside event trapping

[Perry van Kuppeveld]

Hi,

I have a problem with formatting a table including text fields wich can
contain up to 255 chars.

I need a table with 3 columns:
- First column 50 % over the with a rowspan of the total number of rows.
- Second column 25 %, no rowspan
- Third column 25 %, no rowspan

In the first column / cell contains a description. The next column a
caption, and the last column a edit field.

See http://www.winit.nl/sample/1.html
This shows the right layout (Using IE 6). If a text fields has the focus,
pressing enter will submit the form.

But when the text in the fields is to big, the layout is wrong (but still,
enter = submit)
See http://www.winit.nl/sample/2.html

To solve this problem, I replaced the input type=text with a textarea with
style overflow=hidden.
Only the enter key now gives a newline instead of a submit
See http://www.winit.nl/sample/3.html

The prevent newlines in the textarea i can use some client side scripting.
See http://www.winit.nl/sample/4.html

But how to submit the form using enter, and still be able to use the event
trapping of the submit button in the aspx page?
(Or how to use a input type = text resulting in the right layout)?

Perry

 

[Guest]

Hey,

Instead of submit button put a button on the page and invoke form submit if
your layout is matched. You can still retain your textbox.
(e.g)
<input type=button onclick="test();">

<script>
function test()
{
if (condition)
document.form1.submit();
}
</script>
Hope this would solve your issue. Let me know if you need any other
clarification.

-Baskar BV-

 

[Perry van Kuppeveld]

If i use a document.form1.submit(); i don't get the server side click event
in the aspx file. I need this event on the server.

 

[Grant Merwitz]

To get around that, create a button that submits to the server (input
type=button runat=server id=btn)
And in the JavaScript submit that button btn.Submit(), which will trigger
its Post Back as well

HTH

 

[Guest]

I didnot get your question. Can you share the code which u have written?

-Baskar BV-

 

[Perry]

I created a new C# webapp and placed the following code in webform class (In
design mode nothing is changed)
See the dif between pressing enter while the focus is in the textbox, or
clicking the submit button.

Code:


public class WebForm1 : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
TextBox tb = new TextBox( );
tb.TextMode = TextBoxMode.MultiLine;
tb.Attributes["onkeypress"] = "if (event.keyCode == 13) {
document.forms[0].submit(); return false; }";
this.FindControl("form1").Controls.Add(tb);

Button b = new Button();
b.Text = "Submit";
b.Click +=new EventHandler(b_Click);
this.FindControl("form1").Controls.Add(b);
}

override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}

private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}

private void b_Click(object sender, EventArgs e)
{
Response.Write("Submit");
}
}

 

[Guest]

Hey,

try the code given below.
<script>
function test()
{
document.form1.button1.click();
}
</script>
<form method="post" name="form1" onsubmit="test();" runat=server>
<input type=text>
<input type=button onclick="button_click" runat=server>
</form>
the code will invoke client "test" function which then invokes button1 click
event. So if the user submits the form by pressing enter you could check for
the format validation and submit or not accordingly.

 

[Perry van Kuppeveld]

I don't think this will work:

If i click the button script button_click will be executed, and that is not
available.

I will post a new question with the code provided in the previous post, so
it's back on the top.

Thanks anyway

Hey,

try the code given below.
<script>
function test()
{
document.form1.button1.click();
}
</script>
<form method="post" name="form1" onsubmit="test();" runat=server>
<input type=text>
<input type=button onclick="button_click" runat=server>
</form>
the code will invoke client "test" function which then invokes button1
click
event. So if the user submits the form by pressing enter you could check
for
the format validation and submit or not accordingly.

I created a new C# webapp and placed the following code in webform class
(In
design mode nothing is changed)
See the dif between pressing enter while the focus is in the textbox, or
clicking the submit button.

Code:


public class WebForm1 : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
TextBox tb = new TextBox( );
tb.TextMode = TextBoxMode.MultiLine;
tb.Attributes["onkeypress"] = "if (event.keyCode == 13) {
document.forms[0].submit(); return false; }";
this.FindControl("form1").Controls.Add(tb);

Button b = new Button();
b.Text = "Submit";
b.Click +=new EventHandler(b_Click);
this.FindControl("form1").Controls.Add(b);
}

override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}

private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}

private void b_Click(object sender, EventArgs e)
{
Response.Write("Submit");
}
}

 

[Guest]

You need to write the button_click event for the button. You can do that by
double clicking the button in the design view. In that case, your code will
be like
<input type=button runat=server name="button1">. The click event will be
bound to the code behind.

-Baskar BV-

I don't think this will work:

If i click the button script button_click will be executed, and that is not
available.

I will post a new question with the code provided in the previous post, so
it's back on the top.

Thanks anyway

Hey,

try the code given below.
<script>
function test()
{
document.form1.button1.click();
}
</script>
<form method="post" name="form1" onsubmit="test();" runat=server>
<input type=text>
<input type=button onclick="button_click" runat=server>
</form>
the code will invoke client "test" function which then invokes button1
click
event. So if the user submits the form by pressing enter you could check
for
the format validation and submit or not accordingly.

I created a new C# webapp and placed the following code in webform class
(In
design mode nothing is changed)
See the dif between pressing enter while the focus is in the textbox, or
clicking the submit button.

Code:


public class WebForm1 : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
TextBox tb = new TextBox( );
tb.TextMode = TextBoxMode.MultiLine;
tb.Attributes["onkeypress"] = "if (event.keyCode == 13) {
document.forms[0].submit(); return false; }";
this.FindControl("form1").Controls.Add(tb);

Button b = new Button();
b.Text = "Submit";
b.Click +=new EventHandler(b_Click);
this.FindControl("form1").Controls.Add(b);
}

override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}

private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}

private void b_Click(object sender, EventArgs e)
{
Response.Write("Submit");
}
}

 

[Perry van Kuppeveld]

Thanks, it's working

Perry

You need to write the button_click event for the button. You can do that
by
double clicking the button in the design view. In that case, your code
will
be like
<input type=button runat=server name="button1">. The click event will be
bound to the code behind.

-Baskar BV-

I don't think this will work:

If i click the button script button_click will be executed, and that is
not
available.

I will post a new question with the code provided in the previous post,
so
it's back on the top.

Thanks anyway

Hey,

try the code given below.
<script>
function test()
{
document.form1.button1.click();
}
</script>
<form method="post" name="form1" onsubmit="test();" runat=server>
<input type=text>
<input type=button onclick="button_click" runat=server>
</form>
the code will invoke client "test" function which then invokes button1
click
event. So if the user submits the form by pressing enter you could
check
for
the format validation and submit or not accordingly.

:

I created a new C# webapp and placed the following code in webform
class
(In
design mode nothing is changed)
See the dif between pressing enter while the focus is in the textbox,
or
clicking the submit button.

Code:


public class WebForm1 : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
TextBox tb = new TextBox( );
tb.TextMode = TextBoxMode.MultiLine;
tb.Attributes["onkeypress"] = "if (event.keyCode == 13) {
document.forms[0].submit(); return false; }";
this.FindControl("form1").Controls.Add(tb);

Button b = new Button();
b.Text = "Submit";
b.Click +=new EventHandler(b_Click);
this.FindControl("form1").Controls.Add(b);
}

override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}

private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}

private void b_Click(object sender, EventArgs e)
{
Response.Write("Submit");
}
}

 

[Grant Merwitz]

Hey, that was my suggestion!!

Haha, just kdding, nice you go it working

Thanks, it's working

Perry

You need to write the button_click event for the button. You can do that
by
double clicking the button in the design view. In that case, your code
will
be like
<input type=button runat=server name="button1">. The click event will be
bound to the code behind.

-Baskar BV-

I don't think this will work:

If i click the button script button_click will be executed, and that is
not
available.

I will post a new question with the code provided in the previous post,
so
it's back on the top.

Thanks anyway


Hey,

try the code given below.
<script>
function test()
{
document.form1.button1.click();
}
</script>
<form method="post" name="form1" onsubmit="test();" runat=server>
<input type=text>
<input type=button onclick="button_click" runat=server>
</form>
the code will invoke client "test" function which then invokes button1
click
event. So if the user submits the form by pressing enter you could
check
for
the format validation and submit or not accordingly.

:

I created a new C# webapp and placed the following code in webform
class
(In
design mode nothing is changed)
See the dif between pressing enter while the focus is in the textbox,
or
clicking the submit button.

Code:


public class WebForm1 : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
TextBox tb = new TextBox( );
tb.TextMode = TextBoxMode.MultiLine;
tb.Attributes["onkeypress"] = "if (event.keyCode == 13) {
document.forms[0].submit(); return false; }";
this.FindControl("form1").Controls.Add(tb);

Button b = new Button();
b.Text = "Submit";
b.Click +=new EventHandler(b_Click);
this.FindControl("form1").Controls.Add(b);
}

override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}

private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}

private void b_Click(object sender, EventArgs e)
{
Response.Write("Submit");
}
}