We Keep Coding

How to clone form fields without their values?

How to clone following html without persisting the field values?
<form method=POST action="/url">
<div class="form-group" data-answer>
<div class="pull-left"><label><input type="checkbox" name="answer[1][is_correct]" value="true"> Correct Answer</label></div>
<div class="pull-right">
</span>
</div>
<input type="text" class="form-control" name="answer[1][body]" placeholder="Possible answer">
</div>
<div class="form-group" data-answer>
<div class="pull-left"><label><input type="checkbox" name="answer[2][is_correct]" value="true"> Correct Answer</label></div>
<div class="pull-right">
</span>
</div>
<input type="text" class="form-control" name="answer[2][body]" placeholder="Possible answer">
</div>
. . .
<button type="submit">Submit</button>
</form>
I can see only 3 possible choices here. However, all of them come with major flaws:
.clone() the .form-field normally and reset the field values.
Problem: resetting all the values one by one is cumbersome and is not a future-proof solution. For example, if more fields are added into the .form-group, their values will need to be cleared separately.
Include a hidden .form-group as a template on the page.
Problem: as you see, the input fields contain enumerated names like: answer[1][body]. It is convenient to clone the last .form-group and just increment the value by 1. Cloning the templated .form-group will be lacking this flexibility.
Read the fields as raw html and transform them into JQuery object
Problem: this seems to be a clear solution to me, however I couldn't get it working. The code $.parseHTML($('.form-group').html()) does not return a valid JQuery object, which I need to use .find() and other methods on.
What will be an effective and elegant solution to this problem?

Try this code:
$("button").click(function(){
var t = $("form").clone().appendTo("#clonedForm");
$(t).find("input[type=checkbox],input[type=text], textarea").removeAttr("checked").val('');
});

Validate for a button click/selected in Magento using the built-in validation

I know the Magento validation javascript library is pretty powerful, however I am trying to make Magento recognise 3 buttons and have the user be forced to select one before they can proceed, is this possible using the current javascript library in Magento.
This isn't a problem usually but in this case rather than input buttons I am using a standard button (probably not the best way to approach this tbh)
<li class="fields">
<div class="field">
<button class="button organisation_type" value="1" type="button"><span><span><?php echo $this->__('Org A') ?></span></span></button>
<button class="button organisation_type" value="2" type="button"><span><span><?php echo $this->__('Org B') ?></span></span></button>
<button class="button organisation_type" value="3" type="button"><span><span><?php echo $this->__('Org C') ?></span></span></button>
</div>
</li>
Is it possible using the built in library which uses the css classes to have this request the user to select one button from the three above?

is it possible for you to use radio-button instead of buttons?
if the answer is yes - then you can add 3 radio buttons (for the 3 organisations), give them the same name so the user can select only one value, and then add them the class "required-entry".

How input and remove field with javascript?

i would like to create two buttons, one where the user can press it and then appears a drop drown and a input text field and another to remove this one, if the user wishes.
I already searched it in Google but can't find it.
Best regards,
Valter Henrique.

[working demo here: http://jsfiddle.net/GNnSw/1/][1]
your html
<div id="box" style="display:none;">
<select>
<option value="test">Test</option>
</select>
<input type="text" value="" id="text1" />
<input type="text" value="" id="text2" />
</div>
<input type="button" value="show" id="show" />
<input type="button" value="hide" id="hide" />
in jQuery:
$('#show').live('click', function(){
$('#box').show();
});
$('#hide').live('click', function(){
$('#box').hide();
});
http://jsfiddle.net/GNnSw/4/

using jquery it would take something like:
<button onclick="$('form').show();">press it</button>
<form>
//input elements
</form>
Search harder in google btw.

Do it with jQuery.
HTML
<button id="buttonid" value="Click on me!">
jQuery
$("#buttonid").click(function(){
var $input = '<input id="inputid" type="text" value="value">';
// make the input field
var $select = '<select id="selectid"></select>';
// make the select
var $opt1 = '<option name="one">one</option>';
var $opt2 = '<option name="two">two</option>';
// make two options
$select.append($opt1).append($opt2);
// append to select the options
$(this).after('<form action="url" method="POST"></form>').append($input).append($select);
// append input and the select after the button
});
Oh yeah. :) Btw you need jquery library.

Create a "placeholder" for your fields:
<div id="placeholder"></div>
Add the buttons / links:
<a onClick="add()">Add Form</a><a onClick="remove()">Remove Form</a>
And this to your javascript-file:
function add() {
document.getElementById('placeholder').innerHTML = "Code for your form...";
}
function remove() {
document.getElementById('placeholder').innerHTML = "";
}

I guess the best way of achieving flexible and user friendly HTML layout it by using external JavaScript library, such as jQuery or mootools. The reason is - in traditional web frameworks after you send HTML content to web browser, server cannot manipulate with it. Also, I guess good principle is to use Java only for serving content, and using client-side framework to do all the magic with User Interface.
Moreover, You will find plenty of examples how to work with those libraries like this one.
If you would really like to stick to plain Java, since you might know anything about JavaScript, I suggest checking out Google Web Toolkit and Vaadin. You can write Java code almost without any restrictions, and it will be "converted" (compiled) to JavaScript automatically. But that decision should be considered deeply, since learning GWT or Vaading might be more time consuming and not always applicable.

javascript input focus

<form id="commentform" method="post" action="wp-comments-post.php">
<input type="text" aria-required="true" tabindex="1" size="22" value=""
id="author" name="author">
</form>
I set default value "visitor" to the input box. When focus is in text box or mouose enters it, I want to hide "visitor" string and want to show it when it loses focus or mose moves out.

