Using Foundation Framework and PHP
I have a couple of simple input type=text form fields which appear to get focus (cursor blinks inside them) but they refuse to accept any keyboard input. After some trial and error, I discovered that if I disable the Jquery-ui.js script, the inputs work ok.
It appears that Jquery-ui is somehow disabling the fields. Does anyone have any idea why this might be and what a workaround might be? I need to keep Jquery-ui as I have some draggable/droppable items.
<form action="#" method="post">`
<input id="formLength" type="text" >`
<input id="formWidth" type="text">`
</form>`
I'm guessing here, but i've seen errors like these when i had conflicting jquery mask plugins in the project. I needed to use both, so i had to deactivate the duplicated selectors from one of the libs so it doesn't activated for the same input.
Not enough information to answer the direct question. However, as a side note, you can use the jQuery UI interactions--mouse, position, draggable, droppable, position, resizable, selectable, sortable--without having to use the widgets. The only dependencies are core.js and widget.js(the widget factory).
I've got a potential workaround for you.
First create two instances of jQuery
<script type="text/javascript">
var $jOriginal = jQuery.noConflict();
</script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
var $jNew = jQuery.noConflict();
</script>
Now, use new jQuery instance in place of the old one
<script type="text/javascript">
$jNew('#selector).doSomething(); //Will use new jquery library
$jOriginal('#selector).doSomethingElse(); //Will use original jquery library
</script>
Related
Is there a way to reveald a secon input in a form after the first input has been filled? For example if I have a text input asking how many kids are going on the trip, person responds and a second input appears asking age range...
A simple example:
jsFiddle Demo
HTML:
<input id="in1" type="text" /><br>
<input id="in2" type="text" /><br>
javascript/jQuery:
$('#in1').change(function(){
if ( this.value != '' ) $('#in2').show().focus();
});
Update:
Note that you must wrap the jQuery code in a document.ready wrapper:
$(document).ready({
$('#in1').change(function(){
if ( this.value != '' ) $('#in2').show().focus();
});
}); //END document.ready
This prevents the javascript from attempting to bind an event (the change event) to a DOM element (the #in1 element) before that element exists in the DOM. $(document).ready() ensures the DOM has been fully rendered before attempting to create the event bindings.
Usually, all (or almost all) of your javascript/jQuery code is written within the $(document).ready() wrapper.
Notes:
The above code example uses jQuery, so you should reference the jQuery library in the <head> tags, comme ca:
<head>
<!-- other stuff in head -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
Note that if you use a CDN to load the jQuery library, as above, it is likely that jQuery is already pre-loaded from other websites visited previously.
If you want some fast lessons on jQuery, find free video tuts here:
https://www.thenewboston.com/videos.php?cat=32
or at
http://phpacademy.org
Yes, it is possible.
You should look at either JavaScripts onchange() or jQuery's .change() event to control this action. And then of course hiding and showing certain elements.
I've added a JQuery Masked Input plugin to my Web project but it's not working at all.
The plugin can be found here: http://digitalbush.com/projects/masked-input-plugin
I've included JQuery libray and the Masked Input plugin to my JSP, and called the mask function for my html <input> element:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- JS --->
<script src="js/jquery-1.11.0.js"></script>
<script src="js/masked-input-jquery-1.3.1.js"></script>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
$("#name").mask("99/99/9999");
</script>
<form id="" method="" action="">
<div>
<label for="name">
Name<b style="color: red">*</b>
</label>
<input name="studentName" maxlength="255" autofocus="autofocus" type="text" id="name"/>
......
When I access my JSP, even before typing anything on the text field, the following appears on Chrome console:
Uncaught ReferenceError: iMask is not defined
Can you help me? Is there anything wrong with the code?
This may or may not fix your current problem, but your call to .mask will not work because it runs before the rest of the page (where your input fields are) is parsed.
You need to wrap the call in the jQuery document ready function:
$('document').ready(function() {
$("#name").mask("99/99/9999");
});
This tells the script to wait until the page is loaded enough for the browser to know about the input fields in the document.
As an additional comment best practices say to put all script tags (with some exceptions) just before the closing body tag.
Otherwise you should move the script tag into the head with the rest of the tags.
That's because jQuery is downloaded but not ready yet. Try
$(function(){
// your code goes here
});
You need to wrap your jQuery in document.ready as several folks have already mentioned. You also need to adjust your mask to match your desired input. I assume you only want alpha characters allowed. This JSFiddle shows you an example with that assumption.
If you want alphanumeric just replace 'a' with '*'. Below is the jQuery Code:
$(function() {
//The # of "a"s you enter depends on your max field input
//The "?" makes any character after the first one optional
$("#fname").mask("a?aaaaaaaaaaaaaaaaaaaaaaaa");
$("#lname").mask("a?aaaaaaaaaaaaaaaaaaaaaaaa");
});
It should also be said that using the masked input plugin may not be the best option to validate a name as it is meant for fixed width inputs. If you want to validate alpha characters of varying lenghts consider doing something like this instead.
I found this article that looked like exactly what I wanted, but I can't seem to get it to work at all. Since it is well over a year old, I thought perhaps something may have changed, or that there might be a simpler way to do it by now.
That is to say, I cannot get the method I linked above to work. I copied and pasted exactly, and used <body onLoad="javascript_needed()"> because I wasn't sure where $(document).ready(function ()... was supposed to go. I am, sadly, quite unfamiliar with Javascript.
Use something like this;
<script>
$(document).ready(function(){
//Code goes in here.
});
</script>
Don't forget to load the jQuery library at the same time from http://jquery.com/
Also, you are going to want to read up on selectors.
Using $("#myElement") will select elements that have an id of "myElement".
Using $(".myElement") will select elements that have a class of "myElement".
So;
<div class="hideMe">Content</div>
<div class="hideMe">Content</div>
<div class="hideMe">Content</div>
<div class="doNotHideMe">Content</div>
<input type="button" class="ClickMe" value="click me"/>
<script>
$(function(){
$(".ClickMe").click(function(){
$(".hideMe").hide(250);
});
});
</script>
edit
If you want to link to the jquery library online then use;
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
If you download the library and insert the js file into your project then use;
<script src="/yourPathToTheLibrary/jquery-1.6.1.min.js" type="text/javascript"></script>
The $ syntax is all part of jQuery. If you wish to use jQuery then somewhere in your code, use a script tag as in your post:
<script>
$(function() {
$('.selector').hide(250);
});
</script>
If you want pure JavaScript, then there is a little more overhead. Not including the document ready stuff (which can be a lot of extra code to do it right...See example: here).
<script>
elements = document.querySelectorAll('.selector');
for(int i=0,len=elements.length;i<len;++i) {
elements[i].style.display = 'none';
}
</script>
You can put that in a function if you would like. To show the elements set the display attribute to ''.
I have a form validation routine in JS which cycles through elements of a the first form on the page. I read the size of the elements array like this:
maxi=document.forms[0].elements.length;
This works fine in IE returning 23. In FF it always returns 0 and no validation at all is performed.
Any suggestions?
Thanks!
Move your javascript after the mark up or make sure that it runs after the document is loaded. Sounds like in FF the code is running before the form has been added to the DOM.
You might also consider using a javascript library, such as jQuery (I would recommend this), MooTools, Prototype, etc. to iron out a lot of the inevitable cross-browser issues you will have. Using jQuery, and the validation plugin, the validation code is very simple, using CSS classes to help with validation.
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
$(function() { // run on document load
$('form').validate(); // use validation plugin to validate form
});
</script>
<form ...>
<input type="text" id="txt" name="txt" class="required" /> <!-- a required element -->
<input type="text" id="num" name="num" class="required number" /> <!-- a required, numeric element -->
...
</form>
You should try some interactive javascript console to test issues like this -
but, for this particular thing, you could use the "for ...in" form of for to iterate over the elements:
http://en.wikipedia.org/wiki/Foreach#JavaScript
Probably, however, it is the "elements" property which is non-standard there, so you will need to check the DOMs to get to a better way to retrieve the form widgets as objects.
And finally: beware of cleint side verification: it is often a burden to users and, if special care is not taken, it is to ease to have your forms stop working on a variety of browsers/platforms due to a verification which is mostly meaningless anyway (since you must verify the lenght of data entered server side in either case)
I have a firm grasp on XHTML & CSS, but PHP & Javascript look like magic to me.
I'm building a discussion site using the PHP-based Textpattern CMS. When users are logged in, they can use a public-side form to add a new discussion topic. There are a lot of input fields, grouped by the HTML fieldset element within a single form element that adds a new row to a specific database table. What I want to do is show only one fieldset at a time, inserting previous and next links that will allow people to navigate between fieldsets.
Textpattern comes bundled with jquery, and I found a jquery plugin that describes this functionality. But I can't get it to work.
Here's what I have in my document head:
<style type="text/css" media="screen">
fieldset {display: none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://site.url/scripts/jquery.babysteps-0.2.1.js"></script>
<script type="text/javascript" language="javascript">
$('#step1').bindStep('#step2');
$('#step2').bindStep('#step3');
$('#step1').show();
</script>
My form is something like this:
<fieldset id="step1">
<legend>Step 1 Fields</legend>
<!-- fields -->
</fieldset>
<fieldset id="step2">
<legend>Step 2 Fields</legend>
<!-- fields -->
</fieldset>
<fieldset id="step3">
<legend>Step 3 Fields</legend>
<!-- fields -->
</fieldset>
<input type="submit" value="Post this Article!" />
The results are that the style declaration hides every fieldset, but the script doesn't show step1 at all. I've double-checked all the file paths, and I've tried this using a link to my local jquery bundle instead of the Google version, but I get the same results.
I would be happy if I could get this working, but if there is another way to achieve this without the babysteps plugin, I'd be happy with that outcome as well.
Any guidance or concrete advice you can offer would be greatly appreciated! Step-by-step instructions or practical troubleshooting questions (Do you have your computer plugged in?) might also be helpful.
Thanks in advance!
Im not sure on that particular plugin, but with just jquery:
$(function(){
$('#gotoStep2').click(function(){
$('#step1').hide();
$('#step2').show();
return false;
});
});
where you have
<input type="button" id="gotoStep2" value="next ยป"/>
inside step1
and your css:
#step2, #step3 //etc
{
display: none;
}
im sure you can work out how to repeat this for all your steps :)
<script type="text/javascript" language="javascript">
$(function(){
$("#step1").bindStep("#step2");
$("#step2").bindStep("#step3");
$("#step1").show();
});
</script>
If that doesn't work, ditch the plugin. (Seriously, not even the demo on that page works.)