Formbuilder кнопка отправить

[xam]

Здравствуйте, подскажите как мне сделать так, что бы при нажатие кнопки отправить в Formbuilder проверка "Имя, Email, Текста , captcha" проходила на том месте где она весить. Т.е у меня при нажатие он обновляет страницу и переходит в самое начало ее.
Это происходит и при правильном вводе всех данных и не правильно. Как быть?* Спасибо

[velden]

Use ajax.

Might be helpful: https://www.cmscanbesimple.org/blog/for ... modal-view

[xam]

В общем мне это не помогло у меня сайт размещен на одной странице и перемещение по сайту происходит по этому принципу

<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>

В начале странице у меня стоит большая картинка из за этого у меня не выходит форма, а размещение на отдельной странице мне не подойдет. Сам шаблон формы выглядит вот так.

{literal}
<__script__ type="text/javascript">
function fbht(htid)
{
var fbhtc=document.getElementById(htid);
if (fbhtc)
{
if (fbhtc.style.display == 'none')
{
fbhtc.style.display = 'inline';
}
else
{
fbhtc.style.display = 'none';
}
}
}
</__script>
{/literal}
{$fb_form_header}
{if $fb_form_done == 1}
{* This first section is for displaying submission errors *}
{if isset($fb_submission_error) && $fb_submission_error}
<div class="error_message">{$fb_submission_error}</div>
{if isset($fb_show_submission_errors) && $fb_show_submission_errors}
<div class="error">
<ul>
{foreach from=$fb_submission_error_list item=thisErr}
<li>{$thisErr}</li>
{/foreach}
</ul>
</div>
{/if}
{/if}
{else}
{* this section is for displaying the form *}
{* we start with validation errors *}
{if isset($fb_form_has_validation_errors) && $fb_form_has_validation_errors}
<div class="error_message">
<ul>
{foreach from=$fb_form_validation_errors item=thisErr}
<li>{$thisErr}</li>
{/foreach}
</ul>
</div>
{/if}
{if isset($captcha_error) && $captcha_error}
<div class="error_message">{$captcha_error}</div>
{/if}

{* and now the form itself *}
{$fb_form_start}
<div>{$fb_hidden}</div>
<div{if $css_class != ''} class="{$css_class}"{/if}>
{if $total_pages gt 1}<span>{$title_page_x_of_y}</span>{/if}
{foreach from=$fields item=entry}
{if $entry->display == 1}
{strip}
{if $entry->needs_div == 1}
<div
{if $entry->required == 1 || $entry->css_class != '' || $entry->valid == 0} class="
{if $entry->required == 1}required{/if}
{if $entry->css_class != ''} {$entry->css_class}{/if}
{if $entry->valid == 0} fb_invalid{/if}
"
{/if}
>
{/if}
{if $entry->hide_name == 0}
<label{if $entry->multiple_parts != 1} for="{$entry->input_id}"{/if}>{$entry->name} </br>
{if $entry->required_symbol != ''}
{$entry->required_symbol}
{/if}
</label>
{/if}
{if $entry->multiple_parts == 1}
{section name=numloop loop=$entry->input}
{if $entry->label_parts == 1}
<div>{$entry->input[numloop]->input}&nbsp;{$entry->input[numloop]->name}</div>
{else}
{$entry->input[numloop]->input}
{/if}
{if isset($entry->input[numloop]->op) && $entry->input[numloop]->op}{$entry->input[numloop]->op}{/if}
{/section}
{else}
{if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}
{/if}
{if $entry->helptext != ''}&nbsp;<a href="javascript:fbht('{$entry->field_helptext_id}')"><img src="modules/FormBuilder/images/info-small.gif" alt="Help" /></a>
{/if}

{if $entry->needs_div == 1}
</div>
{/if}
{/strip}
{/if}
{/foreach}
{if $has_captcha == 1}
<div class="captcha">{$graphic_captcha}{$title_captcha}<br />{$input_captcha}</div>
{/if}<br /><br />

<input type="submit" class="button" value="Отправить">


