I have a problem with javscript. I was wonder is it possible to create something like this in javascript:
<script>
function all_is_filled(){
if($('input[type=checkbox]').checked && document.getElementById('text_field').value!="" )
{
//do something...
}
}
</script>
So when someone check checkbox and fill text_field then this do something...Is there a way to do it?
This will work:
function all_is_filled() {
if ($('input[type=checkbox]').prop('checked') == true && $('#text_field').value != "") {
//do something...
}
};
$('#myform').on('change', function () {
all_is_filled()
});
I added a listen function to call all_is_filled() on change, but you can also put it onsubmit.
Simple demo HERE
Related
I have a jQuery event inside a JavaScript function. I've already read that you cannot access the inner function. However, I would like to know how to adjust my code so that the parent function returns true or false depending on the jQuery function.
function validate() {
$("#button").on('click', function(){
var input = document.forms["formular"]["text"].value;
if (input == "") {
return false;
}
});
if(onclickfunction() == true){
return true;
}
else{
return false
}
}
validate();
Or can you recommend a different approach?
Not sure what this code is supposed to do, because calling validate only creates the event listener without actually executing it. But what you can do is to prevent the default action when you need, which is how validation is usually implemented:
$("#button").on('click', function(){
var input = document.forms["formular"]["text"].value;
yourSecondFunction(input !== "");
});
function yourSecondFunction(inputIsValid) {
// Do your magic here
}
I have a dropdown in MVC5 "view" by changing the dropdown part of the page is going to show and hide. I like to call this function in page load but is not working properly it shows all the text boxes when page loads as I don't know how to send "e" to the page load and when I change the drop down it gave me this error:
Microsoft JScript runtime error: 'toggleDIvDisplay' is undefined
This is my code:
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(document).ready(
function toggleDIvDisplay(e) {
if (e == 1) {
$('#divAppName').hide();
$('#divSSN').hide();
$('#divRemref').hide();
}
if (e == 2) {
$('#divAppName').show();
$('#divSSN').hide();
$('#divRemref').hide();
}
if (e == 3) {
$('#divSSN').show();
$('#divAppName').hide();
$('#divRemref').hide();
}
if (e == 4) {
$('#divRemref').show();
$('#divSSN').hide();
$('#divAppName').hide();
}
and this is dropdown:
Search By: #Html.DropDownList("ddl", (SelectList)ViewBag.DropDownValues, new { #onchange = "toggleDIvDisplay(this.value)" })
thanks everyone for the answer.
Solution is to add this lines:
$(document).ready(function () {
toggleDIvDisplay(1);
});
First I dont think you should create the function in document.ready,
From this link
defining it outside the document.ready will make it accessible to your jS after your page has loaded.
Right after you define the function in $(document).ready(), just call it:
toggleDIvDisplay(1);
The above assumes you want your page-load behavior to be when e is set to 1.
$(document).ready(
function toggleDIvDisplay(e) {
// ... your implementation, removed for brevity
}
toggleDIvDisplay(1);
);
You could write your function in a way that it gets the value of the dropdown inside the function itself:
function setDivVisibility() {
var e = $('#ddl').val();
if (e == 1) {
// Show/Hide elements
} else if (e == 2) {
// Show/Hide elements
}
// and so on...
}
Then call the function for the first time on document ready:
$(document).ready(function() {
setModeVisibility();
});
Bonus: For unobtrusive JavaScript, put this in the document ready as well so you don't need to the onchange behavior mixed in with the html.
$('#ddl').change(function () {
setModeVisibility();
});
assuming ddl is the id of your dropdown, you can try this.
EDIT: simplified your conditions.
$(function() {
$('#ddl').on('change', function() {
var value = $(this).val();
$('#divAppName, #divSSN, #divRemref').hide();
if (value == 2) {
$('#divAppName').show();
}
else if (value == 3) {
$('#divSSN').show();
}
else if (value == 4) {
$('#divRemref').show();
}
});
});
Here is my Code:
$(document).ready(function () {
$("input[type='checkbox'][name='mycheckboxname']").change(function () {
if ($(this).checked == true) {
//do something (script 1)
}
else {
//do something else (script 2)
}
})
});
What i want to accomplish is to have 2 scripts running depening whenever user checks or unchecks a "mycheckboxname" checkbox.
Problem is that with above code i get always only script 2 to run so it looks like if $(this).checked is always false even if user checks the checkbox. Am I using $(this) the wrong way?
checked is a DOM property of the element, but $(this) returns a jQuery object.
You could just use the DOM property:
if (this.checked)
There's no reason to wrap this in a jQuery instance for that. I mean, you can:
if ($(this).prop("checked"))
...but it doesn't do anything useful on top of this.checked.
Side note:
if (someBoolean == true)
is just a roundabout way of writing
if (someBoolean)
I mean, why stop there? Why not
if ((someBoolean == true) == true)
or
if (((someBoolean == true) == true) == true)
or... ;-)
Use $(this).prop("checked") to get the true/false value of a <input type="checkbox">
Click the run code snippet below to see it work
$("input[type=checkbox]").change(function(event) {
if ($(this).prop("checked") === true) {
alert("ON");
}
else {
alert("OFF");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">click it
I'm using ASP.NET MVC 4 to develop a web app. I have a page which contains a submit button which should be enabled only if one of my two checkboxes (or both of them) is (are) enabled. The thing is, I'm trying to add an "or" operator in the following script but it does not give me what I want. So, here's my script :
The jQuery sample
And this is the part I'd like to improve :
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
the_terms.click(function() {
if ($(this).is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});
And I can't find a way to tell my document "Okay, if one of these 2 checkboxes (or both of them) is (are) checked, we can press on the button. If not, don't allow it".
Any idea guys?
It can be done with:
Fiddle
$('.checkbox').change(function(){
$('#submitBtn').prop('disabled', !$('.checkbox:checked').length > 0)
});
Note:
This find the checkboxes by class name checkbox so it will work with two checkboxes, whereas your original code is looking at a single checkbox via its ID.
Use the change event not click.
Simply use
$(".checkbox").click(function() {
$("#submitBtn").prop("disabled", !$('.checkbox:checked').length);
});
DEMO
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
$('.checkbox').change(function(){
$("#submitBtn").prop("disabled", !(the_terms.is(":checked") || the_terms2.is(":checked")));
});
});
// Make a function to be called on onload or on click
function checkTerm() {
jQuery('input[type="submit"]').attr('disabled',!jQuery('input.term:checked').length > 0 ) ;
}
// Call the function on load
$(document).ready(checkTerm) ;
// And call it on check change
jQuery(document).on('change','input.term',checkTerm) ;
Try below modified script , please check if it works as you want.
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
if(the_terms.is(":checked") || the_terms2.is(":checked"))
{
$("#submitBtn").removeAttr("disabled");
}
else
{
$("#submitBtn").attr("disabled", "disabled");
}
the_terms.click(function() {
if ($(this).is(":checked") || the_terms2.is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
the_terms2.click(function() {
if ($(this).is(":checked") || the_terms.is(":checked") ){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});
I know it is not the smartest idea, but I still have to do it.
Our users want to use ENTER like TAB.
So, the best I came up with is this:
Ext.override(Ext.form.field.Base, {
initComponent: function() {
this.callParent(arguments);
this.on('afterrender', function() {
var me=this;
this.getEl().on('keypress',function (e){
if(e.getKey() == 13) {
me.nextNode().focus();
}
});
});
}
});
But it still does not work exactly the same way as TAB.
I mean, it works OK with input fields, but not other controls.
May be there is some low-level solution.
Any ideas?
In the past I've attached the listener to the document, something like this:
Ext.getDoc().on('keypress', function(event, target) {
// get the form field component
var targetEl = Ext.get(target.id),
fieldEl = targetEl.up('[class*=x-field]') || {},
field = Ext.getCmp(fieldEl.id);
if (
// the ENTER key was pressed...
event.ENTER == event.getKey() &&
// from a form field...
field &&
// which has valid data.
field.isValid()
) {
// get the next form field
var next = field.next('[isFormField]');
// focus the next field if it exists
if (next) {
event.stopEvent();
next.focus();
}
}
});
For Ext.form.field.Text and similar xtypes there is a extra config enableKeyEvents that needs to be set before the keypress/keydown/keyup events fire.
The enableKeyEvents config option needs to be set to true as it's default to false.
ExtJS API Doc
Disclaimer: I'm not an expert on ExtJs.
That said, maybe try something like:
if (e.getKey() === 13) {
me.blur();
return false; // cancel key event to prevent the [Enter] behavior
}
You could try this
if (e.getKey() === 13) {
e.keyCode = Ext.EventObject.TAB
this.fireEvent(e, {// any additional options
});
}
Haven't really tried this ever myself.