I’ve been trying to do this for ages and I think I’ve finally cracked it, i couldn’t find any information on it in these forums so thought I’d share what i did.
The project I’m working on required my safecracker form to have multiple return parameters - so i wanted the form to have multiple submit buttons, each taking the user to a different page once the form data has been saved.
Here’s what I did:
The jQuery:
[removed]
// this code has been taken from the docs - Ajax driven entry_form and modified to suit my project - http://barrettnewton.com/safecracker/user_guide/entry_form/#section_examples
$(document).ready(function() {
var thisform = $('#form');
thisform.ajaxForm({
dataType: 'json',
success: function(data) {
if (data.success) { // if form data was saved
$('#loading').fadeOut(); // this removes the loading gif
[removed].href = thisform.attr('action'); // after form has been submitted go to the form's action url which you set with this code: thisform.attr('action', actionLink); in the $(".submitbtn").click function below
} else { // if there was an error
$('#loading').fadeOut(); // this removes the loading gif
var required = $('.required'); // find input fields with class 'required'
required.find('input:text[value=""]').addClass('fielderror'); // if required text input fields are empty give them the class of 'fielderror' (styled with background-color: red)
required.find('input:file[value=""]').addClass('fielderror'); // if required file upload fields are empty give them the class of 'fielderror' (styled with background-color: red)
$('.errors').html('Please verify all necessary fields are filled in correctly'); // add warning text to the error field at the top of the form
}
}
});
$(".submitbtn").click(function(){ //when you click one of the submit buttons
$('#loading').fadeIn(); // fade in the loading gif
var actionLink = $(this).attr('href'); //create variable from the button's href attribute
thisform.submit(); // submit the form
thisform.attr('action', actionLink); //set the form's action according the variable you set above
return false // prevent the page from navigating to the href of the button you clicked
});
});
[removed]
The HTML:
<span class"error"></span>
{exp:safecracker channel="products" return="safecracker/ENTRY_ID" entry_id="{segment_2}" json="yes"}
<label for="title">Title</label>
<input type="text" class="required" name="title" id="title" value="{title}" size="50" maxlength="100">
<label for="url_title">URL Title</label>
<input type="text" class="required" name="url_title" id="url_title" value="{url_title}" maxlength="75" size="50" />
<label for="entry_date">Date</label>
<input type="text" name="entry_date" id="entry_date" value="{entry_date}" maxlength="23" size="25" />
<div id="submitButtons">
<a class="submit btn submitbtn" href="{path='path-to-page-1'}">Button 1</a>
<a class="submit btn submitbtn" href="{path='path-to-page-2'}">Button 2</a>
<a class="submit btn submitbtn" href="{path='path-to-page-3'}">Button 3</a>
<span id="loading" style="display:none;float:left"><img src="{images}css/loading.gif" align="absmiddle"/> Saving entry...</span>
<br class="clear" />
</div>
{/exp:safecracker}
