hidden form in JQuery - javascript

i want to show a form once a certain button is clicked. i tried some methods like
1)i add the form initially to the HTML and give it a hidden property then change it with .show() or .css() my problem is it takes a space of the page.
2) i used .appened() to add the form but the form is too long and it never works.
what's the best way to hide an element first then show it in JQuery ?

You assigned the wrong css. Use display:none;:
<form id="myform" style="display:none;">
...
</form>
And, to show it:
$("#myform").show();
This works, guaranteed. With display:none;, it doesn't occupy space. You certainly may have used visibility:hidden; that was your mistake (because it does occupy space)
Hope this helps. Cheers

$(document).ready(function() {
$("#formID").hide();
$("#buttonID").click(function() {
$("#formID").show();
});
});
You can see an example fiddle of this here. Note that this hides the form using jQuery, so if users have JavaScript disabled they will still get to see it. If you hide the form with a CSS property directly, users without JavaScript will never be able to see it.

Related

Make contents in div not editable (clickable)

I don't know if this is possible or not.
I have a dynamic form with contents that are dynamically created. Every time a button is clicked, a new div element is added. And what I wanted to do is to make the previous div not editable, that is, the input fields could not be used, buttons could not be clicked.
Is it doable?
Thanks.
Try something like this:
// Disable all input-like elements in the divs except for the last div
$(".divclass:not(:last-child) :input").attr("disabled", true);
Where divclass is the class of the divs you mentioned.
Example: http://jsfiddle.net/grc4/LrxkU/2/
Maby something like this? http://jsfiddle.net/ng4Ct/2/
If you can access your previous div elements you can add attribute disabled="disabled" to them.
You can fire the code that adds the disabled attribute to required elements on the same button click function.
Well, you can either access the specific elements inside the DIV and disable them using Javascript, or you can access the DIV and then loop through all the elements inside (probably preferable), and disable them automatically with Javascript.
Of course it depends on how your code is written, can you provide some of the code that generates the DIVs?

how to make html button dotted inline appear

I am trying to add javascript to set Focus on a button, and hope to make the button look just the way it does when a user 'tabs' thru the HTML Form to reach the button.
The page that I am working on has an button element:
<input type="Submit" id="myBtn" class="myBtnClass >
In javascript function, I set focus to it using:
$("#myBtn").focus() When this function is invoked, I can see change of button image. Also, when I click 'Enter', the form does get submitted. However, in this case, when the image changes, I don't see the "Dotted inline" that generally appears on buttons.
but the dotted line Does appear when a user "tabs" to that button.
Am I expected to do anything other than $("#myBtn").focus()" ?
you can use css property:
`outline`
Could be running in IE7 compatibility mode, or using the wrong doctype.
See this similar question for more info and possible solutions: CSS 'outline' property in IE, and jQuery errors

Input fields examples from title tag, with toggle

I'm creating a form, that needs to have examples in the input fields. So when you click in them, example will toggle away and you can insert your own value.
Also the examples need to be in a different class. And I think the best way to load the examples, is from the title tag. Because, when I submit the form.. I don't want the examples to count.
Currently Im using this jQuery plugin: http://jquery.kuzemchak.net/toggleval.php
It basically works like it should, but the issue is with the submit. To clear out the input fields on submit, I made this script:
$(".formtable_submit").hover(function () {
$(this).parents("form").find("input").each(function () {
$(".toggleval:not(.toggleval_foc)").val("");
});
});
So if you hover over submit, it will clear out all input fields with .toggleval class, but not the ones with user-inserted values in them (.toggleval_foc class).
I could also add to that script, that when you hover-out, then it would display the examples again.. But its not the best solution. The best way would be display them from title tag and on submit, the value tag would as it is.
If you could point me to a script or some idea, that would be awesome. I could not find any such script that worked.
What you are describing is placeholder functionality, and it should not be accomplished as a polyfill by putting any values into the real input fields, thus negating your need to clear out invalids on form submittal.
I suggest switching to a plugin that already has this stuff figured out, such as any of the plugins on this page under Web Forms: input placeholder. Modern browsers let you style the placeholder using the ::placeholder CSS pseudo-element and most of these polyfills give you a classed element to style for older browsers.
Put your default values in the field initially, give them a class of wipe, then try something like this...
$('.wipe').addClass('wipeDefault'); $('.wipe').focus(function() {
if (this.value == this.defaultValue) { this.value = '';
$('.wipe').removeClass('wipeDefault');
$(this).removeClass('wipeDefault'); } });
$('.wipe').blur(function() { if (this.value == '') {
this.value = this.defaultValue;
$('.wipe').addClass('wipeDefault');
$(this).addClass('wipeDefault'); } });
Why not bind to the form's submit event instead of the hover? If you do something like this:
$('selector-for-your-form').submit(function() {
$(this).find('input:not(.toggleval_foc)').val('');
return true;
});
Then you'll clear out the default example values right before the form is submitted. You will, of course, have to supply a real selector in place of 'selector-for-your-form'.

