I have the below code that is being used in cms page pop up
the problem im having is if you leave email address input field blank and hit the submit (in the case "Get Code" button, you briefly see the red validation message but then hides the form, shows the hidden div.
why or how can I prevent this process, i want it to validate but proceed to show the hidden div content. Below is the code.
<div id="pop-confirm" style="display: none;">
<h1 style="color: #000000; font-weight: bold;">THANKS!</h1>
<p> </p>
<h2>Use code: <strong>extra15</strong><br /> for 15% off your purchase.</h2>
</div>
<form id="newsletter-validate-detail" action="home/send" method="post" onSubmit="new Ajax.Updater({success:'newsletter-validate-detail'}, 'newsletter/subscriber/new', {asynchronous:true, evalScripts:false, onComplete:function(request, json){Element.hide('newsletter-validate-detail');Element.show('pop-confirm');}, onLoading:function(request, json){}, parameters:Form.serialize(this)}); return false;">
<div class="block-content">
<h2>ENTER YOUR EMAIL<br /> AND GET</h2>
<div class="form-subscribe-header">
<h1>15% OFF</h1>
<br />
<h1>EVERYTHING!</h1>
</div>
<div class="input-box"><input id="newsletter" class="input-text required-entry validate-email" title="Sign up for our newsletter" type="text" name="email" /></div>
<br />
<div class="actions"><button class="button" title="Get Code" type="submit"><span><span>Get Code</span></span></button></div>
<br />
<p><em>* Promotion ends April 6th</em></p>
</div>
</form>
<script type="text/javascript">// <![CDATA[
var newsletterSubscriberFormDetail = new VarienForm('newsletter-validate-detail');
// ]]></script>
Im very new to ajax so maybe ive done something wrong.
any ideas or suggestion would be greatly appreciated.
Thanks
Try changing your onSubmit to the following:
onSubmit="if(newsletterSubscriberFormDetail.validator.validate()){ new Ajax.Updater({success:'newsletter-validate-detail'}, 'newsletter/subscriber/new', {asynchronous:true, evalScripts:false, onComplete:function(request, json){Element.hide('newsletter-validate-detail');Element.show('pop-confirm');}, onLoading:function(request, json){}, parameters:Form.serialize(this)}); } return false;"`
This wil trigger the validator before submitting the form with AJAX. Works perfect for me :)
Related
<div class="ty-company-fields">
<div class="apply_for_vendor_account">
<h1 class="tygh-top-panel ty-dropdown-box__title ty-mainbox-simple-title ty-mainbox-simple-container clearfix ty-homepage-vendors">Calculator</h1>
<form action="" method="post" name="calculator" id="calculator">
<div class="ty-control-group">
<label for="contact_form" class="ty-control-group__title cm-required ty-input-text cm-focus" >Please Enter First Number</label>
<input type="text" name="cal[value1]" id="contact_form" size="32" value="{$cal.value1}" class="ty-input-text cm-focus ty-control-group_title cm-required" />
</div>
<div class="ty-control-group">
<label for="contact_form_number" class="ty-control-group__title cm-required">Please Enter Second Number</label>
<input type="text" name="cal[value2]" id="contact_form_number" class="ty-input-text cm-focus ty-control-group_title cm-required" size="32" value="{$cal.value2}" />
</div>
{if $result }
<p>The Result is: {$result}</p>
{/if}
<div class="buttons-container">
{include file="buttons/button.tpl" but_text=__("submit") but_name="dispatch[calculator2.add]" but_id="contact" but_meta="ty-btn__primary" value = "+" data-ca-target-form="calculator" data-ca-dispatch="dispatch[calculator.calculator]"}
{include file="buttons/button.tpl" but_text=__("submit") but_name="dispatch[calculator.add]" but_id="contact" but_meta="ty-btn__primary" value = "+"}
{include file="buttons/button.tpl" but_text=__("submit") but_name="dispatch[calculator.add]" but_id="contact" but_meta="ty-btn__primary" value = "+"}
{include file="buttons/button.tpl" but_text=__("submit") but_name="dispatch[calculator.add]" but_id="contact" but_meta="ty-btn__primary" value = "+"}
</div>
</form>
</div>
</div>
you can use the normal form and normal submit button, Normal way is also works fine in cs cart.
In this case, when you press the button the whole values are post to controller calculator.add and take the actions.
Inside form tag in action attribute, you need this:
<form action="{""|fn_url}" method="post" name="calculator" id="calculator">
...
</form>
In the first parameter you could also insert a specific dispatch value, for example calculator.manage if you want to navigate to specific page of yours or leave it empty.
Moreover, inside your tpl file add this at the bottom (and inside capture smarty tag):
{capture name="buttons"}
{include file="buttons/save.tpl" but_name="dispatch[calculator.manage]" but_role="submit-link" but_target_form="calculator"}
{/capture}
this capture smarty tag, will add the general Save button of cs-cart, at the right top corner.
Now, you probably have a controller file named calculator.php which also contain code like that:
if($mode == "manage") {
//your code here
}
Python/Plone: Getting all keywords and showing for EDIT content is very slow (keywords.pt)
No of keywords is 20000 so traversing these huge no of keywords is taking one minute.
Keywords which no has grown large is taking time....any solution is welcomed
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
i18n:domain="plone">
<head><title></title></head>
<body>
<!-- Keyword Widgets -->
<metal:view_macro define-macro="view"
tal:define="kssClassesView context/##kss_field_decorator_view;
getKssClasses nocall:kssClassesView/getKssClassesInlineEditable;">
<div metal:define-macro="keyword-field-view"
tal:define="kss_class python:getKssClasses(fieldName,
templateId='widgets/keyword', macro='keyword-field-view');
uid context/UID|nothing"
tal:attributes="class kss_class;
id string:parent-fieldname-$fieldName-$uid">
<ul metal:define-slot="inside">
<li tal:repeat="item accessor"
tal:content="item"/>
</ul>
</div>
</metal:view_macro>
<metal:define define-macro="edit">
<metal:use use-macro="field_macro | context/widgets/field/macros/edit">
<tal:define metal:fill-slot="widget_body" define="contentKeywords accessor;
allowedKeywords python: context.collectKeywords(fieldName, field.accessor, widget.vocab_source);
site_props context/portal_properties/site_properties|nothing;
format widget/format | string:select;
allowRolesToAddKeywords site_props/allowRolesToAddKeywords|nothing;">
<div tal:condition="allowedKeywords" id="existingTagsSection">
<tal:comment tal:replace="nothing">
dl semantically associates selector name with values
</tal:comment>
<dl id="existingTags">
<label for="subject">
<dt id="existingTagsTitle">uuuuuuuuuuuuuuuuuuuuuuuuu
<span i18n:translate="label_select_existing_tags">
Select from existing tags.
</span>
</dt>
<span id="existingTagsHelp" class="formHelp" i18n:translate="label_existingTagsHelp">
Use Control/Command/Shift keys to select multiple tags.
</span>
<tal:comment tal:replace="nothing">
Type-to-skip functionality with javascript enabled
could be described as
"Hover and type the first letter to skip through tags."
However, on touch-driven devices, vertical hover typically
scrolls the page, so horizontal hover is necessary to enable this.
Alternatively, clicking any of the tags also enables type-to-skip.
So the help could technically be extended to handle this special case
as "Hover or click and type the first letter to skip through tags.",
but I think this would be confusing to the majority of users.
The decision at this point is to not try to explain any of this on the page.
</tal:comment>
</label>
<div class="visualClear"><!-- --></div>
<select id="predefined_subjects"
name="predefined_subjects:list"
size="14"
multiple="multiple"
tal:condition="python:format!='checkbox'"
tal:attributes="id string:${fieldName};
name string:${fieldName}_existing_keywords:list;">
<option value="#" tal:repeat="keyword allowedKeywords"
tal:content="keyword" tal:attributes="value keyword;
selected python:test(context.unicodeTestIn(keyword, value), 'selected', None)">
An existing tag
</option>
</select>
<tal:comment tal:replace="nothing">
These spans are hidden by css, and used by the JavaScript called below.
</tal:comment>
<span id="noTagsSelected" i18n:translate="label_noTagsSelected">No tags currently selected.</span>
<span id="oneOrMoreTagsSelected" i18n:translate="label_oneOrMoreTagsSelected">% tags currently selected.</span>
<tal:comment tal:replace="nothing">
Call js to modify this widget with both a scrollbar and checkboxes.
There may be a better place to put this js call;
examples exist in others' widget.py and js files,
but having it here covers cases where some but not all select elements
call js to be modified.
Todo: The #subject should eventually refer to the template variable.
</tal:comment>
<script type="text/javascript">
jq(document).ready( function() {
jq("#subject").multiSelect();
});
</script>
<input type="hidden"
value=""
tal:condition="not:field/required | nothing"
tal:attributes="name string:${fieldName}_existing_keywords:default:list" />
<tal:loop tal:repeat="keyword allowedKeywords"
tal:condition="python:format=='checkbox'">
<div class="ArchetypesKeywordValue" id=""
tal:attributes="id string:archetypes-value-${fieldName}_${repeat/keyword/number}">
<input class="blurrable"
tal:attributes="
type string:checkbox;
name string:${fieldName}_existing_keywords:list;
id string:${fieldName}_${repeat/keyword/number};
checked python:test(context.unicodeTestIn(keyword, value), 'checked', None);
value keyword" />
<label
tal:content="keyword"
tal:attributes="for string:${fieldName}_${repeat/keyword/number}">
An existing tag
</label>
</div>
</tal:loop>
</dl>
<dl id="selectedTagsSection">
<dt id="selectedTagsHeading" class="formHelp"></dt>
<dd id="selectedTags"></dd>
</dl>
<div class="visualClear"><!-- --></div>
</div>
<!-- <tal:condition condition="python:not widget.roleBasedAdd or (allowRolesToAddKeywords and [role for role in user.getRolesInContext(context) if role in allowRolesToAddKeywords])">-->
<dl id="newTagsSection">
<label for="subject_keywords">
<dt id="newTagsTitle">
<span i18n:translate="label_create_new_tags">
Create and apply new tags.
</span>
</dt>
<span id="newTagsHelp" i18n:translate="label_newTagsHelp" class="formHelp">
Enter one tag per line, multiple words allowed.
</span>
</label>
<br />
<dd id="newTags">
<textarea
id="entered_subjects"
name="subject:lines"
rows="4"
tal:attributes="id string:${fieldName}_keywords;
name string:${fieldName}_keywords:lines;"
tal:define="subject python:[item for item in value if not context.unicodeTestIn(item,allowedKeywords)]"
tal:content="python:'\n'.join(subject)">
A new tag
</textarea>
</dd>
</dl>
<!-- </tal:condition>-->
</tal:define>
</metal:use>
</metal:define>
<div metal:define-macro="search">
<div metal:use-macro="context/widgets/keyword/macros/edit">
</div>
</div>
</body>
</html>
I fear is a know issue of the old Plone 4 keyword widget.
You should probably change the widget.
An add-on like eea.tags should help.
You can also try to use Plone 5 widget from plone.app.widgets, but this probably it's a more complex task (and not without side effects).
I am trying to make a form submit through ajax and the JsHelper from CakePHP 1.3
I try to make a call to /eng/feedbacks/submit_feedback but instead in the console, i see a post to http://lang/eng/pa/homepage instead. The result returned is another instance of that page, rather than anything else.
This seems to be irrelevant to whether such submit_feedback exists or not. I have started that action with die("test"); and it doesn't change anything.
why is that, what is going on?
the form is in my layout (as i want it to be in my footer). Runs when the url is /eng/pa/homepage
Form code:
echo $this->Form->create('Feedback', array('url'=>array( 'controller'=>'feedbacks', 'action'=>'submit_feedback')));
echo $this->Form->input('Feedback.content', array('label'=>false, 'type'=>'textarea'));
echo $this->Js->submit('Save', array('class'=>'button blue',
'before'=>$this->Js->get('#sending')->effect('fadeIn'),
'success'=>$this->Js->Get('#sending')->effect('fadeOut'),
'update'=>'#success'
));
echo $this->Form->end();?>
<div id="success">xx</div>
In that #success DIV i get a related full page, rather than what I have defined in the controller action
Controller method:
function submit_feedback(){
if(!empty($this->data)){
$this->Feedback->set($this->data);
if($this->Feedback->validates()){
if($this->Feedback->save($this->data)){
// AJAX
if($this->RequestHandler->isAjax()){
$this->render('/feedbacks/success', 'ajax');
}else{
die('not ajax');
}
}
}
}
}
And the success template is:
<p style="background: lightgreen">Purple cow!</p>
What am i doing wrong?
NOTE: If I run the same form from the /eng/feedbacks/submit_feedback page, It works exactly as it should through ajax, and my database gets updated, i get the necessary 'success' template loaded and all is shiny and happy.
UPDATE: FORM SOURCE COUDE GENERATED:
<form accept-charset="utf-8" action="/eng/feedbacks/submit_feedback" method="post" id="FeedbackReadForm">
<div style="display: none;">
<input type="hidden" value="POST" name="_method">
</div>
<input type="hidden" id="FeedbackUserId" value="141" name="data[Feedback][user_id]">
<div class="input radio">
<input type="hidden" value="" id="FeedbackType_" name="data[Feedback][type]">
<input type="radio" value="suggestion" id="FeedbackTypeSuggestion" name="data[Feedback][type]">
<label for="FeedbackTypeSuggestion">Suggestion</label>
<input type="radio" value="problem" id="FeedbackTypeProblem" name="data[Feedback][type]">
<label for="FeedbackTypeProblem">Poblem</label>
<input type="radio" value="opinion" id="FeedbackTypeOpinion" name="data[Feedback][type]">
<label for="FeedbackTypeOpinion">Other Opinion</label>
</div>
<div class="input textarea">
<textarea id="FeedbackContent" rows="6" cols="30" name="data[Feedback][content]"></textarea>
</div>
<div style="margin-top: 17px; margin-right: 50px;" class="right">
<a onclick="javascript: closeFeedbackPuller(); return false;" href="#">Cancel</a>
</div>
<div class="submit">
<input type="submit" value="Save" id="submit-396027771" class="button blue">
</div>
</form>
UPDATE 2: JS generated:
$(document).ready(function () {
$("#submit-396027771").bind("click", function (event) {
$.ajax({
beforeSend:function (XMLHttpRequest) {
$("#sending").fadeIn();
},
data:$("#submit-396027771").closest("form").serialize(),
dataType:"html",
success:function (data, textStatus) {
$("#sending").fadeOut();
$("#success").html(data);
},
type:"post",
url:"\/eng\/pa\/homepage"
});
return false;
});
});
I see that the url is wrong, even thought the form url was right. How can this be resolved?
echo $this->Js->submit('Save', array('class'=>'button blue',
'before'=>$this->Js->get('#sending')->effect('fadeIn'),
'success'=>$this->Js->Get('#sending')->effect('fadeOut'),
'url' => '/eng/feedbacks/submit_feedback',
'update'=>'#success'
));
That may fix your problem, but I am not 100% sure. It seems that the Js->submit() method accepts a lot of the Form helper methods.
I am trying to invoke a form submit using javascript (jquery) to invoke a webflow transition. It works and the submit invokes the desired transition. But, the updated radio button values is not reflected on the model object which is posted.
Here is the code:
<form:form method="post" action="#" commandName="infoModel" name="pageForm">
<form:input type="input" path="testMsg" id="success" />
<input type="button" id="clearSelections" value="Clear Selections">
<div class="question">
<h4><c:out value="${infoModel.questionInfo.description}"/> </h4>
<form:radiobuttons path="infoModel.answerId"
itemValue="answerId" itemLabel="answerDescription" items="${infoModel.answers}" delimiter="<br/>" />
</div>
<input type="submit" name="_eventId_saveQualitativeInput" value="Save" id="save" />
$(document).ready(function() {
$('#tabs').tabs();
//Clear selections (copy is server-side)
$('#clearSelections').click(function() {
//$('input[type="radio"]').prop('checked', false);
$('input[type="radio"]').removeAttr('checked');
$('#save').trigger('click');
});
});
</form:form>
The form:radiobutton, generates the below html:
<div class="question">
<h4>Is this a general obligation of the entity representing a full faith and credit pledge? </h4>
<span>
<input type="radio" checked="checked" value="273" name="infoModel.answerId" id="infoModel.answerId1">
<label for="infoModel.answerId1">Yes</label>
</span>
<span><br>
<input type="radio" value="274" name="infoModel.answerId" id="infoModel.answerId2">
<label for="infoModel.answerId2">No</label>
</span>
<br>
<span class="error"></span>
</div>
The input id= "success" value is registered and when the control goes to the server, the value of input id= "success" is updated in the "infoModel" object. But the value of answerId is not updated on the "infoModel" object.
Thoughts if i am missing something in the form:radiobutton element or if there is something else wrong?
Thanks in advance!
EDIT:::::::
Thanks mico! that makes sense. I stripped of some of the code first time to make it precise, but i have a list which is being used for building the radio-buttons, below is the code:
<c:forEach items="${infoModel.list["index"]}" var="qa" varStatus="rowCount">
<div class="question">
<h4><c:out value="${question.questionInfo.description}"/> </h4>
<form:radiobuttons path="list["index"][${rowCount.index}].answerId" itemValue="answerId" itemLabel="answerDescription" items="${question.answers}" delimiter="<br/>" />
<br>
</div>
</c:forEach>
Could you please suggest how i could try this one out?
NOTE: The same code works on a regular form submit on click of a button of type submit. Its the javascript form submit which is not working. I also tried to do whatever i want to do in javascript and then invoke the button.trigger('click'); form got submitted but the changes made on form in my javascript didnt reflect.
With commandName inside a form:form tag you set "Name of the model attribute under which the form object is exposed" (see Spring Documentation). Then in path you should tell the continuation of the path inside the model attribute.
With this said I would only drop the extra word infoModel from path="infoModel.answerId" and have it rewritten as path="answerId" there under the form:radiobutton.
I am successfully validating and arresting the submission of a form using Validate by the bassistance.de guy.
Problem is, I am halting submission too much as there is a hidden set of inputs which requires validation only if ONE other radio button is checked.
I am calling my validation scheme from a remote script on page load and I was "TRYING" to remove the validation rule on the form page when the contingent element is clicked.
Thing is, the page acts as though the rule is still there.
Here's some pseudo:
<html>
<head>
<script src="jquery.js"></script>
<script src="jq.validate.js"></script>
<script src="formproc.js"></script>
</head>
<body>
<form method="" action="" id="whatever">
<input type="radio" name="answer" value="1008" id="yes" /><label for="yes">Yes</yes>
<input type="radio" name="answer" value="1009" id="no" /><label for="no">No</label>
<input type="radio" name="answer" value="1010" id="un" /><label for="un">Not sure</label>
<div id="somedivthatshidden">
<input type="radio" name="nother" value="1009" id="ok" /><label for="ok">OK</label>
<input type="radio" name="nother" value="1010" id="noway" /><label for="noway">No Way</label>
</div>
<script src="jQ_funx_that_handle_the_show_hide_etc.js"></script>
<input type="submit" value="doit" />
</form>
</body>
</html>
So, when the user clicks on any of the FIRST 3 radio buttons that DO NOT reveal "SOMEDIVETHATSHIDDEN", I also call for the rule removal. Is this wrong?
I've tried putting the rule removal inline in the document, at the end of my function listing, so on and so forth... no dice. Still hangs on that required second set of radios even if they're not displayed
Thanks much,
Rob
You can use depends config option to make a field conditionally required.