653 comments found.
I assume that you missed my post and that is why you never replied to it. So I will post it again:
I can’t validate select dropdown or single file field. I assume this is because of the javascript used to modify them. How can I use the inline validation on input types: select, file?
As file input uses background replacement plugin, you will need to modify jquery.filestyle.js and manually add required class.
With checkboxes – sharmstr mentioned, i am working on update, but with delay because of family stuff.
Hi there, I really need to use the ‘wizard’ page you included but have come across a slight issue before I start. Like many I would use this for an application form, the problem I have is a form cannot span across multiple DIVs can it?
I created my form and tested, then split into 3 sections and placed in the divs. Now the form wont submit or accept dynamic data from menu lists. I presume this type of wizard is created for forms, are you aware of any way round this issue?
Also where can I change the action of the finish button, I have several things I need the button to do such as inserting data into a database.
regards
Gary
For the form submit button you need to change tag and attributes for Finish button, something like
("<input>").attr("type","submit").attr("value","submit")
instead of
("<a>"+c.labelFinish+"</a>").attr("href","#")
Some time ago i recommended to use this plugin for forms wizard, cause it’s more flexible to use with forms than smartWizard. I’ll try to add it in my next update
Hi, any idea where I should change the code you suggested? It doesn’t exist in the UI page at all? I need to use something like
<input type=”image” name=”Insert” id=”Insert” value=”Insert” alt=”Insert” src=”red button” />
Can we not use forms across the tabs in the wizard then? That’s going to cause me lots of pain, I have 8 forms I need to build like this!
Thanks
It needs to be changed directly in jquery.smartWizard.min.js
I believe you can use multiple wizards, but for Submit button use only general attributes like type=”image” and value. Check here
Or the second solution is to submit your form through onFinish event
onFinish: null // triggers when Finish button is clicked
("<input>").attr("type","insert").attr("insert","insert")
This made no difference the form doesnt submit data & is sent back to #?
Sorry are you able to see where I am going wrong, I cant? Currently my form submission is
<input type="image" name="Insert" id="Insert" value="Insert" alt="Insert" src="insert.gif" /><br />
<input name="WADAInsertRecordID" type="hidden" id="WADAInsertRecordID" value="" />
I did take a look at the other wizard but would take an age to format to fit into your site for me. If it cant be done, fair enough I will have to use normal forms.
The second solution was to submit form with onClick event:
<a href="javascript:document.form.submit();">Finish</a>And with this:
("<input>").attr("type","insert").attr("insert","insert")
should be
("<input>").attr("type","image").attr("name","insert").attr("id","insert") ....
Hi & thanks for quick reply. I added
("<input>").attr("type","image").attr("name","insert").attr("id","insert") to line 2 replacing existing code, this does nothing except go back to 1st step, really confused with this.
I then tested option 2 [I think] by adding
<a href="javascript:document.form.submit();">Finish</a>to the form, this just added a ‘finish’ link that again cleared the form but submitted nothing?
Is there another wizard form coming in next release that can work better for forms?
regards
Just tested the second method, it works fine.
Open jquery.smartWizard.min.js, find:
("<a>"+c.labelFinish+"</a>").attr("href","#").addClass("buttonFinish")
and replace it with
("<a>"+c.labelFinish+"</a>").attr("href","javascript:document.form.submit();").addClass("buttonFinish")
Hi there, thanks again for your time and effort, that didn’t submit the form either, just sends it back to step1. Being clueless I even tried changing form to the actual form name with no joy.
<a>"+c.labelFinish+"</a>").attr("href","javascript:document.form["WADAInsertForm"].submit();")
This just screwed the form layout and removed finish button!
Baffled!
That is really weird. I tried this code with onClick event, it worked fine for me, form was submitted.
Check again your code, maybe you missed some tag or something?
Yes it is odd indeed, only code I have changed is what you sent me so far? Line 2 of the js file is:
p=a("<a>"+c.labelFinish+"</a>").attr("href","javascript:document.form.submit();").addClass("buttonFinish");c.errorSteps&&c.errorSteps.length>0&&a.each(c.errorSteps,function(a,b){v(b,!0)});m.append(d);i.append(l);b.append(m);b.append(i);i.append(p).append(n).append(o);w=m.width();a(n).click(function(){x();return!1});a(o).click(function(){y();return!1});a(p).click(function(){if(!a(this).hasClass("buttonDisabled"))if(a.isFunction(c.onFinish))c.onFinish.call(this,a(f));else{var d=b.parents("form");d&&d.length&&d.submit()}return!1});
I haven’t change anything else in the html page except adding my own form.
Right, i used the same code. Could you give me a link, i’ll check?
Just uploaded a test file to hosting with mysql backed, This works using a normal form. http://ghldatastream.co.uk.predns.ourwindowsnetwork.com/ui_elements.php
Cheers
Check this out. Try to add action attribute, maybe it will solve your issue..
Hi, the form doesn’t need an action, its inserting data into 2 tables and works fine before I apply the ‘Its-Brain’ template to it? I have uploaded the original and you can see there still is no action but the form submits fine using my insert button? http://ghldatastream.co.uk.predns.ourwindowsnetwork.com/ui_elements.php
I appreciate your help but I have spent 2 days on this now with no joy and its held up the project, I may need to just use a simple long form or find another template which allows form submission, its a shame as this one is nice style.
I uploaded a test page with the same code, as you can see there form submission works here.
First thing – you closed wrapper div after footer, it should be closed before footer part. I mentioned yesterday that you have some html errors and asked to check your code once again. I’m trying to get your issue solved, but i really don’t understand the logic that you used for your form submission.
You can easily use onClick event for submission, one form for one wizard
Hi there, yes I do appreciate your time, I understand its hard to cater for everyone’s needs, however the wizard is one of the reasons I bought the template. From what I can see your example does exactly the same as mine, it takes user back to ’#’ / step 1, you haven’t any data to submit?.
Did you manage to see my latest upload where the insert button works no problem? Its using the ‘its-brain’ finish button that causes the issue I think? If I could even use my insert button with its correct submit code in place of the red finish button that would suffice for now and allow us to progress, would I be able to edit css to put the ‘insert button’ in place of the red finish?
In effct I need this code to submit the form however I manage to do it?
<input type="image" name="Insert" id="Insert" value="Insert" alt="Insert" src="WA_DataAssist/images/Slate/Traditional_insert.gif" />
Thanks again.
Check my test page once again, i inserted your image and changed usual link to input type=”image” with your attributes. As i see it works 
Hi, thanks again maybe I’ve been looking at this too long, I’m afraid Just don’t get it, think we best just leave it, I will look around for another template that allows image button on submit.
I think I’m correct in saying I cant use use the ‘its-brain’ demo red finish button with my submit code & I cant use the insert button in your demo as it looks bad on screen when the insert button lays on top of the red and creates scrollbars.
Thanks again.
It’s up to you 
I didn’t change styles for finish button, i just placed your image on top of finish class. To remove those styles you need just to remove backgrounds, extra paddings etc. It was a quick draft from me. So your form still doesn’t work?
Hi, No I cant test yet as I cant track down where you have placed the insert button over the finish button? Been through main.css, I am using Firebug and still cant locate where the class is I need to replace.
I see this entry
.swMain .buttonFinish { display:block; float:right; margin: 8px 12px 0 0px; padding: 6px 12px; } but no link to the image or where to remove all padding etc.
Download this file and change paddings to your needs in that class you mentioned. On those 3 steps finish button has disabled class. I think you can edit that disabled class to your needs – add opacity, overlays etc. so you can show to the user that on every step except the last one Submit button is inactive.
Ahhhh, that looks much better, I can edit css later to mirror the button styles inlcuded. If you look at my example again http://ghldatastream.co.uk.predns.ourwindowsnetwork.com/ui_elements.php, it still doesn’t submit the form in the manner that my original insert does? How did you achieve that? I’ve left my ‘insert button’ in, it inserts data into tables then redirects.
Sorry forgot to add I have copied the js file across and can see where ypou have added the ‘attr’, should that act the same as my original inserts?
p=a("<input type='image'>").attr("name","Insert").attr("id","Insert").attr("value","Insert").attr("alt","Insert").attr("src","http://ghldatastream.co.uk.predns.ourwindowsnetwork.com/WA_DataAssist/images/Slate/Traditional_insert.gif").addClass("buttonFinish")
Yeah, it works in the same manner and has the same attributes.
The only difference i can see is you have parent WADADataNavButtons class. Is there any connection between this class and your original input image?
That is very strange, I’ve stripped the original button down to a simple link with no class, that works fine and inserts form data to 2 tables, the insert from the JS file doesn’t now only inserts data into one table!.
Not sure if this has anything to do with it, but immediately under the original insert button this exists:
<input type="image" name="Insert" id="Insert" value="Insert" alt="Insert" src="WA_DataAssist/images/Slate/Traditional_insert.gif" />
<strong><input name="WADAInsertRecordID" type="hidden" id="WADAInsertRecordID" value="" /></strong>
Give me a bit more time, i will try to come up with solution for you
Hi there, don’t worry you have helped me more than enough. One of the problems was to do with menu/list fields within the form. If they were anywhere except ‘step1’ they wouldn’t display any data.
The other issue was I had 2 sql inserts being triggered, 1 was set to only insert on a specific button, changed to any form submit and all worked fine.
Viewing the wizard in IE seems to ignore the padding option we removed earlier but again no big issue.
Thanks again, think we are there now!
wanted to call an action when the user clicks on the menu in the user_nav .. how do i do that ..
also in the left nav i dont want to disable the “activeTab” even on selection .. the user should be able to click the selected tab too
The first question – didn’t get it, please clarify.
Second – add id=”current” to the parent menu item, so it will be expanded when child menu item is active
Do I need to know JS to be able to adapt this template to my needs?
Basically yes, at least understand how to turn on/off plugins.
But if you want to modify general look only, i think you can do it in HTML /CSS only
I love this template, bought it 4 days ago and it works like charm with my cakephp implementation. Thx man!
Thanks!
Hi,
On the validation forms, password match always complains about them not matching, even though they are same. Below is the HTML and JS code for reference. Your advice is much appreciated
HTML Code <label>Login Id (E-Mail Id):</label> <input type=”text” value=”” class=”validate[required,custom[email]]” name=”emailValid” id=”username” /> <label class=”topLabel”>Enter Password:</label> <input type=”password” class=”validate[required,equals[password]]” name=”password” id=”password1” />JS Code, I tried with validationEngine with ‘attach’ param and without it too. });
$("#createuser").click(function(event) {
$("#newuser").validationEngine('attach');
});alert($("#newuser").validationEngine('validate'));if($("#newuser").validationEngine('validate')) {
$.ajax({
url : "http://localhost/wlife/v1/user",
type : "PUT",
success : function(data) {
location.replace("users.html");
},
beforeSend : setLoginHeader,
error : function(data) {
location.replace("500.html");
},
statusCode : {
403 : function() {
location.replace("403.html");
},
404 : function() {
location.replace("404.html");
},
204 : function() {
location.replace("login.html");
},
405 : function() {
location.replace("405.html");
},
500 : function() {
location.replace("500.html");
},
503 : function() {
location.replace("503.html");
}
}
});
}Try to replace
if (field.val() != $("#" + equalsField).val())
with
if (field.attr('value') != $("#" + equalsField).attr('value'))
in validationEngine.js, line 710.
And use equals[password] only in second field
it is difficult to implement a form field that has a button at the bottom, similar to the search that has index.hmtl. I tried to put even more failed.
search widget has a right button right after input field, not at the bottom.
Generally at the bottom i used only submit buttons.
So what exactly do you want to do?
is right yes. I wrote wrong. i tried to put the widget on a normal form the component loses dimensions.
Still didn’t get your issue 
You want to use input field like in search widget, but with button at the bottom (below the input)?
I want to put (This) with a normal text input of my form.
For search widget i used different styles and sizes. If you want to use same styling for your search input as your usual form input styles, you need to create new smaller search button and new styles for it, like to add absolute position etc.
Hi there, Hate to bother you with some dummy question but I’m having a little hard time to setup a Google Calendar URL feed to display events into the calendar area.
I have checked your documentation few times and also I have checked http://arshaw.com as well, I still don’t understand what I’m missing. As far I could see fullcalendar.js and cal.js are the same, which means I don’t need to change anything here. For other side when I have my url feed applied nothing happens. Also I have noticed a gcal.js going on in the arshaw.com example.
Finally my question; Is there any easy way to set this thing up in your framework or I have to give it up?
Thanks man.
I can’t validate select dropdown or single file field. I assume this is because of the javascript used to modify them. How can I use the inline validation on input types: select, file?
Hi,
I have a prob with charts.html (origins page), no tooltip in the graphics…
You can help me please for resolv this prob.
just replied to your email
Theme will be updated within a week, i will replace jqtransform plugin with another one, because it is suitable for usual websites, but for specific options of backend systems it works with bugs. Sorry for that, my bad, didn’t predict these options.
When will the update be ready? (with also the other fixes?)
Thanks!
Hey!
A bit busy now with family stuff, it’s 80% done, just can’t get back to it. Will try to finish it today.
Thanks for patience
A timeschedule would be nice
1 day, 3 days ? etc.
Please allow me up to 4 days, i just don’t have enough time right now to finish it, my kid got sick
I will let everyone know when it will be ready
Thanks
Thats fair
Good luck with your kid.
Me again. Thanks for your help before. I have another question: In the login page, i cant locate the file where i can change the login user and password, can you guide me to it? Thanks!
You need to change values for input fields, look at attributes for inputs inside login form
so its in the login.html page?
Sure, find there
<input type="text" value="login" />
and change that value or remove it
well the correct question is where is that login form located? I removed it and I could put whatever and it let me through. Is there a way to specify what has to be typed?
I’m not really able to apply the change event on a select. is that you can help me? ...
in form, it is hard I put fields side by side?
what do you mean side by side? Several inputs in 1 row? You can do it, but you need to add specific css styles for your needs. The only thing i made in this way is dara rows with filter and form with 2 columns
excuse to mark your comment as inappropriate. it was an accident. Here is an example of what I would do.
help me, please
Hey. Sorry, missed your last message.
All you need to do is to create new classes with fixed width and margin between them. By default i didn’t create these styles, i just added 2 columns layout for forms.
Something like
<div class="leftClass"><input type="text"></div> <div class="rightClass"><input type="text"></div>
and in .css
.leftClass, .rightClass { width: 100px; float: left; }
.rightClass { margin-left: 10px; }
I do not want to leave your reasoning. As I’m using liquid layout I put the width to 45%. More the problem is that the structure was broken because of the margins and padding of the label and input.
Ok, i see now, sorry i thought you are using fixed layout.
Just try to add an additional class then and specify smaller width for inputs inside this class, it should work
Hello. Is there a way how can I load ajax content into a modal window? I want to create remote forms (via ROR ) and I would love to have this done through ajax modal window. Thanks for any advice!
Great theme so far..
Hi there, just wondering if you included text column styles like many other templates, for example full width, 2 column, 3 column, 4 column etc etc?
Could I perhaps have maybe 4 widgets in 4 columns displaying: 1= text, 2=calender, 3=dynamic table, 4= graph?
regards
Gary
no, i didn’t add columns since i didn’t use grid system.
If you need them you can add manually with something like this:
.oneFour { width: 157px; float: left; margin-left: 32px; }
.oneFour:first-child { margin-left: 0; }
Thanks. I can get the form to more or less align (although I would prefer an option to have labels to the left of input if possible).
I still can’t make the select to render properly:
with jqTransform applied the problem is as it was before (selected item hidden under select box) and label is not on top but gets moved to the left of select.
without applying jqTransform and using regular elements select is visible but label gets move to the left of select.
Can you see if there’s something I’m missing here (missing class etc) that would make select and label align. Again, I think a more complete sample of a form with a couple different elements would be very helpful:
<form method=”post” id=”edit-item-form” class=”mainForm” action=”action.html”><label>Username</label> <input type=”text” value=”asdasdasd” name=”UserName” id=”UserName” data-val-required=”The Username field is required.” data-val=”true”> <option value=”3”>Uploader</option> <option value=”2” selected=”selected”>User</option> </select>
<label>Role</label><select name="RoleId" id="RoleId" data-val-required="The Role field is required." data-val-number="The field Role must be a number." data-val="true"><option value="1">Administrator</option><label>Password</label> <input type=”password” value=”” name=”Password” id=”Password” data-val-length-min=”6” data-val-length-max=”100” data-val-length=”The Password must be at least 6 characters long.” data-val=”true”> <label>Confirm password</label> <input type=”password” value=”” name=”ConfirmPassword” id=”ConfirmPassword” data-val-equalto-other=”*.Password” data-val-equalto=”The password and confirmation password do not match.” data-val=”true”> <input type=”submit” class=”greenBtn submitForm” value=”Save” id=”submit”> </form>
Hi,
I’m using liquid theme and trying to make forms (as in form_elements.html) work with jQuery dialog using a form like:
<form method=”post” id=”edit-item-form” class=”mainForm” action=”action.html”> <fieldset> <label>Username</label> <input type=”text” value=”asdasdasd” name=”UserName” id=”UserName” data-val-required=”The Username field is required.” data-val=”true”> </fieldset> </form>Two problems I have are:
1) labels not aligned horizontally with inputs 2) selected item in selects doesn’t appear inside the input but is hidden behind the input and shifted to the right so half of the selected item is visible from beneath select.
If possible I would appreciate an official sample to see the best way to have forms embeded in a dialog. Thanks.
I added dialog with forms inside, but i didn’t add labels there because of dialog fixed size. You can add it by yourself, but put it above the input field. For dialog inputs i used another styles, please check the latest version
why i need things above:
- i want a 2-month-inline-datepicker OR 2 inline datepickers beside.
- user should select a RANGE (startdate and enddate)
- startdate must be lower then enddate
- enddate MUST be a pre-given date
any help?
This item was featured on ThemeForest
Elite Author
Contact the Envato Market Help Team
