For Example :
in a webpage if the user press Enter key from the keyboard a certain web button will be pressed.
Suppose there are 3 web button in a web layout namely Next,Previous,reset.
I want if the user press enter key the Next button action will be done.
if press the backspace then previous web button action will be done.
Please I want to implement this in PHP.
Full code and description.
This is no posible with PHP. PHP is server side langue, this means the code only runs on the server not the client side. To do this you will something like javascript and jQuery.
Example in jQuery:
$(document).keydown(function(e) {
if(e.which == 13) {
// enter pressed
}
});
Here's a list of key values
$(document).keydown(function(e) {
var keyPressed = e.which || evt.keyCode;
if (keyPressed==13)
{
console.log(keyPressed)
alert("your next acction")
}
if(keyPressed==8)
{
console.log(keyPressed)
alert("Your previous action");
}
})
This can be done by checking the keypress event in javascript.
$(document).on('keypress',fieldId, function(evt){
var keyPressed = evt.which || evt.keyCode;
if (keyPressed == ascii value of the keyboard button) {
// do something
}
});
The enter button value is 13.
Newer browsers support an autofocus attribute.
<form action=http://google.com>
<input value=yes type=submit autofocus>
</form>
This is just HTML, no PHP required, but you could echo this out.
Related
<form action="" method="POST">
<input type="text" name="phonenumber" value="" />
<form>
If there is something written in the input text field and the user start to delete the string meaning the last letter of the string I want to do something.
So something like this:
if(user deletes last letter of isset($_POST['phonenumber'])){
//do something
}
I tried to use strlen() with -1 but did not seem to work. Anyone have any ideas?
Thank you!
You should use javascript to do something when user is deleting char.
One way is to listen to 'keyup' event of the text input. E.g.:
<script>
$(":text[name=phonenumber]").on('keyup', function(event){
if (event.keyCode == 8){ // means BACKSPACE pressed
// do something
}
});
</script>
you can get it by using javascript. on every keyup you have to count the textbox value by id if it is decreasing from the max count means user is deleting some text..
you should use javascript with event keyup ,
jQuery(function($) {
$('input[name=phonenumber]').on('keyup', function(e) {
if(e.keyCode == 46)
{
$.ajax({
type: 'POST',
url : 'url',
data :{'phonenumber': $('input[name=phonenumber]').val()},});
}
});
});
I need some help with making the following code work properly:
$('#entry').keydown(function(e) {
alert(e.keyCode);
});
With this textarea field:
<textarea id="entry" placeholder="Type message here"></textarea>
I have checked with adding alerts outside of the brackets, and the document is loaded and works fine. I even extract a series of entries from a database right after this, with no errors.
What I'm looking to cook here is a textfield that when pressing Enter simply sends the .val() of the field to another function responsible for the AJAX request. But obviously I can't get there when I cannot enter the function.
$(function() {
$('#entry').on('keyup', function(e) {
if (e.which == 13) someotherFunction(this.value);
});
});
FIDDLE
Try:
$('#entry').live('keydown',function(e) {
alert(e.keyCode);
});
Does anyone know how to disable the Enter keypress event of a zend element text input control? When a user presses Enter on a form element it tries to post, which I want to disable.
This is something you'll need to do client side (i.e. with Javascript). With Dojo it would be something like:
dojo.connect(dojo.byId('FIELDID'), 'onkeydown', function(event){
if (event.keyCode == dojo.keys.ENTER) {
dojo.stopEvent(event);
}
});
replace 'FIELDID' with the ID of the text field you want to hook this into. You could combine this with a dojo.query call if you want to apply it to everything in the form.
jQuery and the other JS frameworks will have an equivalent.
I think this Should solve your problem
$textField = new Zend_Form_Element_Text("text");
$textField->setAttrib('onkeypress', 'nullifyEnterKey();');
function nullifyEnterKey(e)
{
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
return (key != 13);
}
This has got to be easier than I'm making it. I ahve a form that has an onclick action, it runs js that submits the form value to another page. How do I allow users to press return to perform the same action? I've tried some onkeypress stuff, but nothing has worked. Below is the form, and the js being run.
Thanks!
**updated code to reflect more of what I am trying to do..
<script type="text/javascript">
function getQueryValue(name) {
var match = (new RegExp('[?&;]' + name + '=([^&;#]*)')).exec(document.URL);
return match ? unescape(match[1]) : null;
}
var ext = "&ext="+getQueryValue('ext');
</script>
<script src="prototype.js"></script>
<script type="text/javascript">
function checkSubmit(e)
{
if(e && e.keyCode == 13) // if key is enter
{
doSubmit(); // call your submit function
}
}
</script>
</head>
<body>
<div id="dialNumber_form">
<form id="dialer" style="margin-bottom:0;">
<input id="numberBox" name="outnumber" onKeyUp="checkSubmit(event)" type="text">
<input id="submitButton" onsubmit="dosubmit()" type="button"/>
</form>
<div class="clear"></div>
</div>
<div id="success">
</div>
<script type="text/javascript">
function dosubmit( ) {
var par = $('dialer').serialize();
var url = par + ext;
new Ajax.Updater('success', 'dial.php', { method: 'post' , parameters: url , evalScripts: true } );
$('dialer').reset();
}
</script>
</body>
dial.php is taking the number you enter in the field, checking that it's valid, and sending it to our PBX to be dialed. This works, assuming you click the submit button. If you press return (even with the updated code, as recommended below), the page refreshes, and the contents of the outnumber box are posted as GET URL variable, rather than being sent to the dosubmit action. When the form works, you see it stay as it was originally built (dialout.htm?ext={extension number})
Thanks for all the responses. Let me try some of your suggestions, and I'll get back to you.
Not sure I'm clear in what I need to accomplish. This entire thing is being run in an iframe that is passed URL variables. I have no control over that piece, so I need to work with what I've got. When a user opens it, the URL would look something like .../dialout.htm?ext=1234. The extension is used, along with the number entered into the outnumber box, to place a call (system dials extension first, then outnumber). They should be passed to dial.php for processing, and if everything is good, a success response is sent back with the results (and the call is made). This works great if the dial button is clicked. The page does not refresh, and after a short delay, the success box pops up and a call is placed. If enter is pressed, the form refreshes, and the URL changes to .../dialout.htm?outnumber=<number>. I want enter to do what clicking the dial button does. Nothing i've tried here really works for that (unless I'm just really slow..). Any ideas?
You should make your submit button <input type="submit" id="submitButton" etc> then attach an onsubmit handler. jQuery:
$("#dialer").submit(function() {
var result = doMyStuff();
if (result > 10) {
return false; // prevent the submit
}
else {
return true; // allow the submit to happen
}
});
See the jQuery .submit() docs.
Returning false prevents the submit from occurring, true allows it. (I normally wouldn't put a "return false else return true" (return (result<=10);) but wanted to make the true/false sumbit control explicit)
When using AJAX to do the submit you'd want to return false so the normal submit is suppressed.
Update:
Returning false to stop default event processing is, these days, mostly deprecated. Using preventDefault() is generally preferred. This would change my example to be:
$("#dialer").submit(function(event) {
var result = doMyStuff();
if (result > 10) {
event.preventDefault(); // prevent the form submit
}
});
The keyDown / keyUp listener should be on the input not the submit button
<input id="numberBox" name="outnumber" onKeyUp="checkSubmit(event)" type="text">
function checkSubmit(e)
{
if(e && e.keyCode == 13) // if key is enter
{
doSubmit(); // call your submit function
}
}
Working example : http://jsfiddle.net/sVnMy/
This will listen to key presses on the input field and when the enter key is pressed it will submit the form
How can I disable the submit button until the chars of a textarea are more than 100 chars?
This is a code used to check if the user has selected to upload an image. Please inform me how should I name my textarea and guide me through the installation of it.
$(function() {
$('form').submit(function() {
if(!$("form input[type=file]").val()) {
alert('You must select a file!');
return false;
}
});
});
First of, make the submit button disabled, eg.
<input type="submit" disabled="disabled" id="submitid" />
Next you should write a function that will count the length of the textarea while the user is writing, this could be done by using the keyup function in jQuery or onkeyup in plain Javascript.
Example in jQuery:
$("#textareaid").keyup(function () {
if((this).val().length > 100) {
$("#submitid").removeAttr('disabled');
} else {
$("#submitid").attr("disabled", "disabled");
}
});
Note: code not tested.
SetInterval approach:
setInterval(function () {
if($("#textareaId").val().length > 100) {
$("#submitid").removeAttr("disabled");
} else {
$("#submitid").attr("disabled", "disabled");
}
}, 500); //Runs every 0.5s
Full size example:
<form>
<textarea id="textareaId"></textarea>
<input type="submit" id="submitId" disabled="disabled" />
</form>
<script type="text/javascript">
setInterval(function () {
if($("#textareaId").val().length > 100) {
$("#submitId").removeAttr("disabled");
} else {
$("#submitId").attr("disabled", "disabled");
}
}, 500); //Runs every 0.5s
</script>
You can either update the status of the submit button every time the data within the text area is changed, however this can be problematic as each browser has different events for textareas (in javascript)
A common way to do it is by setting an interval to check the submit box, then based on that decide the boolean value for the button. For instance
window.setInterval(function(){ $('#submitBtn').disabled = $("#textArea").val().length < 100 }, 100);
(Code not tested)
Users much prefer it if the number of characters in textarea is validated on submit. If it's less than 100, cancel the submit and give the user an error message saying why. Presumably there's a hint on the page so the user should know of the 100 character criterion and how many characters they've entered.
If you really want the button disabled, then disable it using script when the page loads. Use a key-up listener to count the characters in the textarea and enable the submit button if there's more than 100. You may need to listed to other events too so if the user changes the text by dragging or paste, then the submit button's disabled property is updated appropriately.
Building on Minitech's rather terse answer:
$(function() {
$('form').submit(function() {
if(!$("form input[type=file]").val()) {
alert('You must select a file!');
return false;
}
if($("#theTextArea").val().length <= 100) {
alert("You must enter more than 100 characters!");
return false;
}
});
});
Just replace theTextArea with the id of the specific textarea you want to test