I have a web app that has 3 buttons on it, under it there is a textbox with no text on it, I would like to create an event that fills the textbox when a user hovers his mouse over the button, can someone please point me in the right direction
Thank
<input type="button" onmouseover="javascript:document.getElementById('textbox').value='Hello'" />
<input type="text" id="textbox" name="textbox" />
You could simply use jQuery to do this
<input type="button" onmouseover="fillText()" />
<input type="text" id="textbox" name="textbox" />
And the JavaScript/jQuery
function fillText() {
$("#textBox").val = "Your Text";
}
server have no more info about client side, but you could do that with AJAX updatepanel. use a java function to write mouse position in hidden text. then read hidden text in server side with triggers (in condition update mode) or timer (in always update mode).
Related
Ok so I would like to be able to be in the part number textbox press enter and it do a 'Quick Search'. However when press enter it activates the 'Search' Button instead. The 'Search' Button as the diagram shows is a default button of the panel it is in. But the 'Quick Search' is not in that same panel so I am kinda stumped on how to change this action so it calls click on the button on the 'Quick Search' and not the 'Search'. If this doesn't make since ask more questions and I will update the diagram and question.
Thanks in advance!
New Facts
In the browser Render ... these are in the same form
I want the Quick Search Button to be a client side button which makes it hard to use a panel and a default button
Try to place Part Number textbox and Quick Search button in separate Panel with DefaultButton="bnQuickSearck" attribute like follows:
<asp:Panel runat="server" DefaultButton="bnQuickSearck">
<asp:TextBox ID="tbPartNumber" runat="server"></asp:TextBox>
<asp:Button ID="bnQuickSearck" runat="server" Text="Quick Search" />
</asp:Panel>
EDIT If you have client-based button you can use the following code on javascript:
<div id="divId">
<input id="txtId" type="text" />
<input id="btnId" type="button" value="Quick Search" onclick="alert('test')"; />
</div>
<script>
$("#divId").bind("keypress", function (e) {
if (e.keyCode == 13) {
$("#btnId").click();
return false;
}
});
</script>
Make sure jQuery installed in your web application in this case.
It sounds like you have one big form. If this is the case, when you hit enter in the Part Number field it activates the default action, in this case it would seem to be the "Search" button. If you can break up your forms, they'll each have their own default actions. This will eliminate any need for crazy redirects, AJAX, server-side foo, etc.
I'm a C#/VB developer trying to migrate away from aspx and web forms towards HTML.
I'm trying to do this:
HTML
<input type="radio" id="rb" runat="server" />
C#
DataTable dt = clsMyClass.GetItemTable();
rb.DataSource = dt;
rb.DataValueField = "ItemID";
rb.DataTextField = "ItemName";
rb.DataBind();
Thanks.
Ok, you can use the controls provided by the Microsoft ASP.NET Web Forms to control what and how the User interacts with the Application that you're providing him with.
Actaully what those controls provide you is that you Validate the data on the server side as well as client side. The keyword, runat="server" is used to tell the server that this Element should be handled on the Server.
If you want to redesign your application you can do that too. Instead of doing anything, just simply use your own Controls.
<input type="text" onchange="function()" />
In the JavaScript you can handle the events on that element.
function () {
/* some validations */
}
runat="server" is just to ensure that whenever the control's value is changed or any other particular functions are triggered the server would execute some method to take control of that.
Similarly, if you're not using Web Forms. You can create your own custom Controls and your own custom events to handle all the methods and events.
For example, if you have this control
<input type="text" name="myName" />
jQuery would be handy in this
$('input[name=myName]').change(function () {
alert('Hi, ' + $(this).value);
}
This way, once a user changes the value, he would get an alert for Hi, [name_of_user]. If I were to write Afzaal Ahmad Zeeshan, it would pop up
Hi, Afzaal Ahmad Zeeshan.
Now let's give the whole form control. Sample form is
<form method="post">
<input type="text" name="myName" />
<input type="text" name="id" />
<input type="submit" value="Submit" />
</form>
jQuery would be
$('form').submit(function () {
/* send data to server */
}
On the server side, handle those fields and then save them.
What are you trying to achieve? Are you trying to bind these elements with contents from your database or simply trying to add some text...
You can make a function in your codebehind to catch the data from your database and simply write it to your input controls by using response.write methods...
UPDATE
Hey!!! how about a function in codebehind like ....
public string getTheValueFromDataBase()
{
string abc = "";
abc = "text from database over here...";
return abc;
}
IN HTML PAGE
<input type="radio" /><%Response.Write(getTheValueFromDataBase()); %>
<input type=text id="txtNum"/>
ex. of button
<asp:Button ID="btnNum1" runat="server" CssClass="btnNumbers" Text="1" />
<asp:Button ID="btnNum5" runat="server" CssClass="btnNumbers" Text="5" />
Basically I have a huge numberpad on my page using Buttons label from 0-9 and backspage and clear. This is going to be for a touchscreen device
I am not sure how to go about when a user touches button1 to place a '1' in my textbox. Then if they hit button5 my textbox value would append the 5 to the 1.
I would like to use javascript to perform this task so it does not do a postback for every button click please help.
The easiest way to prevent the postback is to not use the asp.net button control. Just use standard html button
<button type="button" class="btnNumbers">1</button>
Then just attach to the click event for the button and append it's value to the textbox.
Add following method
$(document).ready(function() { $(".btnNumbers").click(function() { $("#txtNum").val($("#txtNum").val() +$(this).val()); return false; });
});
On the current website I am working on we have a Html Form that wraps everything and is used by the global search to submit and search when the user presses enter in the "global search" text box.
The problem we are now having is that we have a application form which has its own text boxes within this Html Form and when you press enter it does a onSubmit for the Global Search.
So in short I was wondering if there was any way to change certain specific text boxes to do a different onSubmit than the global search.
Many Thanks,
Vincent Kong
Instead of using type="submit" buttons use regular buttons (type="button") then call javascript to do what you want.
you can use HTML5 formaction Attribute:
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp" value="Submit as admin">
</form>
Although this quickly becomes messy, you can set the CommandName attributes on each of your buttons and handle them appropriately (based on the command value of the clicked button) during the postback.
I have a cancel button in a form:
#using (Html.BeginForm("ConfirmBid","Auction"))
{
some stuff ...
<input type="image" src="../../Content/css/img/btn-submit.png" class="btn-form" />
<input type="image" src="../../Content/css/img/btn-cancel.png" class="btn-form" />
}
The issue is I want this button to go to a particular view when I click on it. How do I do this?
Either you can convert the Cancel button as an anchor tag with #Html.ActionLink helper method and apply a css class which makes the link to looks like a button and then in the controller action for that link, you can return the specific view.
#Html.ActionLink("Cancel","Index","Products",null, new { #class="clsButtonFake"})
or
Use 2 submit buttons in the form. One for real submit and one for the cancel. and in your controller action, check which button called the action method.
You can read more about it here in this answer.
Lot of the answers worked in either of the browsers, chrome or ie but not all.
This worked in all -
<input type="button" value="Cancel" onclick="location.href='#Url.Action("Index","Home")';"/>
This is my button HTML:
<button type="button"
class="btn btn-inverse"
id="cancel"
onclick="window.history.back()">
<i class="icon-remove icon-large"></i>
<br />#Localization.Cancel
</button>
Then to customize the onclick attribute in some views I do this:
<script>
$(document).ready(function ()
{
$("#cancel").
attr("onClick",
"document.location.href='#Html.Raw(Url.Action("Index", "Standard",
new { ManualId = Model.ManualId, ChapterId = Model.ChapterId }))'");
});
</script>
Or a styled submit button:
<input type="submit" value="Save Form" name="Save" class="submit-button btn-form" />
Then Javascript for cancel button:
<input type="button" onclick="document.location.href('Home/Index')" value="Cancel" class="cancel-button btn-form" />
// Note: This avoids any of the validation that may happen in the model that
// normally gets triggered with a submit
So with Shyju's appraoch, you use the built in MVC ActionLink helper. Doing this, you'll need to have any images or icons done through css. However, this is much more cachable, especially if you use base64 strings for your images in css.
I like Adauto's approach because it gives you much more control of the markup. MVC Html Helpers are nice, but they still seem to have their heads in the WebForms mindset of "don't worry about it, we'll take care of it for you".
The one thing I would add is Url.Content.
<img src="#Url.Content("~/Content/css/img/btn-submit.png" class="btn-form" />
It's never really a good idea to make your views have to know the location of content relative to it's location.
<a href="/Auction/[ActionName]">
<input type="image" src="#Url.Content("~/Content/css/img/btn-cancel.png")" class="btn-form" />
</a>
if you want to preserve its look as a button, you could do something like this:
<a href="/Auction/[ActionName]">
<input type="button" value="Cancel">
</a>
where [ActionName] is the name of the action that will return your desired view.
<img src="../../Content/css/img/btn-submit.png" class="btn-form" />
I ended up making a helper so I could reuse the cancel button. I added a js confirm in case people click the cancel button by accident after filling in the form.
#helper FormCancelButton(string cancelUrl)
{
<button type="button" class="btn" onclick="if (confirm('Cancel changes?')) location.href = '#cancelUrl';">Cancel</button>
}
I then call it like so:
#FormCancelButton(Url.Action("Index", "User" ))
If you are really keen you could try and detect the dirty state of the form too and only show the confirm dialog if the form had been changed.
<asp:Button runat="server" class="btn btn-danger"
CausesValidation="false" onclick="Cancel_Click" Text="Cancel"/>
protected void Cancel_Click(object sender, EventArgs e)
{
Response.Redirect("Test.aspx");
}