I have a html form with a select, button and an input element.
<form action="">
<button>innocent button</button>
<select multiple name="multiple">
<option selected value="a">A</option>
<option value="b">B</option>
</select>
<input style="width:300px" type="text" value="press here enter and look at the multiple select" name="" />
</form>
and some jquery javascript
$(document).ready(function(){
console.log('hi');
var $button = $('button');
$button.on('click',function(e){
$('select option').first().attr('selected',false);
e.preventDefault();
});
Demo: try it here:
http://jsfiddle.net/3Rjdh/
On Chrome everything is okay.
But on Firefox:
If you press ENTER in the input field, the select element loses it's selected.
What is wrong with Firefox?
When you press enter on the input, you are effectively firing the click event of the button, trying putting a conole.log in there and you'd see it fire
You can stop the submission by doing something this
function stopSubmit(e){
e = e || event;
return (e.keyCode || event.which || event.charCode || 0) !== 13;
}
Then in your form add the event for keypress
<form onkeypress="return stopSubmit(event)">
See the updated fiddle
I think, I fixed it by adding the attribute type with value button
http://jsfiddle.net/3Rjdh/2/
Related
I want to empty the input value when another input value has changed.
I tried this code, but not working yet. Any idea to solve this issue?
Thanks in advance.
<div class="continer">
<input type="text" class="type" id="type" value="">
<input type="text" class="model" id="model" value="">
</div>
<script>
$("#type").on('keydown', function() {
var key = event.keyCode || event.charCode;
if( key == 8 || key == 46 )
$("#model").empty();
});
</script>
you can use change event to trigger the change event and .val() method to set the value of the other inputs , like that
<script>
$("#type").on('change', function() {
$("#model").val("");
});
</script>
I made a form with an imput text and a select.
To submit the form i want the user to click a verify button in order to check if all fields are correctly filed.
If it is then the button submit who was initialy disabled is now enable.
Here is the problem, i'd like that if the user modify anything in the form again then the button turn back to disable so that he must verify again to submit.
To do so i'd like to find a jQuery event that triggers on any event on my form to turn back the submit button to disable again.
Any idea of how could i do ?
You can use the form (delegateTarget) then from that select the input types (https://stackoverflow.com/a/3165569/125981) that you wish to be in scope to attach event hanlders, and disable those desired by there type. Since it IS possible to have multiple I have included and example with two submit buttons that are and a reset button that is NOT disabled. To reverse that, you would need to have some way to clear them out so I added an example of a custom event.
Added a reset event handler since it may come into play here.
$('#myform').on('change keyup', 'input[type="text"], select', function(event) {
$(event.delegateTarget).find('input[type="submit"]').each(function() {
console.log("disable:", this);
this.disabled = true;
});
})
.on('all-clear', function(event) {
$(event.delegateTarget).find('input[type="submit"]').each(function() {
this.disabled = false;
});
})
.on('click', '#allclear', function(event) {
$(event.delegateTarget).trigger('all-clear');
})
.on('reset', function(event){
// do whatever is desired on the reset of the form
});
.find('input[type="text"]').trigger('change'); //IF you want disabled initially
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form id="myform">
<input type="text" value="text stuff" />
<select>
<option value="option1" selected="selected">First Option</option>
<option value="option2">Another Option</option>
</select>
<input type="submit" value="Submit" />
<input type="submit" value="Possible Submit" />
<input type="reset" value="Reset" />
<button id="allclear" type="button">All clear</button>
</form>
You need to trigger the event with the on Change function of jQuery. You have to assign it to every input field / Select or whatever, or give them all the same class.
Here is a Doc
Example:
<form>
<input class="target" type="text" value="Field 1">
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<div id="other">
Trigger the handler
</div>
Script:
$( ".target" ).change(function() {
alert( "Handler for .change() called." );
});
If you provide any sample Code, we'd be able to help you even more.
This is my html,When i click option "new-item" it will open input type box , and then i enter value it want to add to select option
<form (submit)="addItem()">
<input type="text" [(ngModel)]="add.name" name="name">
<input type="text" [(ngModel)]="add.price" name="price">
<input type="text" [(ngModel)]="add.description" name="description">
<select [(ngModel)]="add.type" name="room-type">
<option [value]="c">Select</option>
<option>BreakFast</option>
<option>Lunch</option>
<option>Dinner</option>
<option><button (click)="addSelect()">Add-item</button></option>
<input *ngIf='edited' type="text" >
</select>
and my type script is,
addSelect() {
this.edited = true;
}
constructor() {
this.edited = false;
}
You can't add such an event to an <option>.
You can see that the event doesn't fire in all browsers (the only browsers it works in is < ie11 and Firefox):
$("#trig").click((event) => console.log(event));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>default</option>
<option id="trig">trigger</option>
</select>
The tag does not propagate down any click events. So any click events you try and allocate inside an option will not work. Your best bet is to look at the value you receive in the onChange() callback and then turn on another component which allows the user to enter data. You could even use a window.prompt() to get such data.
You can instead do this:
<select (change)="onChange($event.target.value)">
onChange(val) {
console.log(val);
this.edited = false;
}
For further information on implementing this approach, see: How can I get new selection in "select" in Angular 2?
$("#football_players").bind('input', function (ev) {
alert("I want to know what is event launcher");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<datalist id="datalist_football_players">
<option value="Maradona" />
<option value="Pele" />
<option value="Platini" />
<option value="Cruif" />
<option value="Messie" />
</datalist>
<input id="football_players" list="datalist_football_players" />
I have a datalist for giving autosuggestion to an input text and I would like to know when an item of that Datalist has been clicked, I can do it thanks to event input like that:
HTML:
<datalist id="datalist_football_players">
<option value="Maradona" />
<option value="Pele" />
<option value="Platini" />
<option value="Cruif" />
<option value="Messie" />
</datalist>
<input id="football_players" list="datalist_football_players" />
JS:
$("#football_players").bind('input', function (ev) {
console.log("input event has been launched by click or by key press??");
});
Unfortunately Key press already launch the event input and I cannot know if event input has been launched by click or key press
Do you know a way to determine and if yes a way to know which key has been pressed?
You may catch by checking event by binding appropriate events on appropriate target..
When a textbox have some typed values and then click is done , then a backspace keydown event is triggered too
So try following -
var eventKey=null;
$("#football_players").bind('keydown', function (ev) {
eventKey=ev.which;
});
$("#football_players").bind('input', function (ev) {
if(eventKey==null || (""==$(this).val() && eventKey==8 ))
console.log("click");
else
console.log("key pressed"+eventKey);
eventKey=null;
});
LIVE http://jsfiddle.net/mailmerohit5/q9dy5xL0/
I am trying to prevent enter from being pressed and then fake click a button in jquery but I can't seem to fetch the parent of the key press. It is working to prevent the key press though. The alert is giving me '#undefined' when it should be '#(number)'
$('.noEnterSubmit').keypress(
function(e) {
if ( e.which == 13 ) {
e.preventDefault();
alert('#'+$(this).parent().attr('id'));
}
});
Below is the HTML button
<input type="text" id="242Quantity" button="242" class="noEnterSubmit" STYLE="font-size:10pt;text-align:right;font-weight: normal;" autocomplete="off" name="QUANTITY" size="1">
It does work . try this jsfiddle . Enter on the input box
<div id="rSubmit">
<input class="noEnterSubmit"></input>
</div>
http://jsfiddle.net/jspatel/5R6tQ/
Hope this helps