I'm beginner with Javascript. I've tried to hide a form with no luck.
Where is the error ?
http://jsfiddle.net/6EWCe/5/
<div id="form1">
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
</div>
<div id="form2">
<form>
First name:2 <input type="text" name="firstname"><br>
Last name:2 <input type="text" name="lastname">
</form>
</div>
Close
function hideform() {
document.getElementById('form2').style.display = 'none';
}
Uncaught ReferenceError: hideform is not defined
...is your error.
You need to specify that you want your JavaScript to load in the body of your JSFiddle demo using the options in the sidebar:
Fixed JSFiddle demo.
Related
When the user click on the form I am trying to show and hide a form and also trying to scroll down to see the form, the code that I have works after the first click. If i click for the first time it "shows the form but doesn't scroll down" after the first click it work fine. can someone explain me what am i doing wrong.
$('#showForm').click(function()
{
$('.formL').toggle("slow");
$('.formL').get(0).scrollIntoView()
});
HTML:
<div class="formL" style="display: none">
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
The problem is that in that function you try to scroll to the form while it's still not visible. To fix this, call scrollIntoView() in the callback of toggle() function. See the example here: https://jsfiddle.net/ux0qt5nn/
The issue is that on your first click, the element isn't there yet. Put the scroll function into a callback and you'll be good to go.
$('#showForm').click(function(){
$('.formL').toggle("slow", function() {
$('.formL').get(0).scrollIntoView();
});
});
$('#showForm').click(function(){
$('.formL').toggle("slow", function() {
$('.formL').get(0).scrollIntoView()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="buttonForm" id="showForm"><span>Click here to see form</span></button>
<br><br><br><br><br><br><br><br><!--Extra lines to show scroll-->
<div class="formL" style="display: none">
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
As explained in other answers, you are trying to scroll an element into view before it's visible and before it's reached its actual height. You can use the following approach to scroll to the amount necessary to display the form and still let the user see the animation. See comments in the code.
$('#showForm').click(function() {
var formL = $('.formL').show(), // show the form wrapper in order to get its height
formLHeight = formL.height(),
formLForm = formL.find('form').hide(); // hide the form itself instead
formL.height(formLHeight);
formLForm.toggle("slow", function() {
// optionally, reset the height
formL.height('auto');
});
// this line is only needed so that the code snippet will not scroll the
// outer browser window, but only the iframe content. If you're not in an iframe,
// you can just use the original scrollIntoView() approach instead
document.documentElement.scrollTop = formL[0].offsetTop;
// formL.get(0).scrollIntoView();
});
#spacer {
background: red;
color: #fff;
height: 80vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showForm">show form</button>
<div id="spacer">some long content</div>
<div class="formL" style="display: none">
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
I want to check that user eneters valid name in english using latin alphabet and valid name in russian using cyrillic alphabet.
I'm having following edit.jsp form:
<body>
<h1>${faculty.name}</h1>
<div class="form">
<form id="edit_faculty" action="controller" method="POST">
<input type="hidden" name="command" value="editFaculty" />
<div class="field">
<label for="name_ru"> Name (ru)</label> <input type="text"
name="name_ru" value="${requestScope.name_ru}" required />
</div>
<div class="field">
<label for="name_eng"> Name (eng)</label> <input type="text"
name="name_eng" value="${requestScope.name_eng}" required />
</div>
</form>
</div>
<script src="/Project/script/faculty-validation.js"></script>
</body>
And the faculty-validation.js:
document.getElementById('name_ru').onkeypress = function(e) {
return (/[А-Яа-я]/.test(String.fromCharCode(e.charCode)));
}
document.getElementById('name_eng').onkeypress = function(e) {
return (/[a-zA-Z]/.test(String.fromCharCode(e.charCode)));
}
I follow this links, but main answer's were to check the place in the page where programer put script src tag.
Error TypeError: document.getElementById(...) is null when add text innerHTML using javascript?
TypeError: document.getElementById() is null
I'm debugging this in Mozilla and getting TypeError. I also tried to modify js code with no success to:
window.onload = function() {
document.getElementById('name_ru').onkeypress = function(e) {
return (/[А-Яа-я]/.test(String.fromCharCode(e.charCode)));
}
}
document.getElementById works with the id attribute, not name. I don't see id attributes for your input tags.
Replace:
<input type="text" name="name_ru" value="${requestScope.name_ru}" required />
with:
<input type="text" name="name_ru" id="name_ru" value="${requestScope.name_ru}" required />
and:
<input type="text" name="name_eng" value="${requestScope.name_eng}" required />
with:
<input type="text" name="name_eng" id="name_eng" value="${requestScope.name_eng}" required />
I am working on a system where users are allowed to add books to their library. I am using a jquery UI dialog box and have inserted about 20 rows into the database using the first half of this script.
However, as I was adding in the second half all of a sudden the post information is not showing up on the posted page and I am completely lost as to why.
This was supposed to be a quick addition that's turned into a headache.
FORM:
<form id="addbookform" action="../models/Books/addBook_submit.cfm" method="POST">
<div style="display: none;" id="addBook" title="Add a Book to Your Library">
<input type="hidden" id="InputType" name="InputType" value="Add"/>
<input type="hidden" id="bookempID" name="bookempID"/>
<label class="labelstyle" >ISBN:</label>
<input type="text" maxlength="17" id="ISBN" name="ISBN">
<label class="labelstyle" >Title:</label>
<input type="text" maxlength="100" size="50" id="Title" name="Title">*
<label class="labelstyle">Author's First Name: </label>
<input type="text" maxlength="50" id="AFName" name="AFName">
<label class="labelstyle">Author's Middle Name:</label>
<input type="text" maxlength="50" id="AMName" name="AMName">
<label class="labelstyle">Author's Last Name:</label>
<input type="text" maxlength="50" id="ALName" name="ALName">*
<label class="labelstyle">Date Read:</label>
<input type="text" id="DateRead" name="DateRead">
</div>
</form>
Javascript:
function addBook() {
$("#addBook").dialog({
autoOpen: true,
width: ($(document).width()*.55),
height: ($(document).height()*.7),
modal: true,
buttons: {
"Add Book": function() {
//checkBook();
$('#addbookform').submit();
},
Cancel: function() { $(this).dialog("close"); }
}
});
}
The above piece was working before I started building checkBook(). However, now it's no longer working.
Edit:
The form is initiated by:
<input type="button" class="buttonstyle" value="Add Book" onclick="addBook()" />
(this works)
I think your form must be "visible" in order for the elements to be posted. jQuery can certainly see and access all of the elements regardless of css Display type, but I believe the "submit" action requires the elements that are getting posted to the server be visible. I noticed all the form elements you are attempting to submit are inside of a DIV element with the css property of Display:none;
It seems to me that you are binding a submit event to the form somewhere else in the code.
So, you can try submitting the form without jQuery.
$('#addbookform')[0].submit();
Or unbind any event that might be in the form.
$('#addbookform').off().submit();
I'm trying to change the value in one textfield from the value of another textfield without any submits. Example:
[Textfield 1 (type 'hello')]
[Textfield 2 ('hello' is inserted here as well)]
Below is my form:
<form action="#" id="form_field">
<input type="text" id="textfield1" value="">
<input type="text" id="textfield2" value="">
</form>
I don't know much about JavaScript, is this even possible? Would appreciate any help.
Thanks
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="document.getElementById('textfield2').value=this.value">
<input type="text" id="textfield2" value="">
</form>
see it in action:
http://jsfiddle.net/4PAKE/
You can do:
HTML:
<form action="#">
<input type="text" id="field" value="" onChange="changeField()">
</form>
JS:
function changeField() {
document.getElementById("field").value="whatever you want here";
}
Sometimes this won't work. So you need to use micha's solution:
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onChange="document.getElementById('textfield2').value=this.value">
<input type="text" id="textfield2" value="">
</form>
See this solution in this jsFiddle
You can read more about .value here.
Hope this helps!
If you want to do it with jquery, then please add the following script
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
and then write the following code:
$("#textfield1").bind("input", function() {
$("#textfield2").val($("#textfield1").text());
}
You can use jQuery to accomplish this as #sarwar026 mentioned but there are some problems with his answer. You can do it with jQuery with this code:
$('#textfield1').blur(function() {
$("#textfield2").val($("#textfield1").val());
});
In order to use jQuery you'll need to include it on your page, before your script.
I've been at this for two days and can't seem to get it. Basically, I'm using the JQuery Cookbook modal from scratch. My problem is the form html page loads fine but the code will not recognize my submit button. Here's the relevant parts of the code:
Separate HTML:
<div id="contact">
<form action="" id="register_form" method="post">
<p>First Name <br />
<input type="text" id="firstname" name="firstname" /></p>
<p>Last Name <br />
<input type="text" id="lastname" name="lastname" /></p>
<p>Username: <span class="micro">Must be a valid email address</span></span><br />
<input type="text" id="username" name="username" /></p>
<p><input type="submit" value="Register" id="register" /></p>
</form>
</div>
Here's the relevant parts of the modal code:
// Insert modal at end of </body>.
$('body').append('<div id="modal_wrapper"><!--[if IE 6]><iframe id="modal_iframe" frameborder="0"></iframe><![endif]--><div id="modal_overlay"></div><div id="modal_window"><div id="modal_bar"><strong>Modal window</strong>Close</div><div id="modal_content"><div id="contact"><form><p><input id="firstname" /></p><p><input id="register" /></p></form></div></div></div>');
$('#modal_content').load('mediaKitF.html#contact'.replace('#', ' #'), '', showModal);
$("input[type=text]").focus(function(){
// Select field contents
this.select();
});
$('input #firstname').focus();
$('#register').click(function () {
alert("hello there");
});
$('#modal_content').load() is an asynchronous method, which means that you are trying to attach your click event to the $('#register') element before receiving the new content. You need to either use $('#register').live('click', function() {}) or move the code attaching the click handler into your showModal function.