I have an HTML form with several input boxes and their corresponding enter button. When I type something in the first input box and either press Enter or the button, it works fine. But if I press Enter in the other boxes it works as if it was in the first box. The buttons work OK.
Here is the code I have:
<script type="text/javascript">
function fn (num) {
alert(num);
document.getElementById(num).focus();
}
</script>
</head>
<body>
<form>
<input id="1" type="text"></input> <button onclick="fn(1);">press</button><br/>
<input id="2" type="text"></input> <button onclick="fn(2);">press</button><br/>
<input id="3" type="text"></input> <button onclick="fn(3);">press</button><br/>
</form>
Apparently this is a 'quirk' in ECMA (I have tested in FF18.0.1 and Safari 5.1.7).
Is there a fix for this quirk?
One solution that I found is to add one form per input box.
<form>
<input id="1" type="text"></input> <button onclick="fn(1);">press</button><br/>
</form>
<form>
<input id="2" type="text"></input> <button onclick="fn(2);">press</button><br/>
</form>
<form>
<input id="3" type="text"></input> <button onclick="fn(3);">press</button><br/>
</form>
Is this a bug or a feature? Is there a better solution?
Thanks for any suggestions.
You'll want to use onKeyPress instead of onClick. Try this:
function myKeyPress(args) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
// do something here (enter has been pressed)
}
else {
return false; // somehow prevents "default" form behaviors
}
}
Try this :
$("id").keypress(function(e) {
if(e.which == 13) {
respective functions
}
});
or
<input type="text" name="q" id="q"
onkeypress="if (event.keyCode == 13) {call function}" />
Related
Currently, I have a form that calls a method in my controller. It sends a string as a parameter to my IActionResult (the string is always a numer since I am getting it from an input of type range between 1 and 12). The method looks like this: public IActionResult ChangeForecastMonths(string forecastMonths) The code in my view is the following:
<form asp-action="ChangeForecastMonths">
<input asp-for="FutureForecastMonths" name="forecastMonths" type="range" class="custom-range" min="1" max="12" step="1" />
<input type="submit" value="Save" class="btn btn-primary" />
</form>
What I'm trying to do is -- instead of the ChangeForecastMonths method being called whenever the submit button is clicked -- to actually have it called whenever the input field changes its value.
You could hook to the change() event of the input, then fire a submit() on the parent form, like this:
<form asp-action="ChangeForecastMonths">
<input asp-for="FutureForecastMonths" name="forecastMonths" type="range" class="custom-range" min="1" max="12" step="1" />
<input type="submit" value="Save" class="btn btn-primary" />
</form>
#section Scripts
{
<script>
$('form input').change(function() {
$(this).closest('form').submit();
});
</script>
}
Result:
I currently have autocomplete functionality on the results page using Google custom search, but how can I see autocomplete display in a separate custom search box?
<script type="text/javascript">
$(document).ready(function () {
$("#googleCseSearchTextBox").keypress(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) { //Enter keycode
googleCseSubmit();
return false;
}
});
$("#googleCseSearchButton").click(googleCseSubmit);
});
function googleCseSubmit() {
window.location.href = "my site and key" + $('<div/>').text($("#googleCseSearchTextBox").val()).html();
};
</script>
Custom search box:
<div>
<fieldset class="sfsearchBox">
<input name="googleCseSearchTextBox" type="text" id="googleCseSearchTextBox" class="sfsearchTxt" />
<input type="button" value="Search" id="googleCseSearchButton" class="sfsearchSubmit" />
</fieldset>
</div>
Thanks
Insert this code on the your first page for autocompletion. Don't forget to add your own google id below.
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function(){
google.search.CustomSearchControl.attachAutoCompletion(
'your-google-search-id',
document.getElementById('search-field'),
'search-form');
});
</script>
<!-- example search form -->
<form id="search-form" action="/search">
<input id="search-field" name="search-field" type="text" />
<input type="submit" value="Search" />
</form>
Also check here for more reference
https://developers.google.com/web-search/docs/
So i have a form that has two submit buttons, but for each i want to validate different fields, in this case when i click on the preview submit button i want to ignore 3 fields, while in the 'normal' submit button i want to validate all. Is this possible?
Here's some html:
<form class="form" role="form" id="searchesForm">
<input class="form-control" type="text" id="name" name="name"/>
<input class="form-control" type="text" id="widgetWidth" name="widgetWidth" />
<input class="form-control" type="text" id="widgetHeight" name="widgetHeight" />
<!-- More fields validated for both button clicks-->
...
<button type="button" id="preview" name="previewSearch" class="btn btn-default" >
Preview
</button>
<button type="submit" id="submit" name="submitSave" class="btn btn-primary">
Save
</button>
</form>
So the idea is that when i press the preview button these 3 fields(name, widgetWidth and widgetHeight)
should be ignored, but not when i press the save button.
Here's my bootstrap validator:
$('#searchesForm').bootstrapValidator({
excluded: ['td>select,td>input,td>textarea'],
feedbackIcons:{
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
live:'submitted',
submitButtons:'[type="submit"]',
fields: {
name: {
validators: {
notEmpty: {
enabled:function(){
debugger;
alert("testes");
},
message: 'The question required and cannot be empty'
}
}
}
}
}).on('success.form.bv',function(e){
// Prevent form submission
e.preventDefault();
//check which button was pressed
var button=$(e.target).data('bootstrapValidator').getSubmitButton();
if($(button).attr("id")==="preview"){
previewSearch();//do ajax stuff
}else{
saveSearch();//do ajax stuff
}
}).on('error.form.bv',function(e){
var invalidFields=$(e.target).data('bootstrapValidator').getInvalidFields();
//show tab for specific fields location
$.each(invalidFields,function(index,value){
if($("#filtros").has(value).length > 0){
$('#tabs li:eq(0) a').tab('show')
}
if($("#resultado").has(value).length > 0){
$('#tabs li:eq(1) a').tab('show')
}
if($("#widget").has(value).length > 0){
$('#tabs li:eq(2) a').tab('show')
}
});
}).on('status.field.bv', function (e, data) {
if (data.bv.getSubmitButton()) {
data.bv.disableSubmitButtons(false);
}
if(data.bv.getSubmitButton()) {
if (data.bv.getSubmitButton().attr("id") === "preview"){
if (data.field === "name" || data.field === "widgetWidth" || data.field === "widgetHeight") {
data.bv.$form.bootstrapValidator('enableFieldValidators', data.field, 'notEmpty', false);
}
}else{
data.bv.$form.bootstrapValidator('enableFieldValidators', data.field, 'notEmpty', true);
}
}
});
I don't really know where can we enable/disable the field validator according to the button pressed. i tried to change the status of the fields validator on the .on('status.field.bv'...) method but it doesn't work completely.
Also the submitButtons don't seem to work if i choose something other than "type=submit".
So has anyone come up with this situation?
I have a Form and i want to disable the entire form on click of a Button ,please see this code
<div dojoType="dijit.form.Form" id="myForm" jsId="myForm" encType="multipart/form-data"
action="" method="">
<table>
<input type="text" id="name" name="name" required="true" dojoType="dijit.form.ValidationTextBox"
<input type="text" id="dob" name="dob" dojoType="dijit.form.DateTextBox"
</table>
<button dojoType="dijit.form.Button" type=button onClick="console.log(myForm.getValues())">
Get Values from form!
</button>
<button dojoType="dijit.form.Button" type="submit" name="submitButton"
value="Submit">
Submit
</button>
<button dojoType="dijit.form.Button" type="reset">
Reset
</button>
<button dojoType="dijit.form.Button" onClick="callMe()">
Disable IT
</button>
</div>
I have written a function callMe to disable this
function callMe()
{
dijit.byId('myForm').disabled=true;
}
Dijit forms do not have a property "disabled", but rather you have to overwrite the onSubmit event:
dijit.byId('myForm').onSubmit = function () {
// If we return false here, the form will not be submitted.
return myMagicEnabledFlag;
};
Note that you cannot use dojo.connect as you have to modify the return value of the event and not just connect to it.
For disabling the entire form elements, use the "getChildren()" function of the dijit form, which would return the array of all the field widgets of that corresponding form. Then, you need to disable the widgets of that array. See below sample:-
dijit.byId('myForm').onSubmit = function () {
var widgets = dijit.byId('myForm').getChildren();
for(var i=0;i<widgets.length;i++) {
widgets[i].set('disabled', true);
}
//if you need to prevent the form submission & just disable, return false,
//else ignore the following return stmt
return false;
};
I have a jquery mobile site with a html form consisting of 4 pin entry input boxes. I want the user to be able to enter a pin in each input field without having to press the iphone keyboards "next" button. I have tried the following and although it appears to set the focus to the second input and insert the value, the keyboard disappears so the user still has to activate the required input with a tap event.
$('#txtPin1').keypress(function() {
$('#txtPin1').bind('change', function(){
$("#txtPin1").val($("#txtPin1").val());
});
$("#txtPin2").focus();
$("#txtPin2").val('pin2');
});
Is there a different event that I should be assigning to $("#txtPin2")?
I have tried to implement http://jqueryminute.com/set-focus-to-the-next-input-field-with-jquery/ this also, but I found that it worked for android and not for iphone.
Any help is greatly appreciate it.
Live Example: http://jsfiddle.net/Q3Ap8/22/
JS:
$('.txtPin').keypress(function() {
var value = $(this).val();
// Let's say it's a four digit pin number
// Value starts at zero
if(value.length >= 3) {
var inputs = $(this).closest('form').find(':input');
inputs.eq( inputs.index(this)+ 1 ).focus();
}
});
HTML:
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="content">
<form id="autoTab">
<label for="name">Text Pin #1:</label>
<input type="text" name="txtPin1" id="txtPin1" value="" class="txtPin" placeholder="Please enter Pin #1"/>
<br />
<label for="name">Text Pin #2:</label>
<input type="text" name="txtPin2" id="txtPin2" value="" class="txtPin" placeholder="Please enter Pin #2"/>
<br />
<label for="name">Text Pin #3:</label>
<input type="text" name="txtPin3" id="txtPin3" value="" class="txtPin" placeholder="Please enter Pin #3"/>
<br />
<label for="name">Text Pin #4:</label>
<input type="text" name="txtPin4" id="txtPin4" value="" class="txtPin" placeholder="Please enter Pin #4" maxlength="4"/>
</form>
</div>
</div>
I tried it on android and it works. I can not check it on iPhone.
Check this: http://jsfiddle.net/Q3Ap8/276/ [direct link: http://fiddle.jshell.net/Q3Ap8/276/show/ ]
$('.txtPin').keydown(function() {
that=this;
setTimeout(function(){
var value = $(that).val();
if(value.length > 3) {
$(that).next().next().next().focus().tap();
}
},0);
});
Other solution that works for android is:
http://jsfiddle.net/Q3Ap8/277/ [ http://jsfiddle.net/Q3Ap8/277/show ]
$('.txtPin').keydown(function() {
that=this;
setTimeout(function(){
var value = $(that).val();
if(value.length > 3) {
$(that).next().next().next().click();
}
},0);
});
$('.txtPin').click(function() {
$(this).focus().tap();
});