I cannot get a form to submit additional fields that have been cloned. When a form like the one below is submitted, it does not include the cloned form elements. Does anybody know why and how I can alleviate this issue.
<form>
<table>
<tr><td><input type="text" value="50" name="myvar[]" /></td></tr>
<!-- This button will clone the previous set of form elements -->
<tr><input type="button" value="Add New Line" onclick="this.getParent('tr').getPrevious('tr').clone().inject(this.getParent('tr'), 'before')" /></tr>
</table>
</form>
Your HTML isn't well formed, so this.getParent('tr') is returning null at least for me in Firefox. Put the button inside a td that is inside the tr and it works.
JSFiddle: http://jsfiddle.net/delvarworld/r99fN/ clicking the button throws an error
Thanks for the comment but the form was meant to be an example not actually what I had. I looked back at the form and the top form element was inside the table and the bottom form element was outside of the table. I moved the top form element outside of the table and everything works perfectly.
thanks,
Related
Hi I have a following html markup
<h2>First Name Last Name</h2>
<form>
<div>
<input name="fname">
<input name="lname">
</div>
</form>
You click on a header to show the form fields and to edit them (blur hides the fields and shows the header again).
I have a problem because the first and last name are in the same header, so you click on one item to edit two fields.
I am submitting the form on a blur event for the input fields but when I click the last name, because blur is being called in the first name, I cannot edit the second field.
I am using AngularJS which is also presenting a problem because I cannot figure out which element is focused because document.activeElement returns the entire body.
Any help is much appreciated!
Assuming you're using ngBlur directive on the input element, you can mix it with ngFocus to keep elements visible as wanted: <input name="fname" ng-focus="showFields=true;" ng-blur="blurField($event);" >
Using a function for ngBlur, you will have access to the $event object which in turn will expose the elements you need (like target or related). Afterwards, you can trigger form submit depending on your needs.
A demo plunker is HERE.
No validation plugin is working on the form contained inside a jquery Ui dialog box. Using Bassistance jQuery validation plugin, works great out of the ui modal box, no luck working it on the form contained inside the jQuery Ui modal box, nor the validate.js method is working. What might be wrong? Almost pulling hair out for this
Ok, this was not a jquery or any js problem.
The html was not formated properly, the form element was "inside" a table which didnot work,
always have form element enclose a table
<form>
<table>
<tr>
<td><!--input element here--></td>
</tr>
</table>
</form>
and not
<table>
<form>
<tr>
<td><!--input element here--></td>
</tr>
</form>
</table>
If you are enclosing form inside a table cell, it should be ok.
Good Day
I am using an ASP.NET webform where I have wrapped the following button inside the form tags:
<form runat="server">
<button class="btn btn-primary" onclick="window.location='http://google.co.za';">Login</button>
</form>
ISSUE: The problem is that when clicking on the button, it just directs to the current page...does not redirect. However, when I remove the form tags, the button works. If I leave the form tags and I use an anchor tag to relocate, it works as well...It is just the button that is giving me issues.
Why is that?
I am using Twitter bootstrap as well(extra info..)
Thank you
Add type="button" attribute to your button tag. Without it button works as submit.
I need to get the value from outside the form. My gsp looks like this
<g:textField name="email" value="${someInstance?.email}"/>
<input type="button" id="checkEmail" class="button" value="Validate" onclick="checkEmail()"/>
<span id="responseDiv"></span>
<g:form action="save">
someCode
<g:submitButton disabled="true" style="color:#999999;" class="save" name="save" action="save" id="saveButton" value="${message(code: 'default.button.save.label', default: 'Submit')}"/>
</g:form>
First, to check if an email is in use, click button (id="checkEmail") and onclick goes to js code checkEmail() which has remoteFunction that updates responseDiv. After that, user enters information to the form, and user clicks submitButton. When that submit button is clicked, I would like my gsp to send email value along with other information to the controller. Any suggestion?
Thanks in advance.
Easy, put the input inside the form.
If that isn't an option for some reason, use the callback to update a hidden field inside the form with something like $("#hiddenEmail").val(emailAddress);
PS. I like how you gave a span an id of responseDiv :)
Hello
I got similar to that code
<form method="post" action="/" name="form" autocomplete="off">
<input type="text" name="title" />
<textarea name="body"></textarea>
<input type="text" name="tags" />
<input type="submit" name="submit" value="Send" />
</form>
Where the "textarea" is tinyMCE... problem comes when I try to move selection through input and textarea items.
When the page is loaded it focus input[name=text] but when I press Tab key it select input[name=tags] instead textarea[name=body] (which is next)
Can you assist me with that issue ?
This is impossible with conventional tab indexes as TinyMCE actually hides the <textarea> and creates an <iframe> with the editor in it. You could make a work around by forcing focus on the editor in the blur event of the previous element in javascript, here is ajQuery snipped of the top of my head:
$('#prev-input').blur(function(){
tinyMCE.get('textarea').focus();
});
Then as soon as the user leaves the previous input focus would jump to the TinyMCE editor, you could possibly add a blur() method as well to got to the next element.
I resolved this with adding 'tabfocus' to plugins and then add tabfocus_elements : ":prev,:next"
http://tinymce.moxiecode.com/wiki.php/Plugin:tabfocus
http://tinymce.moxiecode.com/wiki.php/tabfocus_elements
There is a plugin solved it
http://sourceforge.net/tracker/index.php?func=detail&aid=1657397&group_id=103281&atid=738747
I known it from TinyMCE forum
http://tinymce.moxiecode.com/forum/viewtopic.php?id=813
I needed a custom tabbing order from another element on the page. The code I used to resolve this in IE11 was
var button = $('#btn-id');
button.on('keydown', function (e) {
if ((e.which === 9 && !e.shiftKey)) {
e.preventDefault();
$(tinyMCE.get()[0].contentWindow).focus();
}
});
Be aware that the above code will only work if you've only got one editor on the page. Otherwise you'll have to cycle through the array returned by tinyMCE.get() to find the correct editor to set focus to.
I found out that the focus event is being triggered but focussing in the element (container) didn't work all the time.
In my case I tabbed from editor 1 - 4 and when I shift+tab I lost focus on the instance.
To fix this I added the following to the setup event of tinyMCE
setup: function(editor) {
editor.on("focus", function(e) {
e.target.editorContainer.scrollIntoView();
});
}