Check with textbox - javascript

I have this question. I have a input type text and a button. Like this html:
<form id="browser-form">
<div class="filebrowser">
<input type="text" id="browser-filepath">
</div>
<div class="upload submit">
Uploaden
</div>
</form>
But the question is. When the input type is empty. Je can not click on the button. When the input type is fil. Than you can click on the button. How can i fix that?
Thanks!

Assuming I've understood your question correctly, I think you want to prevent the link from doing anything unless the input has a value. If that's correct, then you can do this:
$("#browser-submit").click(function(e) {
if(!$("#browser-filepath").val()) {
e.preventDefault();
}
});
preventDefault is a method of the event object which, as the name suggests, prevents the default action of an event (in this case, following the link).
Here's a working example of the above.

function UpdateSubmitButton() {
var oTextBox = document.getElementById("browser-filepath");
var oButton = document.getElementById("browser-submit");
if(oTextBox.value == "") {
oButton.disabled = true;
}
else {
oButton.disabled = false;
}
}
Add an onchange="UpdateSubmitButton()" section to your text box, and you might want to add onload="UpdateSubmitButton()" to your document body.
This should do the trick.

Related

Replace class on clicking outside div

I have some javascript which essentially removes a class which has a background image on focus, i.e clicking in the input box (which has the background image).
The code is as follows:
$(function(){
$("#ets_gp_height").focus(function(){
if(!$(this).hasClass("minbox")) {
} else {
$(this).removeClass("minbox");
}
});
});
This works well, and removes .minbox when the user clicks within the input field, however what i want to do is if the user makes no changes to the input field, it should add the class back in as per at the beginning. At the moment, once the user clicks once, the class is gone for good, i would like it to come back if the user makes no changes to the input box, so for example clicks the input field but then clicks back out again without entering anything.
Any help? Possible?
I'm assuming you don't want the class .minBox to be added if the user has entered a value, but only if they decided not to enter anything, or chose to erase what they had entered.
To do this, you can use the blur event and check if there's anything entered:
$("#ets_gp_height").blur(function()=> {
if($(this).val().length < 1) $(this).addClass('minBox');
});
This will work for TABing out of the input and CLICKing out of it.
$(document).on("blur", "#ets_gp_height", function(){
if($(this).val() == '') {
$(this).addClass('minBox');
}
});
This code will add class 'minBox' when ever user goes out of input field without entering any value.
A working example, with and without jQuery:
Note: with onblur solution, method is called each time the field is blured, even when the value hasn't changed. with onchange solution, method is called only when the value has changed. That why onchange is a better solution.
WITHOUT JQUERY
function onChange(input){
input.value.length > 0 || setClassName(input, 'minbox') ;
}
function onFocus(input){
if(input.className == 'minbox')
{
input.className = '' ;
}
}
function setClassName(o, c){ o.className = c; }
input.minbox {background-color:red;}
<input type="text" id="ets_gp_height" class="minbox" onchange="onChange(this)" onfocus="onFocus(this)">
WITH JQUERY:
$(function(){
$("#ets_gp_height").change(function(){
$(this).val().length > 0 || $(this).addClass("minbox");
})
$("#ets_gp_height").focus(function(){
if(!$(this).hasClass("minbox")) {
} else {
$(this).removeClass("minbox");
}
});
});
input.minbox {background-color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ets_gp_height" class="minbox">

Detect when html input required true is working

I have a form
<form id="newRecord">
<input type="text" required/>
</form>
<button form="newRecord" type="submit">Submit</button>
http://codepen.io/anon/pen/EZwRjK
When the field is empty, and you click the button, you get a "Please fill out this field." pop up next to the field. Is there a way to detect if that pop up appears with JavaScript?
In HTML5, the pseudo-class :invalid is applied to any input that triggers the "This field is required" dialog box.
If you put the listener on your button, you could find out if the dialog box appeared or not by checking to see if there were any inputs marked :invalid...
$("#newRecord input[type=submit]").click(function() {
if ($("#newRecord input:invalid").length) {
//The popup appeared
} else {
//The popup did not appear
}
});
JSFiddle demo
In fact you can. You can use checkValidity() method. It returns true if the element contains a valid data.
$(function() {
$("#submit-button").click(function () {
// using jquery
console.log($("#input-text")[0].checkValidity());
// using javascript
var input = document.getElementById("input-text");
console.log(input.checkValidity());
});
});
Fiddle
Update
Seems the pop up is not showing when using type="button".
A work around I found is to use $("input").on("blur", function () { instead.
So it should be now:
$(function() {
$("input").on("blur", function () {
console.log($("#input-text")[0].checkValidity());
var input = document.getElementById("input-text");
console.log(input.checkValidity());
// checking as a whole
console.log("Form - ", $("#newRecord")[0].checkValidity());
});
});
Fiddle
REACT / NEXT.JS
In my case, it was because the 'input' tags were required and were not in the viewport (not visible) when submitting on my form.
The form was hidden when a useState was false const [isOpen, setIsOpen] = useState(false), then it was necessary to change the state to true so that the form would appear and the "fill these fields" message.
Solution was with onInvalid() property
<input onInvalid={() => setIsOpen(true)} type='radio' required />

Trigger an event on changing value in an input using JAVASCRIPT

I want to trigger a function that changes the state of my button in a webpage. My input initially looks like this:-
Now when I type something in the text box, I want it to change like this:-
Notice the call button getting activated. I am using the onblur method to listen for changes, but this does not happen dynamically. I enter something in the box, and then click outside. That is the point when onblur executes.
How do I call the onblur method as soon as the user changes the value in box?
Here is the javascript code I am using
function toggleCallButton() {
if (document.getElementById('dialArea').value == '') {
document.getElementById('callButton').classList
.add('input-group-addon-disabled');
document.getElementById('callButton').classList
.remove('input-group-addon-active');
} else {
document.getElementById('callButton').classList
.remove('input-group-addon-disabled');
document.getElementById('callButton').classList
.add('input-group-addon-active');
}
}
Have you tried this?
<input type="text" onchange="toggleCallButton();"/>
Edit:
<body>
<div>
<input id="dialArea" type="text" onkeyup="toggleCallButton();" />
<div id="callButton">Call Button</div>
</div>
</body>
CSS
.input-group-addon-disabled{
opacity: 0.5;
}
.input-group-addon-active{
opacity: 1;
}
JAVASCRIPT
function toggleCallButton() {
if (document.getElementById('dialArea').value == '') {
document.getElementById('callButton').classList.add('input-group- addon-disabled');
document.getElementById('callButton').classList.remove('input-group-addon-active');
} else {
document.getElementById('callButton').classList.remove('input-group-addon-disabled');
document.getElementById('callButton').classList.add('input-group-addon-active');
}
}
window.onload = toggleCallButton;

Avoid posting back when user clicks html button

I want to avoid posting back when user clicks an html button. because i want show one pop up using javascript. I dont want postback when the button is clicked.
function ShowEditChoicesPopup() {
// I want to show some pop up here.
$("popupdiv").show();
return false;
}
And the markup am using is:
<button onclick="javascript:ShowEditChoicesPopup();"> Edit Choices </button>
Please suggest some idea.
Apply event.preventDefault();
function ShowEditChoicesPopup(event) {
event.preventDefault();
$("popupdiv").show();
}
Try with the below code snippet.
<button onclick="javascript:return ShowEditChoicesPopup();">
OR
<button onclick="javascript:return ShowEditChoicesPopup(); return false;">
OR
<button onclick="javascript:ShowEditChoicesPopup(); return false;">
Try:
function ShowEditChoicesPopup() {
// I want to show some pop up here
$("popupdiv").show();
return false;
}
return false;
}
You need a second return false for ShowEditChoicesPopup() which should cancel form submission. This assumes the code is in a <form> block.
Use event.preventDefault(); which will prevent default behaviour of the element and performs specified function
Follow the example:
http://jsfiddle.net/guinatal/ct8uS/1/
HTML
<form>
<button onclick="return ShowEditChoicesPopup();"> Edit Choices </button>
<div id="popupdiv" style="display:none">popupdiv</div>
</form>
JS
function ShowEditChoicesPopup() {
// I want to show some pop up here
$("#popupdiv").show();
return false;
}

jquery: event for simulating live typing

Part 1:
Is there any event I can use to get a callback when the user 'change' the input field. My definition of change is to simulate the following effect. say, I want to update a label while the user typing in the input box. I tried jquery "change" event. It works, but doesn't have the live effect. Once the input field is updated, I have to click on somewhere in the screen to update the label.
Part 2:
well, if this is not a good idea, I may prevent the form being submitted on enter key. Not sure about a good way to do it either. Quick search found this answer.
<form action="" method="post" onsubmit="return false;">
not tested yet, but hopefully the submit button may still works.
EDIT: tested, and onsubmit="return false;" prevents even the submit button.
thanks,
bsr.
This should do it:
input.bind('keydown keypress', function() {
setTimeout(function() {
label.text(input.val());
}, 0);
});
Live demo: http://jsfiddle.net/simevidas/qTBxv/
Part 1
You can just update it every keyUp, but I would suggest you at least wait 1 second after the user finishes typing.
var timer;
var changeTxt = function(){
// Change label text here.
};
$("#myInput").keyup(function(){
clearTimeout(timer);
timer = setTimeout(changeTxt, 1000);
});
Part 2
That example you posted stops a form from submitting. Is that your goal?
EDIT:
I think you are trying to control the form's submission?
$("#myForm").submit(function(){
if(/* Your condition here */){
return false;
//Only if your condition is true, stop form submission
}
});
Did you try out the keydown or keypress event?
I would prefer a combination of both, form and field validation:
Find working sample here: http://jsfiddle.net/ezmilhouse/9mNc4/1/
your html:
<form method="post" action="post.php">
<input type="text" name="" value="" />
<label>Name</label>
<div></div>
</form>
your js:
// prevent form from being posted empty
$('form').live('submit', function(evt){
if ( $('input', this).val() === "" ) {
evt.preventDefault();
alert('Field is required!');
}
});
// validate form field on the fly
var min = 3;
$('input').live('keyup change', function(){
if ($(this).val().length < min) {
$('div').html('<span class="invalid">min. 3 characters.</span>');
} else {
$('div').html('<span class="valid">ok!</span>');
}
});
there is something called oninput that you can use.
<form oninput="xx.value=aa.value">
<input type="text" name="aa" value="">
<output name="xx" for="aa"> </output>
</form>

Categories