Try using the HTML5 placeholder attribute:
<input type="text" aria-required="true" tabindex="1" size="22"
placeholder="visitor" id="author" name="author">
While browser support is not 100% there yet, this will give you a standard way to achieve what you're trying to achieve, without going through unnecessary hoops.
Another thing you can try is to overlay the input element over some text and make it transparent/translucent when not in focus and opaque when in focus/filled.
As of today, Tumblr's login page uses this trick:
<div class="input_wrapper" id="">
<label for="user_password">Password</label>
<input type="password" id="user_password" name="user[password]" data-validation-type="password" value="">
</div>
Through CSS magic this becomes:

Looks like you are using WordPress, so you have the jQuery library on your site.
You can use my jQuery plugin to achieve this.
Example
jQuery
$('#author').inputLabel({
customLabel: 'Visitor'
});
In this case, I had to specify the label myself, but the plugin works without this by finding the relevant label element to the input, which should be present for accessibility.
jsFiddle.

If you are up to HTML 5 yet then try this:
<script type="text/javascript">
var prompt="visitor";
var txt=document.getElementById("author");
txt.onfocus=function(){txt.value='';}
txt.onblur=function(){
if(txt.value==''){
txt.value=prompt;
}
}
</script>

Ates Goral's answer looks very interesting. please try it first shot. this is an alternative if you do not want to sweat..:)
i would suggest using a watermark plugin. there are many available.
have used this plugin before. worked fine. gives you nice control.
the plugin requires jQuery

Though I too would use jQuery or CSS and a pseudo-class (:focus)....
Here's an easy JS solution that does exactly what you're after. Again, I wouldn't recommend this approach for more than one or two input fields.
<input type="text" value="Visitor" onFocus="this.value='';" onBlur="this.value='Visitor';" id="author"/>

chrome/safari (webkit?) does not post values when submitting via Javascript .submit()

I'm submitting some of my forms with javascript/jquery.
$("#myform").submit();
this works fine in Firefox, but in Safari or Chrome, none of my form values are posted.
When I check the $_POST variable, in Firefox it's filled up correctly, but on safari/chrome the $_POST values are empty.
I submit like this when the dialog's OK buttong gets clicked (works fine in FF)
$("form#form_add_file_to_theme").submit();
this is my form (the surrounding div becomes a .jQuery UI dialog)
<div id="modal_create_themefile" style="display:none;">
<form action="" id="form_add_file_to_theme" name="form_add_file_to_theme" method="post">
<div class="field">
<label for="var_template_name">File name</label>
<input type="text" class="text" id="var_template_name" name="var_template_name" />
</div>
<div class="field">
<label for="var_template_type">File type</label>
<select id="var_template_type" name="var_template_type">
<option value="css">CSS</option>
<option value="include">Partial</option>
<option value="js">Javascript</option>
</select>
</div>
</form>
</div>
printing $_POST in php gives:
Array ( [var_template_name] => [var_template_type] => css )
so the select box gets submitted, not the text fields...
UPDATE: when I pass the value="test" options hard coded in my text fields, they get submitted. However, changing the values (what a normal user would do) after the page has loaded, has no effect in webkit. Chrome & Safari just take the "initial" or "default" values to submit.

As there is an item named "var_template_name" in the POST data that reaches the server, it means that the textbox is included in the post, but the value is empty.
So, somehow the value is cleared before it's posted.
Do you have any Javascript that verifies the contents in the form? Check that you haven't accidentally made an assignment, something like this:
if (document.getElementById('var_template_name').value = '')
instead of a comparison:
if (document.getElementById('var_template_name').value == '')

jQuery UI dialog is somehow creating or moving the form into the dialog, while webkit doesn't know this. Webkit just takes the original form code and submits that.
I could fix it by doing this:
dialog.data("dialog").uiDialog.find("form").submit();
that way, any browser is forced to look for the correct form in the dialog, not just in the page.

I've encountered the same problem. I have a theory that the form submit gets terminated once the page changes, thus it becomes incomplete. That's just a theory mind you, unprovable unless I analyze the webkit internals.
My solution - use ajax instead of form submit.
$.post("/submit_url",$("#form_id").serialize());
I'm not absolutely sure that strategy always works, but it might.

I have also encountered a similar problem. I have struggled a few hours and found how to get it work right. Here is my dialog html after the fix. I had the opening form tag outside of "interest-edit-dialog" div at first. The dialog didn't post input variables then. I was inspired by Jorre and I checked the source with Chrome tool when the dialog is up, and found the opening tag was gone. So I moved the opening form tag inside of "interest-edit-dialog" div. That is basically it. The input variables were posted all right. It means that you can't put your form tag outside the dialog html you register with jquery.ui.
<div style="display: none; z-index: 1000; outline-width: 0px; outline-style: initial; outline-color: initial; position: absolute; " class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog-form">
<div id="interest-edit-dialog" title="whatever" class="ui-dialog-content ui-widget-content">
<form id="interestDialogForm" name="interestDialogForm" action="einterest" method="post" enctype="multipart/form-data">
<p class="validateTips"></p>
<fieldset>
<?php echo $interest_list; ?>
<p><input type="text" id="myinterest1" class="myinterest1" name="myinterest1" value="FOO" /></p>
<p><input type="text" id="myinterest2" class="myinterest2" name="myinterest2" value="BAR" /></p>
<p><input type="text" id="myinterest3" class="myinterest3" name="myinterest3" value="" /></p>
<p><input type="text" id="myinterest4" class="myinterest4" name="myinterest4" value="" /></p>
<p><input type="text" id="myinterest5" class="myinterest5" name="myinterest5" value="" /></p>
<input type="hidden" name="serial" id="serial" value="" />
</fieldset>
</form>
</div>
<div class="ui-dialog-buttonpane ui-helper-clearfix">
</div>
</div>
The javascript code to submit above form is
$("#interestDialogForm").submit();