How to hide an HTML input field with javascript

I need to hide a text input field with javascript. Changing its type attribute to hidden does not work in IE (security issue).
What would be the best way to do it?
Note: No jQuery or other lib can be assumed.
I assume you have to show and hide the text field dynamically based on changing conditions in the form, otherwise you'd just make it an <input type="hidden"... to begin with.
Keep your code that shows and hides the field as it is, but also catch the onsubmit event.
In the submit handler, get your text field via document.getElementById(...) (or by accessing document.forms[i]) and check to see whether or not it's hidden.
If it is hidden, create a new DOM node for an <input type="hidden" ...> field and add that node to the form, probably via myform.appendChild(...). You'll have to give it the name your server-side code expects. Copy the contents of the hidden text field into the newly created type=hidden field, then return from your submit handler, allowing the standard submit to continue.
You could also just un-hide the text field on submit, but you'd have to move it "off screen" also or the user would see it reappear during submit processing.
Try wrapping it in a div or span and then setting the display style to none when you want to hide it, and then to block (if you used a div) or inline (if you used a span) when you want to show it.
document.myform.myelement.style.display = 'none'
works as expected even in Internet Explorer.
The only way you can change it is before you append it to the DOM. You can make a new element and then replace the current one with it.
Look at replaceChild and createElement since you want to do manual DOM scripting. I assume you know what to do.
EDIT: "Hidden" fields as far as I know are sent. Have you checked whether they are? And you can also just do position:absolute; left:-9999em; to offset them.

post non form values?

I am wondering if it is possible to somehow get the value of a div and attach it to the form post on submit?
Using JavaScript, you can get the DIV contents and insert them into a hidden form field.
An example - a page snippet (jQuery used for simplicity, plain JS would work too):
<form id="yourform" action="/some/uri">
<input type="hidden" name="your_div_content" id="hidden_element" />
<input type="submit" />
</form>
<div id="yourdiv">
This text will be copied into the form using JS
</div>
<script>
$('#yourform').submit(function(){ /* On #yourform submit ... */
$('#hidden_element').val( /* ... set #hidden_element's value ... */
$('#yourdiv').html() /* ... to whatever is in #yourdiv . */
);
});
</script>
Of course, this will only work when JS is enabled in the browser.
You may want to use a hidden field <input type="hidden"> in your form, and then set the value of your hidden field on form submit with the innerHTML of your div.
You could use ajax. That way you could send whatever data you wanted however you wanted.
For instance (this is using mootools):
var req = new Request({url: 'somepage.php', data: 'queryStringDate'});
req.send();
There you go :)
This of cause can be done without any framework, I just don't remember the code in my head :-P
It depends what you mean by the "value of a div".
For example, you can retrieve all HTML inside the div by using document.getElementById(your_div_id_here).innerHTML
Alternatively, you can access values of the div attributes by using e.g. document.getElementById(your_div_id_here).title to access the div's title attribute.
If you intercept the submit event of your form (maybe by intercepting the click event on the form’s submit button), then you certainly can GET or POST with anything including content of an element. With vanilla HTML, however, I’m afraid it’s not possible.
Tucking values into hidden fields might also work, depends on preference. ;)
You could have a hidden input and populate it with the contents of the div before doing your submit, then it would be included.

Categories

Resources