<__script__ type="text/javascript">
function prepareForm() {
/*
Used to set onSubmit handler. Needs to be done after every ajax request because the old form object is overwritten
*/
$('.frm_ajax_inner form.cms_form').on( "submit", function( event ) {
event.preventDefault();
var posturl = $(this).attr("action") + "?showtemplate=false";
var postdata = $(this).serialize();
var frm_container = $(this).parent();
/* ajax */
$.post(posturl,postdata,function(data) {
/* overwrite form's parent div with new html and prepare form again */
frm_container.html(data);
prepareForm(); } );
} );
}

/*
Variable to get original form content. Used to be able to show a clean form after modal box is closed while form was submitted but not valid
*/
var org_content;

$(document).ready(function() {
$('a.frm_fancybox').fancybox( {
onStart : function (links, index) { /* save original form contents */
var currentlink = $(links[index]);
var linktargetparent = $(currentlink.attr("href") + '_container');
org_content = linktargetparent.html(); } , // save original content to variable
onClosed : function(links, index) { /* restore original hidden form and prepare it */
var currentlink = $(links[index]);
var linktargetparent = $(currentlink.attr("href") + '_container');
linktargetparent.html(org_content);
org_content = '';
prepareForm();}
} );
prepareForm();
} );
</__script>

</td>
</tr>
</table>
{* +++++ Displaying Validation Errors +++++ *}
{if isset($fb_form_has_validation_errors) && $fb_form_has_validation_errors}
<__script__ type="text/javascript">alert("Системная ошибка\nПожалуйста, проверьте форму и заполните необходимые поля правильно");</__script>
{/if}
{if isset($captcha_error) && $captcha_error}
<__script__ type="text/javascript">alert("Системная ошибка\nПожалуйста, проверьте Captcha ");</__script>
{/if}

{/if}



</div>


{$fb_form_end}

{$fb_form_footer}

Мне нужно что бы при нажатие кнопки отправить у меня был переход на

<a href="#services">

или проверка происходила на том же месте где и форма

[guro]

Добавьте в шаблон формы код JavaScript

Code: Select all

$(document).ready(function(){
  var action = $('form.cms_form').attr('action');
  $('form.cms_form').attr('action', action + '#services');
})

, где cms_form - клас вашей формы

PS
jQuery должен быть подключен.

[xam]

Добавьте в шаблон формы код JavaScript

Code: Select all

$(document).ready(function(){
  var action = $('form.cms_form').attr('action');
  $('form.cms_form').attr('action', action + '#services');
})

, где cms_form - клас вашей формы

PS
jQuery должен быть подключен.

У меня jQuery подключен , но почему то функция не срабатывает. Вот у меня вызов JavaScript

<__script__ type="text/javascript">
function prepareForm() {
/*
Used to set onSubmit handler. Needs to be done after every ajax request because the old form object is overwritten
*/
$('.frm_ajax_inner form.cms_form').on( "submit", function( event ) {
event.preventDefault();
var posturl = $(this).attr("action") + "?showtemplate=false";
var postdata = $(this).serialize();
var frm_container = $(this).parent();
/* ajax */
$.post(posturl,postdata,function(data) {
/* overwrite form's parent div with new html and prepare form again */
frm_container.html(data);
prepareForm(); } );
} );

$(document).ready(function(){
var action = $('form.cms_contact').attr('action');
$('form.cms_form').attr('action', action + '#services');
});}

что не так?

[guro]

Как вы поняли что функция не срабатывает? Для атрибута action тега form после загрузки страницы добавляется якорь #services?
Только смотреть надо не в исходном коде, а к примеру FireBug-ом.

[velden]

Whole idea of ajax is that the page is NOT (re)loaded. It only loads CONTENT (which in this case is the form).

Browser url will NOT change, browser page will NOT refresh. Browser page will NOT move. Only (part of) content will be replaced.

If you want something to happen AFTER form is submited use javascript inside:

Code: Select all

$.post(posturl,postdata,function(data) {
// CODE BEFORE CONTENT IS REPLACED
/* overwrite form's parent div with new html and prepare form again */
frm_container.html(data);
prepareForm(); 
// CODE AFTER CONTENT IS REPLACED
} );
} );