This question already has answers here:
Events on PHP. Is it possible?
(6 answers)
Closed 9 years ago.
I'd like to know what is the thing similar to C# event handlers in PHP.
e.g. When a button is clicked, every functions attached to the event on click are called.
There is nothing like this out of the box in PHP, but there is a framework called PRADO which tries to bring event-driven development to PHP.
In PHP you make use of isset to see if a button was clicked. For instance:
if (isset($_POST['button'])) {
$Variable = $_POST['button'];
}
The button then looks like this in HTML
<input type="submit" name="button" value="ButtonName">
In web development this is managed by client side. So it's not PHP which check user action, it's javascript and HTML.
you can bind HTML to PHP action with HTML tags <form> and <a>.
For pure JavaScript events, you can start to check this MDN documentation
There is lots of JS libraries built to ease event management like jQuery.
You can either use Javascript events triggered by the html tag onclick. Have a look at this if you choose to use that way.
<button onclick="myFunction()">Click me</button>
You can alo use jQuery to trigger various events for example. Have a look at this.
If you choose to use this solution you can also trigger various ajax based functions.
$('button').click()
But if you want to trigger serversided events you need to add a form and submit the values to a php script for example:
<?php
if(isset($_POST['someVal'])){
echo "Hello";
}
?>
<form action="" method="post">
<input type="text" name="someVal" />
<input type="submit" value="send" />
</form>
Related
I've got a HTML input in my asp.net page:
<input type="file" name="image" accept="image/*" id="AttachMe">
This is all fine and dandy - it opens the file browse dialog etc.
However, what I would like to do is:
1 - make this invisible (if at all possible - if not I can just move it elsewhere in the page)
2 - trigger this from codebehind
I've got multiple rows in a datalist, each with a button on. The button loads up the relevant bit in C# which finds out which row we've pressed the button on. I then want it to load up the HTML file input.
Unfortunately, I can't simply put the HTML input in each row as we're talking about mobile handsets and space is limited (I tried). Plus I'd like to get the URL of the selected file (I think that's pretty easy to get anyway).
But mainly, I need to know just how to trigger the HTML file input from C# - so I can basically click the button and C# will then trigger the HTML file input for me.
EDIT - this is the code I now have:
My FileUpload:
<asp:FileUpload id="FileUploadControl" runat="server" />
The script to call it:
<script type="text/javascript">
function AttachAFile() {
document.getElementById('<%= FileUploadControl.ClientID %>').click();
}
</script>
This script is called from within the C# codebehind. It is called (I've tried it with alerts and calling other buttons).
However, it's still not calling the FileUploadControl for some reason. Anyone any ideas? I've come across similar topics which all seem to have worked out doing exactly the same as I'm doing (and the FileUploadControl does work on its own).
I've just begin work on a mobile version for one of my sites.
I've set up my sign up form for my users.
It worked fine and the CSS styled it correctly.
#using (Html.BeginForm("XXX", "Registration", FormMethod.Post, new { #class = "twitter-sign-in-container" }))
{
<input type="submit" name="twitter-button" value="Sign in with Twitter" id="twitter-button" />
}
Once I added Jquery mobile to the project if found that random unstyled text started to show up.
On inspection I found that all input submits where being wrapped in new tags and adding un tagged text == to the inputs "Value":
<form action="/registration/xxx" class="twitter-sign-in-container" method="post">
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
"Sign in with Twitter"
<input type="submit" name="twitter-button" value="Sign in with Twitter" id="twitter-button">
</div>
</form>
Does anyone have any clue as to why the "sign up with twitter" text is being added, and how i stop it?
P.S Less important but I'd also like to know why Jquery wraps form contents in the bellow div.
First, let me give you general advice, before using any framework (at least for the first time) you should at least look at frameworks official documentation. In this case it would save you time from posting this question.
Now let me answer your question. jQuery Mobile, just like many other mobile frameworks, has its own set of widgets, including customized form elements. What you see is just jQuery Mobile replacement for common button. It is much easier to create fully responsive button from scratch then to change preexisting form element. I can't think of any jQuery Mobile element/widget which is done directly on native HTML element.
If you don't like this look and feel you can easily disable it by adding data-role="none" to your input button. Take a look here if you want to see a difference: http://jsfiddle.net/Gajotres/vds2U/83/
Classic:
<input type="submit" name="twitter-button" value="Sign in with Twitter" id="twitter-button" data-role="none"/>
jQuery Mobile styled:
<input type="submit" name="twitter-button" value="Sign in with Twitter" id="twitter-button"/>
Of course there are other methods of markup enhancement prevention but it is not point of this question, if you want to find out more then take a look here (search for chapter called: Methods of markup enhancement prevention).
Regarding your last question, not all content is wrapped in this kind of a div container (.ui-button), there are many many other. Take a look here if you want to see other possible form/page elements (widgets).
I believe jQuery Mobile does this for accessibility reasons:
From here:
For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful label. To hide labels in a way that leaves them visible to assistive technologies — for example, when letting an element's placeholder attribute serve as a label — apply the helper class ui-hidden-accessible to the label itself:
<label for="username" class="ui-hidden-accessible">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username"/>
Also, from here:
To collect standard alphanumeric text, use an input with a type="text" attribute. Set the for attribute of the label to match the id of the input so they are semantically associated. It's possible to accessibly hide the label if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.
I am working on a webforms project using c#/aspx/jquery. I'm not sure where to handle my Onclick. Both options (doing it in C# or jquery) seem feasible. Which would be better practice?
Here is the scenario:
I want to build a checkbox which will toggle a textbox's textmode, altering it between Password and SingleLine.
Currently, I have this following code for my markup since I am currently handling it in C#:
<asp:Checkbox ID="CheckBox1" OnCheckedChanged="CheckBox1_OnCheckedChanged"/>
The code:
protected virtual void OnCheckedChange(EventArgs e)
{
If (CheckBox1.TextMode == TextMode.Password)
CheckBox1.TextMode = TextMode.SingleLine;
else
CheckBox1.TextMode = TextMode.Password;
}
The use case of this is: A user is entering his password. On the same page, he may choose to keep the password hidden or not by checking the checkbox.
Which would be better practice?
What is your functional requirement?
Setting this in C# on the asp.net code behind, you will need a post-back to make it work. This means the page will refresh and the text box will change.
On the client (JS/JQuery) the page will not refresh.
Now you evaluate the work required vs the quality you need. (If you want a nice user experience and are ok with writing JS put it in JS, if you're strapped for time and are ok with the refresh then do it on asp.net).
I'm trying to answer your question in general sense about HOW such a decision (in my humble opinion) should be made. Realistically this is very simple to implement in javascript and your should do it there.
Now for the code (I assume you know how to put it in asp.net code behind so I'm going to write the JS approach):
Html:
My Password: <input type="password" id="mytext" /> <br />
Hide Chars : <input id="passChk" type="checkbox" checked="true" />
Javascript:
$(function() {
$("#passChk").change(function(){
if(this.checked) {
$("#mytext").attr("type","password");
} else {
$("#mytext").attr("type","text");
}
});
});
See it running here: http://jsfiddle.net/rC5NW/2/
After trying to implement the accepted answer, I realized that some browsers (I used Google Chrome) does not allow changing the type attribute. There is a way to bypass this but I don't think it is worth it for my purposes:
Therefore, It might be better to just use C#.
Relevant Questions
Does javascript forbid changing the input type from password or to password?
change type of input field with jQuery
I'm trying to write a small program in C# to calculate a equation with a few known variables. A few textboxes (where each variable need to be typed) and a single "calculate" button.
What I'm trying to implement now is that my keyboard cursor is active in a selected textbox when the program starts.
But I can't figure it out.
Hope someone can help me.
For Winforms : View > Tab Order. Set tab order of start textbox to 0.
write this in your head tag
<script type='text/javascript'>
document.getElementById('txtName').focus();
</script>
I see, you forgot to write down your C# (when i post my first answer).
If you're using C# it would be lot easier thank HTML or PHP.
Simply type this in form_load() :
<your textboxname>.Focus()
Example :
TextBox1.Focus()
You can set up the order of focus with tabindex
e.g.
<input id="thing" tabindex="1" />
tabindex is ordinal. When set, the element with the lowest tab index value will be the first to gain focus.
You can also use tabindex to ensure the next element that the user will hit if he or she presses tab.
You can do that using JQuery.
Simple use that code:
$('#TextBox').focus();
where the TextBox is a ID from your TextBox Control.
I hope that helps.
So, what programming language that you are using?
In php you could use simple javascript :
<form>
<input type="text" id="mytext1" name="mytext1" value="1"><br>
<input type="text" id="mytext2" name="mytext2" value="2"><br>
<input type="text" id="mytext3" name="mytext3" value="3"><br>
</form>
<script language="javascript" type="text/javascript">
var mytext = document.getElementById("mytext1");
mytext.focus();
</script>
when you load the page it would be focused on "mytext1"
Hope this helpful
I am working on an WebForms app, and we want to put a speed bump, for lack of a better term, in for the users at a particular point in the app. There is a particular action which is not supposed to be undone. So when they click the button to do that action we want to display a small confirmation window, have them enter a random string that we give them. Once they enter that string, and it matches the corresponding label, the submit button becomes enablesand they can perform the action. But for the life of me I can't figure out a good way to do this client side with WebForms. Is there a simple mechanism to use this type of workflow without a ton of post back events?
Note: This is an internal app where high security isn't truly a necessary requirement in this case. As I said, this is meant to be something to slow the user down slightly.
This is similar to the mint.com confimration style.
Add JavaScript to the textbox onChange or onKeyUp event, there do your check and enable the button.
For example:
<script type="text/javascript">
function checkConfirmationText(){
// Check if value of entered text = value of hidden text
var isOk = document.getElementById('confirmation-label').value == document.getElementById('confirmation-text').value);
// Show/Hide button depending on the text
document.getElementById('btn-submit').style.dispaly = isOk ? '' : 'none';
}
</script>
<!-- HTML -->
<input type="hidden" id="confirmation-label" value="DELETE" />
Enter "DELETE": <input type="text" id="confirmation-text" value="" onkeyup="checkConfirmationText()" />
<input type="submit" id="btn-submit" style="display:none" />
You could generate the javascript method to check the code (including the code in the method) server side and use registerclientscriptblock (or whatever the current method is), then use the onblur to call that method.