I agree with the comment from @emiloprea.
$("#test-form").on("submit", function(event){
event.preventDefault();
var fields = $(this).serialize();
$.post("submit.php", fields, function(data){
$("#dialog-message").html(data);
$("#dialog-message").dialog("open");
});
});
Something like this should do the trick :) Hope this helps!
.index() gets the element's current position relative to it's siblings. You
should use a regex to get the number between [ and ] in the input's name.
Use this instead:
$('input[name^=quantity]').change(function () {
var index = $(this).prop('name').match(/[(.*?)]/)[1];
alert(index);
});
Here it is working: http://jsfiddle.net/u8HRq/1/
UPDATE: Based on your update here's a working fiddle:
http://jsfiddle.net/qbmAU/2/
First off ids should be unique so I've changed them to classes and updated
the selector for the change event.
I've also got .index() working:
$(this).index('.quantity')
index() usually works by returning the position relative to the matching
siblings which is why mine and j08691's answers were working. However, if
the elements aren't siblings then you can pas
By using "remove" .remove(), you are effectively dumping the entire DOM
intro the trashcan which removes ALL event listeners.
Thus, you should only hide your modal OR clear the body using
$('.modal-body', '#forgotPassModal').empty();.
The jQuery Validation plugin requires that all input elements must be
contained within a set of <form></form> tags. However, using
the DOM inspector, you can see that when your dialog box is constructed, it
is outside of the <form></form> entirely.
Re-factor the HTML so that the form is contained inside your dialog...
<button name="btn" id="btn" type="button">Open Modal</button>
<div id="dlg" style="display:none">
<form id="frm">
<div>
Name: <input type="text" id="txtName" name="txtName" />
</div>
</form>
</div>
DEMO: http://jsfiddle.net/aGJrZ/9/
Try this example :
jquery
<script type="text/javascript">
$(document).ready(function(){
$('#query1').change(function(){
var val = $('#query1').val();
$('#query2').val(val);
});
});
</script>
HTML
<input type="text" id="query1"/>
<input type="text" id="query2"/>
It's easy with jQuery > 1.6
$('input').prop('disabled',true)
$('input').prop('disabled',false)
To react to your radio button, you have to give each one a different value
attribute (1 for yes?) and listen to the change event.
$("#date_biennial_budget").change(function(){
if($(this).val() == 1)
$('input[name=high]').prop('disabled',false);
else
$('input[name=high]').prop('disabled',true);
}
If you want scrolling textboxes than you are doing it in a wrong way, if
you want scroll, use textarea instead of input type=text, even if it's
possible, don't do it, it's just wrong approach.
As far as the area is concerned, if you want to have input type text looks
for your textarea you can use
textarea {
height: 30px;
resize: none;
}
Demo
Your .num is a child of .text, rather than next element.
Change:
$("#form2").html($(this).next(".num").val());
To:
$("#form2").val($(this).children(".num").html());
and as correctly said in comments: use val() to get/set value of input
element, and .html() to get/set contents of the element.
This will update the h3 element on input focus lost
$('#loc_else_text').change(function(){
$('#detectiveFill_1').text(this.value);
});
This will update instantly on key pressed
$('#loc_else_text').keyup(function(){
$('#detectiveFill_1').text(this.value);
})
if (discountCode == codeEntered) {
$('input#discount').attr('value',50);
}
Do not use = use either == or better ===
Also instead of using attr you can simple use val as suggested below and
use input#discount as the correct selector and use val() to get the value
var discountCode = 'DISTR50';
var codeEntered = $("input[name='discount']").val();
if (discountCode == codeEntered) {
$('input#discount').val('50');
}
isn't $('#bet').val($('#bet').val()*2); enough? nothing happens on your
code because you are not assigning the new value back to the #bet object..
so you should change your code to this..
Your input is switching from display:inline to display:block, and then back
again. The display:block is dropping the button to the next line, and the
container grows, so the submit button moves. Then it switches back to
inline and renders as you expect.
jQuery's animate() converts elements to block. Here's another question with
an answer for an alternate animation: Animating inline elements with JQuery
If I've understood you correctly, I believe the following code should do
what you're after:
var toggle=function() {
$("#search_panel").fadeIn(100);
};
$(document).ready(function() {
$("#search_panel").fadeOut(100);
$("#search_box").on("click", function() {
if ($(this).is(':focus')) {
$(this).on("click", toggle);
} else {
$(this).focus();
}
});
$("#search_box").blur(function() {
$(this).off("click", toggle);
$("#search_panel").fadeOut(100);
});
});
Revised JSFiddle:
I've amended it so that when the search box is clicked, it checks to see if
that element has focus. If it does, it attaches the click event. Otherwise,
it just focuses on it.
Get values from inputs and calculate in click handlers. It'll be a little
copy-pasty but
recP.click(function() {
var l = $("#l").val();
var w = $("#w").val();
var rectangle = new Rectangle(l,w);
var recPerim = rectangle.calcPerim(l,w);
ansr.append("The perimeter is " + recPerim);
});
recA.click(function() {
var l = $("#l").val();
var w = $("#w").val();
var rectangle = new Rectangle(l,w);
var recArea = rectangle.calcArea(l,w);
ansr.append("The area is " + recArea);
});
Check this
'#'+$(this).attr('rel'); // This is just a string
supposed to be
$('#'+$(this).attr('rel')); OR // $('#'+ this.rel);
You need to encase it as a jQuery object if you want to use val method on
the object
You're using an attribute selector, but the value attribute isn't updated
when the value of the input changes.
Instead, loop through them, and only focus on the one that actually has an
empty value:
$('input[name="userinput[]"]').each(function() {
if ( this.value === '' ) {
this.focus();
return false;
}
});
Here's your fiddle: http://jsfiddle.net/TYjNE/2/
Yes, loading the file locally means that it doesn't have an origin. Since
localStorage is uses the same-origin policy to determine access to stored
data, it is undefined what happens when you use it with local files, and
likely that it won't be persisted.
You will need to host your file on a web server in order to have a proper
origin; you can just run Apache or any other server locally and access it
via localhost.
Taken from: localStorage doesn't retrieve values after page refresh
In order not to add the same value to both search input, you need to target
them using .closest(), .next(), .prev() and .find(). jQuery-Mobile,
enhances list-view with data filter in a different way.
Demo
<form>
<input>
</form>
<ul data-role="listview">
<li>
<a>text</a>
</li>
</ul>
The form where the input is located, is on the same level of the ul. To
target the input box, you need to use .prev('form').find('input'). Check
the demo and the new code below.
$("input[data-type='search']").keyup(function () {
if ($(this).val() === '') {
$(this).closest('form').next("[data-role=listview]").children().addClass('ui-screen-hidden');
}
});
$('a.ui-input-clear').click(function () {
$(this).closest('input').val
Try something like this:
$(document).on('click', '.quick_edit_title', function(){
var url = $(this).attr('u');
var status = $(this).attr('s');
var title = $(this).html();
var input = $("<input type='text' size='45' value='" +
title.replace(/'/gi,"\'") + "' class='input_quick_edit'/>");
$(this).replaceWith(input);
}).on('blur', '.input_quick_edit', function() {
alert(this.value);
});
No need to iterate through with .each() and assign click handlers for the
class, you can just make the class click handler, replace the content, and
chain a blur function.
Try to add the following into your css:
.ui-input-listview {
margin-top: -1em !important;
margin-bottom: -1em !important;
margin-left: -0.5em !important; /* If you want to fix left as well */
margin-right: -0.5em !important; /* If you want to fix right as well */
}
And then, for the input in the listview, set the class to ui-input-listview
<input class="ui-input-listview" type="text" ng-model="cust.firstname"
name="cust_firstname" required="required">
jsFiddle here - http://jsfiddle.net/EnF2w/1/
I had a similar problem sometime back. I don't think you can rely on
simulating keypress (which is what I think you're trying to do). keypress
will not happen if its not trusted and specifying what key to simulating
might not work on some browsers. But, here's how that's achieved.
$("button").click( function() {
var e = jQuery.Event("keydown");
e.which = 50;
$("textarea").trigger(e);
});
But, this doesn't work on Chrome. So i suggest you try injecting the value
through code. I setup a fiddle for you for this current situation. Here's
the markup
<textarea></textarea>
<button class="special" data-char="~">Insert tilde</button>
and the JS
$(".special").click(function () {
var char = $(this).data("char");
$("textarea").val(function () {
return
You have to use css function.
$("#B_input-text")
.attr("placeholder", "this")
.placeholder()
.css('backgroundImage', 'url("path/to/image/here")');
$("#B_input-text")
.attr("placeholder", "this too")
.placeholder()
.css('backgroundImage', 'url("path/to/image/here")');
You just need to pass a object with your desired css properies it it.
var backgroundCss = {
'backgroundImage': 'url("path/to/image/here")',
'backgroundRepeat': 'no-repeat',
'backgroundPosition': '50% 50%',
};
$("#B_input-text").css(backgroundCss);
You can use:
<input ... onclick="alert(this.nextSibling.data);">
Of course that is very dependent on the structure of the DOM. You may want
to concatenate the data in all the text nodes from this element to the
next, so you might need a function like:
function getTextByNodes(el) {
var text ='';
while (el && el.nextSibling && el.nextSibling.nodeType ==
3) {
text += el.nextSibling.data;
el = el.nextSibling;
}
return text;
}
with:
<input ... onclick="alert(getTextByNodes(this));">
Suppose your navigation input box is like this
<input id="nav" type="text"/>
Then use the same handler for this input element
$("#nav").keydown(function (e) {
if (e.keyCode == 74) {
window.location = 'page1.html'; // Key = J
}
else if (e.keyCode == 75) {
window.location = 'page2.html'; // Key = k
}
else if (e.keyCode == 76) {
window.location = 'page3.html'; // Key = L
}
});
After changing the id to class
$(document).ready(function () {
$('#btnAddMore').click(function () {
$('#addtable tr:last').after($('#addtable tr:last').clone(true));
$('select.selector').change(function () {
var theVal = $(this).val();
switch (theVal) {
case '1':
$(this).parents('tr').find('input.cutowe,input.obtainamount,nput.obtainroom').removeAttr('disabled');
break;
case '2':
$(this).parents('tr').find('input.cutowe,input.obtainamount,input.obtainroom,input.cutother').attr('disabled',
'disabled');
break;
}
});
});
});
The above code can be reduced to even more, but this should give you a
start on knowing few things, like it is a bad idea to have the same i
You need to remove label for attribute so when you click it it does not
give focus to the input element that has the matching id of label for
attribute.
<label>Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="60" min="0"
max="100" />
Working demo
If you want to remove it after its creation:
You can do this to remove that behavior to all slider label elements...
$("label.ui-slider").removeAttr("for");
or remove for a specific slider label using its ID...
$("#slider-label").removeAttr("for");
Use the .is() function with the :contains selector (jQuery version added:
1.1.4).
$("td",table).each(function(){
if($(this).is(":contains('AD Login')"))
console.log($(this).next().text());
});
Notice that .contains() doesn't fit here for it can only check to see if a
DOM element is a descendant of another DOM element. (From the API).
Regarding what you've written in your comment - it always returns true
because you're just concatenating $(this)'s string value to another string
(":contains etc."). When converted to boolean type, string immediates are
always true.
Try this
jQuery('#phone').keyup(function(){
if(!isNumber($(this).val()))
{
$(this).val('');
}
});
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
FIDDLE
UPDATE
Checking on focus too
FIDDLE
For allowing only DECIMAL numbers
FIDDLE
I think there are some semantic errors in the code which lead to some
things happening you aren't expecting.
I have managed to get your custom handler to work by mapping it to a field
by name rather than by type - I'm not sure the override works in the
plugin.
rules: {
emailTest: {
multiemail: true
}
}
Also in the handler, you had multiemails as the identifier and referred to
it as multiemail later on, not sure how much of an impact that had.
Here's the full working example: http://jsfiddle.net/jbergler/7jXn7/2/
I would try this (replacing mouseover on document by click) :
$(document).on('click', function (e) {
if ($('#log-in').has(e.target).length === 0) {
$('#log-in').fadeOut(200);
$('#aLogin').show();
}
});
But it's hard to be sure if it's good without seeing the HTML too
you've attempted to assign an object to $('#end_date'). jQuery deals with
this in a different way by altering the value of the input box by
leveraging .val('value-here')
Try this:
$('#start_date').change(function(){
$('#end_date').val(Add7Days());
});
See this fiddle: http://jsfiddle.net/zydZ2/
Also, Moment.JS is great for parsing and manipulating dates, I'd strongly
recommend checking that out: http://momentjs.com/
Hope this helps!
Your #container is a div. Typically blur is used on inputs, thats why it
not working. The following works fine.
$("#container input").on("blur", function () {
alert("test");
});`
Update Regarding Comment:
If your looking to have a specific element have the on blur event. Just
make sure you select it properly and apply the listener to it. I think this
is what you're trying to accomplish.
var $input = $("ul.dropdown_ul").prev('input')
$input.on("blur", function () {
alert("test");
});
Example
You can use the selector below.
var $inputs = $('input[type=text]')
That selects all the inputs of type text and then perform the logic.
If there is some internal logic the you want to perform which is different
for each input, use a $.each to iterate over the inputs and perform the
logic
$inputs.each(function() {
// Perform your logic
});
