Saving Info on web form error on submit - php

I have a php script that I am working on and have yet to be able to get the form to save the info and repopulate on a validation error. I've tried several how to's on various websites but perhaps I am missing something as they mostly have a lot of other PHP lines in them but the how to pages don't give specifics on the lines of code that are necessary to save data and repopulate. Below is the code and if anyone has any ideas or could point me to some place that works well I would greatly appreciate it, I've hit a wall thus far. Thanks in advance!!
<?php
/*
Template Name: Post Submit Form
*/
?>
<?php if ( $user_ID > 0) { ?>
<?php if( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == "new_post") {
// Do some minor form validation to make sure there is content
if (isset($_POST['submit'])) {
$error = "";
if (!empty($_POST['title'])) {
$title = $_POST['title'];
} else {
$error .= "Please add a title<br />";
}
if (!empty($_POST['description'])) {
$description = $_POST['description'];
} else {
$error .= "Please add a description<br />";
}
if (!empty($_POST['post_tags'])) {
$post_tags = $_POST['post_tags'];
} else {
$error .= "Please add some keywords<br />";
}
if (!empty($_POST['externalurl'])) {
$externalurl = $_POST['externalurl'];
} else {
$error .= "Please add a URL to post<br />";
}
// IMAGE VALIDATION - CHECK IF THERE IS AN IMAGE AND THAT ITS THE RIGHT FILE TYPE AND RIGHT SIZE
if ($_FILES) {
foreach ($_FILES as $file => $array) {
//Check if the $_FILES is set and if the size is > 0 (if =0 it's empty)
if(isset($_FILES[$file]) && ($_FILES[$file]['size'] > 0)) {
$tmpName = $_FILES[$file]['tmp_name'];
list($width, $height, $type, $attr) = getimagesize($tmpName);
if($width<=899 || $height<=299)
{
$error .= "Image is to small. Minimum 900 pixels wide.<br />";
unlink($_FILES[$file]['tmp_name']);
}
// Get the type of the uploaded file. This is returned as "type/extension"
$arr_file_type = wp_check_filetype(basename($_FILES[$file]['name']));
$uploaded_file_type = $arr_file_type['type'];
// Set an array containing a list of acceptable formats
$allowed_file_types = array('image/jpg','image/jpeg');
// If the uploaded file is the right format
if(in_array($uploaded_file_type, $allowed_file_types)) {
} else { // wrong file type
$error .= "Please upload a .jpg type image<br />";
}
} else {
$error .= "Please add an image<br />";
}
} // end for each
} // end if
$tags = $_POST['post_tags'];
$externalurl = $_POST['externalurl'];
// ADD THE FORM INPUT TO $new_post ARRAY
if (empty($error)) {
$new_post = array(
'post_title' => $title,
'post_content' => $description,
'post_category' => array($_POST['cat']), // Usable for custom taxonomies too
'tags_input' => array($tags),
'post_status' => 'preview', // Choose: publish, preview, future, draft, etc.
'post_type' => 'post', //'post',page' or use a custom post type if you want to
'externalurl' => $externalurl
);
//SAVE THE POST
$pid = wp_insert_post($new_post);
//KEEPS OUR COMMA SEPARATED TAGS AS INDIVIDUAL
wp_set_post_tags($pid, $_POST['post_tags']);
//REDIRECT TO THE NEW POST ON SAVE
$link = get_permalink( $pid );
wp_redirect( $link );
//ADD OUR CUSTOM FIELDS
add_post_meta($pid, 'externalurl', $externalurl, true);
//INSERT OUR MEDIA ATTACHMENTS
if (!function_exists('wp_generate_attachment_metadata')){
require_once(ABSPATH . "wp-admin" . '/includes/image.php');
require_once(ABSPATH . "wp-admin" . '/includes/file.php');
require_once(ABSPATH . "wp-admin" . '/includes/media.php');
}
if ($_FILES) {
foreach ($_FILES as $file => $array) {
if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK) {
return "upload error : " . $_FILES[$file]['error'];
}
$attach_id = media_handle_upload( $file, $pid );
}
}
if ($attach_id > 0){
//and if you want to set that image as Post then use:
update_post_meta($pid,'_thumbnail_id',$attach_id);
}
} // END SAVING POST
} // END VALIDATION
} // END THE IF STATEMENT THAT STARTED THE WHOLE FORM
//POST THE POST YO
do_action('wp_insert_post', 'wp_insert_post');
?>
<?php get_header(); ?>
<?php get_template_part('wrapper', 'start'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('box mb20'); ?>>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_front_page() ) { ?>
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php } else { ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php } ?>
<div class="form-content">
<?php
if (!empty($error)) {
echo '<p class="error"><strong>Your message was NOT sent<br/> The following error(s) returned:</strong><br/>' . $error . '</p>';
} elseif (!empty($success)) {
echo '<p class="success">' . $success . '</p>';
}
?>
<div class="entry-content clearfix mt20">
<?php the_content(); ?>
</div>
<div class="dashedline"></div>
<!-- Start FORM -->
<div class="submitpost-form">
<form id="new_post" name="new_post" method="post" action="" class="submitpost-form" enctype="multipart/form-data">
<!-- post name -->
<fieldset name="name">
<label for="title">Post Title:</label>
<input type="text" id="submitpost-entry" value="<?php echo $_SERVER['title']; ?>" tabindex="5" name="title" />
<p class="submitpost-entry-infotext">Choose a descriptive title that highlights the most important thing about your project. This will also be part of the URL. Do not use your name or genre in it.</p>
</fieldset>
<!-- External URL -->
<fieldset class="externalurl">
<label for="externalurl">Direct link (URL) to post page: (must include http://)</label>
<input type="text" value="<?php echo $_SERVER['externalurl']; ?>" id="submitpost-entry" tabindex="10" name="externalurl" onFocus="this.value=''"/>
<p class="submitpost-entry-infotext">This will be the URL linked to by the post. This should be a direct url to the webpage / article about the project. Do not link to your homepage or main portfolio page. The image submited below must appear on this page.</p>
</fieldset>
<!-- post tags -->
<fieldset class="tagsentry">
<label for="post_tags">Tags (comma separated):</label>
<input type="text" value="" tabindex="15" name="post_tags" id="submitpost-entry" />
<p class="submitpost-entry-infotext">Use a few descriptive words (all lowercase) to allow users to discover your work via exploring tags. Avoid using genre terms. Example: environmental, b&w, lifestyle. Keep below about ten.</p>
</fieldset>
<!-- post Category -->
<fieldset class="category">
<label for="cat">Genre:</label>
<?php wp_dropdown_categories( 'tab_index=20&taxonomy=category&hide_empty=0&exclude=1' ); ?>
<p class="submitpost-entry-infotext" style="position:relative; top:-14px;">Select the most suitable genre for your work. If you have a genre suggestion please let us know via the contact page.</p>
</fieldset>
<!-- authors -->
<fieldset class="images">
<label for="bottle_front">Image</label>
<input type="file" name="Image" id="image" tabindex="25" />
<p class="submitpost-entry-infotext">Images must be .jpg format with a minimum of 900 pixels wide and be less than 600kb in size.</p>
</fieldset>
<!-- post Content -->
<fieldset class="submitpostcontent">
<label for="description">Description:</label>
<textarea id="submitpost-message" tabindex="30" name="description" rows="10"></textarea>
<p class="submitpost-entry-infotext" >Enter more detail about the project or piece, the first 40 words will be displayed on the grid page. Any extra text will show on the post page. Do not compose in this field to avoid loosing text. Spell check before submiting! Profanity or offensive text will not be published. </p>
</fieldset>
<fieldset class="submit">
<input type="submit" value="Post Review" tabindex="40" id="submit" name="submit" />
</fieldset>
<input type="hidden" name="action" value="new_post" />
<?php wp_nonce_field( 'new-post' ); ?>
</form>
</div> <!-- END WPCF7 -->
<!-- END OF FORM -->
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-content -->
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</article>
<?php get_template_part('wrapper', 'end'); ?>
<?php get_footer(); ?>
<?php } else { ?>
<?php get_header(); ?>
<?php get_template_part('wrapper', 'start'); ?>
<?php while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('box mb20'); ?>>
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header>
<div class="entry-content clearfix mt20">
Message for non logged in users.
</div>
</article>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php get_template_part('wrapper', 'end'); ?>
<?php get_footer(); ?>
<?php }; ?>

To avoid undefined index errors, you should use something along these lines:
<form>
<input type="text" id="someField" name="title" value="<?php echo !empty( $_POST['title'] ) ? $_POST['title'] : ''?>" />
</form>
Cheers

This is how it should work:
<form id="new_post" name="new_post" method="post" action="this_form.php" class="submitpost-form" enctype="multipart/form-data">
<input type="text" id="submitpost-entry" value="<?php echo $_POST['title']; ?>" tabindex="5" name="title" />
...and so on populating input field value with post data.

Related

Unable to create directory wp-content/uploads/2022/12. Is its parent directory writable by the server?

i iclude a wordpress media selector in my wordpress plugin.
i got this error :
Unable to create directory wp-content/uploads/2022/12. Is its parent directory writable by the server?
error
i added to this code to wp-config.php file :
`
/** WordPress değişkenlerini ve yollarını kurar. */
require_once ABSPATH . 'wp-settings.php';
define( 'UPLOADS', 'wp-content/uploads' );
`
and added to myportfolio-form.php file
<?php
add_action( 'admin_footer', 'media_selector_print_scripts' );
function media_selector_print_scripts() {
$my_saved_attachment_post_id = get_option( 'media_selector_attachment_id', 0 );
?><script type='text/javascript'>
jQuery( document ).ready( function( $ ) {
// Uploading files
var file_frame;
var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
var set_to_post_id = <?php echo $my_saved_attachment_post_id; ?>; // Set this
jQuery('#upload_image_button').on('click', function( event ){
event.preventDefault();
// If the media frame already exists, reopen it.
if ( file_frame ) {
// Set the post ID to what we want
file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
// Open frame
file_frame.open();
return;
} else {
// Set the wp.media post id so the uploader grabs the ID we want when initialised
wp.media.model.settings.post.id = set_to_post_id;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: 'Select a image to upload',
button: {
text: 'Use this image',
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on( 'select', function() {
// We set multiple to false so only get one image from the uploader
attachment = file_frame.state().get('selection').first().toJSON();
// Do something with attachment.id and/or attachment.url here
$( '#image-preview' ).attr( 'src', attachment.url ).css( 'width', 'auto' );
$( '#image_attachment_id' ).val( attachment.id );
// Restore the main post ID
wp.media.model.settings.post.id = wp_media_post_id;
});
// Finally, open the modal
file_frame.open();
});
// Restore the main ID when the add media button is pressed
jQuery( 'a.add_media' ).on( 'click', function() {
wp.media.model.settings.post.id = wp_media_post_id;
});
});
</script><?php
}
function portfolio_admin_myprojects_page_handler()
{
global $wpdb;
$table = new Portfolio_MyProjects_List_Table();
$table->prepare_items();
$message = '';
if ('delete' === $table->current_action()) {
$message = '<div class="updated below-h2" id="message"><p>' . sprintf(__('Items deleted: %d', 'portfolio-admin-myresume'), count($_REQUEST['ID'])) . '</p></div>';
}
?>
<div class="wrap">
<div class="icon32 icon32-posts-post" id="icon-edit"><br></div>
<h2><?php _e('My Projects', 'portfolio-admin-myresume')?> <a class="add-new-h2"
href="<?php echo get_admin_url(get_current_blog_id(), 'admin.php?page=myprojects_form');?>"><?php _e('Add new', 'portfolio-admin-myresume')?></a>
</h2>
<?php echo $message; ?>
<form id="myprojects-table" method="POST">
<input type="hidden" name="page" value="<?php echo $_REQUEST['page'] ?>"/>
<?php $table->display() ?>
</form>
</div>
<?php
}
function portfolio_admin_projects_form_page_handler()
{
global $wpdb;
$table_name = $wpdb->prefix . 'portfolio_myprojects';
$message = '';
$notice = '';
$default = array(
'ID' => 0,
'projects_name' => '',
'projects_category' => '',
'projects_link' => '',
'projects_image' => '',
'order' => '',
);
if ( isset($_REQUEST['nonce']) && wp_verify_nonce($_REQUEST['nonce'], basename(__FILE__))) {
$item = shortcode_atts($default, $_REQUEST);
$item_valid = portfolio_admin_validate_myprojects($item);
if ($item_valid === true) {
if ($item['ID'] == 0) {
$result = $wpdb->insert($table_name, $item);
$item['ID'] = $wpdb->insert_id;
if ($result) {
$message = __('Item was successfully saved', 'portfolio-admin-myresume');
} else {
$notice = __('There was an error while saving item', 'portfolio-admin-myresume');
}
} else {
$result = $wpdb->update($table_name, $item, array('ID' => $item['ID']));
if ($result) {
$message = __('Item was successfully updated', 'portfolio-admin-myresume');
} else {
$notice = __('There was an error while updating item', 'portfolio-admin-myresume');
}
}
} else {
$notice = $item_valid;
}
}
else {
$item = $default;
if (isset($_REQUEST['ID'])) {
$item = $wpdb->get_row($wpdb->prepare("SELECT * FROM $table_name WHERE ID = %d", $_REQUEST['ID']), ARRAY_A);
if (!$item) {
$item = $default;
$notice = __('Item not found', 'portfolio-admin-myresume');
}
}
}
add_meta_box('myprojects_form_meta_box', __('Work Details', 'portfolio-admin-myresume'), 'portfolio_admin_projects_form_meta_box_handler', 'myprojects', 'normal', 'default');
?>
<div class="wrap">
<div class="icon32 icon32-posts-post" id="icon-edit"><br></div>
<h2><?php _e('My Projects', 'portfolio-admin-myresume')?> <a class="add-new-h2"
href="<?php echo get_admin_url(get_current_blog_id(), 'admin.php?page=myprojects');?>"><?php _e('back to list', 'portfolio-admin-myresume')?></a>
</h2>
<?php if (!empty($notice)): ?>
<div id="notice" class="error"><p><?php echo $notice ?></p></div>
<?php endif;?>
<?php if (!empty($message)): ?>
<div id="message" class="updated"><p><?php echo $message ?></p></div>
<?php endif;?>
<form id="form" method="POST">
<input type="hidden" name="nonce" value="<?php echo wp_create_nonce(basename(__FILE__))?>"/>
<input type="hidden" name="ID" value="<?php echo $item['ID'] ?>"/>
<div class="metabox-holder" id="poststuff">
<div id="post-body">
<div id="post-body-content">
<?php do_meta_boxes('myprojects', 'normal', $item); ?>
<input type="submit" value="<?php _e('Save', 'portfolio-admin-myresume')?>" id="submit" class="button-primary" name="submit">
</div>
</div>
</div>
</form>
</div>
<?php
}
function portfolio_admin_projects_form_meta_box_handler($item)
{
// Save attachment ID
if ( isset( $_POST['submit_image_selector'] ) && isset( $_POST['image_attachment_id'] ) ) :
update_option( 'media_selector_attachment_id', absint( $_POST['image_attachment_id'] ) );
endif;
wp_enqueue_media();
?>
<tbody >
<div class="formdatabc">
<form >
<div class="form2bc">
<p>
<label for="projects_name"><?php _e('Project Name:', 'portfolio-admin-myresume')?></label>
<br>
<input id="projects_name" name="projects_name" type="text" value="<?php echo esc_attr($item['projects_name'])?>"
required>
</p>
</div>
<div class="form2bc">
<p>
<label for="projects_category"><?php _e('Project Category', 'portfolio-admin-myresume')?></label>
<br>
<input id="projects_category" name="skills_percent" type="text" value="<?php echo esc_attr($item['projects_category'])?>"
required>
</p>
</div>
<div class="form3bc">
</div>
<div>
<p>
<label for="projects_link"><?php _e('Project Link:', 'portfolio-admin-myresume')?></label>
<br>
<textarea id="projects_link" name="projects_link" cols="100" rows="3" maxlength="240"><?php echo esc_attr($item['projects_link'])?></textarea>
</p>
</div>
<div class='image-preview-wrapper'>
<img id='image-preview' src='' width='100' height='100' style='max-height: 100px; width: 100px;'>
</div>
<input id="upload_image_button" type="button" class="button" value="<?php _e( 'Upload image' ); ?>" />
<input type='hidden' name='image_attachment_id' id='image_attachment_id' value=''>
</form>
</div>
</tbody>
<?php
}
`
i tried to iclude wordpress media selector to my plugin but it doesnt work.
error : Unable to create directory wp-content/uploads/2022/12. Is its parent directory writable by the server?
You need to change permissions of directories on server itself
chmod -R 777 /path/to/web-root/wp-content/uploads
(Linux example, this will change all files)
chmod 777 /path/to/web-root/wp-content
(this will change only directory itself, not all files)

music widget in page template - select options

I am using the Rockit Now wordpress theme, which comes with a music player widget. When adding the widget to a sidebar, you have the followings options-
Title- (a section to type text..)
Artist for playlist- (a dropdown menu with all artist post names)
No of tracks to play- (a section to type a number..)
I am trying to display this widget in my artist page template so that it appears on each artist page with the music for that particular artist post.
I have added the following to my single-artists.php page template-
<?php the_widget( 'cs_music_player' ); ?>
This has successfully called the widget as I am now receiving the message 'No Results Found' on the page.. What I need to do is be able to select the options as above in the php.. I unfortunately can't work out how to do this..
Here is the cs_music_playlist_widget.php code-
<?php
class cs_music_player extends WP_Widget
{
function cs_music_player()
{
$widget_ops = array('classname' => 'cs_music_player', 'description' => 'Select artist to Play Your Playlist.' );
$this->WP_Widget('cs_music_player', 'ChimpS : MusicPlayList', $widget_ops);
}
function form($instance)
{
$instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
$title = $instance['title'];
$get_post_slug = isset( $instance['get_post_slug'] ) ? esc_attr( $instance['get_post_slug'] ) : '';
$numtrack = isset( $instance['numtrack'] ) ? esc_attr( $instance['numtrack'] ) : '';
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>">
<span>Title: </span>
<input class="upcoming" id="<?php echo $this->get_field_id('title'); ?>" size="40" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" />
</label>
</p>
<br />
<p>
<label for="<?php echo $this->get_field_id('get_post_slug'); ?>">
<span>artist for Playlist:</span>
<br /><br />
<select name="<?php echo $this->get_field_name('get_post_slug'); ?>" style="width:225px;">
<?php
global $wpdb,$post;
$args = array( 'post_type' => 'artists', 'posts_per_page' => -1,'post_status'=> 'publish');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<option <?php if($get_post_slug == $post->post_name){echo 'selected';}?> value="<?php echo $post->post_name;?>">
<?php echo substr(get_the_title(), 0, 20); if ( strlen(get_the_title()) > 20 ) echo "...";?>
</option>
<?php endwhile; ?>
</select>
</label>
</p>
<p>
<label for="<?php echo $this->get_field_id('noot'); ?>">
<span>No Of Tracks To Play: </span>
<input class="upcoming" id="<?php echo $this->get_field_id('numtrack'); ?>" size="2" name="<?php echo $this->get_field_name('numtrack'); ?>" type="text" value="<?php echo esc_attr($numtrack); ?>" />
</label>
</p>
<div class="clear"></div>
<?php
}
function update($new_instance, $old_instance)
{
$instance = $old_instance;
$instance['title'] = $new_instance['title'];
$instance['get_post_slug'] = $new_instance['get_post_slug'];
$instance['numtrack'] = $new_instance['numtrack'];
return $instance;
}
function widget($args, $instance)
{
global $cs_transwitch;
extract($args, EXTR_SKIP);
$title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
$get_post_slug = empty($instance['get_post_slug']) ? ' ' : apply_filters('widget_title', $instance['get_post_slug']);
echo $before_widget;
$args=array(
'name' => $get_post_slug,
'post_type' => 'artists',
'post_status' => 'publish',
'showposts' => 1,
);
$get_posts = get_posts($args);
if( $get_posts ) {
$get_post_id = $get_posts[0]->ID;
}else{
$get_post_id = '';
}
// WIDGET display CODE Start
if (!empty($title))
echo $before_title . $title . $after_title;
global $wpdb;
if($get_post_id <> ""){
$artist_buy_amazon_db ='';
$artist_buy_apple_db = '';
$artist_buy_groov_db ='';
$artist_buy_cloud_db = '';
$cs_artist = get_post_meta($get_post_id, "cs_artist", true);
if ( $cs_artist <> "" ) {
$xmlObject = new SimpleXMLElement($cs_artist);
$artist_release_date_db = $xmlObject->artist_release_date;
$artist_buy_amazon_db = $xmlObject->artist_buy_amazon;
$artist_buy_apple_db = $xmlObject->artist_buy_apple;
$artist_buy_groov_db = $xmlObject->artist_buy_groov;
$artist_buy_cloud_db = $xmlObject->artist_buy_cloud;
enqueue_alubmtrack_format_resources('widget');
?>
<script>
jQuery(document).ready(function($){
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_<?php echo $get_post_id;?>",
cssSelectorAncestor: "#jp_container_<?php echo $get_post_id;?>"
}, [
<?php
$my_counter = 0;
foreach ( $xmlObject as $track ){
if ( $track->getName() == "track" ) {
if ( $my_counter < $instance['numtrack'] ) {
$artist_track_title = $track->artist_track_title;
$artist_track_mp3_url = $track->artist_track_mp3_url;
echo '{';
echo 'title:"'.$artist_track_title.'",';
echo 'mp3:"'.$artist_track_mp3_url.'"';
echo '},';
}
$my_counter++;
}
}
?>
], {
swfPath: "<?php echo get_template_directory_uri()?>/scripts/frontend/Jplayer.swf",
supplied: "mp3",
wmode: "window"
});
});
</script>
<!-- Now Playing Start -->
<div class="nowplaying">
<?php $cs_by = __('By: %s', CSDOMAIN); ?>
<h5><?php if($get_post_id <> ''){echo get_the_title($get_post_id);}?></h5>
<p><?php printf($cs_by, get_the_author()); ?> - <?php if(isset($artist_release_date_db)){ if($cs_transwitch =='on'){ _e('Release Date',CSDOMAIN); }else{ echo __CS('release_date', 'Release Date'). ' : '.$artist_release_date_db; }}?></p>
<div id="jquery_jplayer_<?php echo $get_post_id;?>" class="jp-jplayer"></div>
<div id="jp_container_<?php echo $get_post_id;?>" class="jp-audio">
<div class="jp-type-playlist">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li>previous</li>
<li>play</li>
<li>pause</li>
<li>next</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li>Shuffle</li>
<li>Shuffle off</li>
<li>Repeat All</li>
<li>Repeat off</li>
</ul>
</div>
<div class="jp-playlist">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<?php if($artist_buy_amazon_db <> '' or $artist_buy_apple_db <> '' or $artist_buy_groov_db <> '' or $artist_buy_cloud_db <> ''){?>
<!-- Buy Now Start -->
<div class="buynow">
<h5 class="white"><?php if($cs_transwitch =='on'){ _e('BUY NOW',CSDOMAIN); }else{ echo __CS('buy_now', 'BUY NOW'); } ?></h5>
<ul>
<?php if($xmlObject->artist_buy_cloud <> ""){?><li> </li><?php }?>
<?php if($xmlObject->artist_buy_amazon <> ""){?><li> </li><?php }?>
<?php if($xmlObject->artist_buy_apple <> ""){?><li> </li><?php }?>
<?php if($xmlObject->artist_buy_groov <> ""){?><li> </li><?php }?>
</ul>
<!-- Buy Now End -->
<div class="clear"></div>
</div>
<div class="clear"></div>
<?php } //Buy now Condition end?>
<?php }else{?>
<div class="list-thumb">
<ul>
<li>
<h2><?php _e("No results found.",CSDOMAIN); ?></h2>
</li>
</ul>
</div>
<?php
}
} // if artist is not Selected
else{
echo '<div class="box-small no-results-found"> <h5>';
_e("No results found.",CSDOMAIN);
echo ' </h5></div>';
}
echo $after_widget;
}
}
add_action( 'widgets_init', create_function('', 'return register_widget("cs_music_player");') );?>
the_widget accept three arguments:
$widget : the widget name, in your case cs_music_player
$instance : the widget instance settings. It's an array where your widget options goes. You can do something like this: array('title' => 'Your widget title', 'get_post_slug' => 'slug_of_your_artist', 'numtrack' => 10)
$args : an array of options used to display your widget. You can send an empty array to use the defaults, or just ignore that parameter.
In the end, your widget call will look like that:
global $post;
the_widget(
'cs_music_player',
array(
'title' => 'Your widget title',
'get_post_slug' => $post->post_name,
'numtrack' => 10
)
);

PHP form redirect to thanks page

I have a custom WP theme that I'm trying to redirect to a thanks page after the form has been verified. I know there are a ton of other questions very similar, but I've tried the "headers" trick and all of the other suggestions, but my page just keeps going back to the contact.php page. Hovering over the submit button (before clicking it) shows mypageURL.com/contact, instead of mypageURL.com/thanks. Here is my code.
<?php
//Verify the email address
function isemail($email) {
return preg_match('|^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]{2,})+$|i', $email);
}
//set variables
$error_name = false;
$error_email = false;
$error_message = false;
//Get form values
if (isset($_POST['contact-submit'])) {
$contact_name = '';
$contact_email = '';
$contact_subject = '';
$contact_message = '';
$contact_reciever = '';
if (trim($_POST['contact_name']) === '') {
$error_name = true;
} else {
$contact_name = trim($_POST['contact_name']);
}
if (trim($_POST['contact_email']) === '' || !isemail(trim($_POST['contact_email']))) {
$error_email = true;
} else {
$contact_email = trim($_POST['contact_email']);
}
$subject = trim($_POST['contact_subject']);
if (trim($_POST['contact_message']) === '') {
$error_message = true;
} else {
$contact_message = stripslashes(trim($_POST['contact_message']));
}
//Check for errors
if (!$error_name && !$error_email && !$error_message) {
//Get reciever email
if( get_theme_mod( 'custom_contact_form_mail' ) != '') $get_contact_reciever = get_theme_mod( 'custom_contact_form_mail' ) ;
$contact_reciever = $get_contact_reciever;
$the_subject = 'New message: ' . $contact_subject;
$the_message = 'Message from: ' . $contact_name . PHP_EOL . 'Email: ' . $contact_email . PHP_EOL . PHP_EOL . $contact_message . PHP_EOL ;
$the_headers = "Form " . $contact_email . PHP_EOL . 'Reply-To: ' . $contact_email . PHP_EOL . 'MIME-Version: 1.0' . PHP_EOL . 'Content-type: text/plain; charset=utf-8' . PHP_EOL . 'Content-Transfer-Encoding: quoted-printable' . PHP_EOL;
if (mail($contact_reciever, $the_subject, $the_message, $the_headers)) {
$contact_form_sent = true;
} else {
$contact_form_sent_error = true;
}
} else {
$contact_form_not_filled = true;
}
}
?>
<?php get_header(); ?>
<section id="content">
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
<div class="white-section contact">
<div class="container">
<div class="row">
<div class="span12">
<?php if (current_user_can('edit_post', $post->ID))
edit_post_link( $link = __('You are logged in as an Administrator. Click this text to edit this page. This text will not show up if you are not logged in as Admin.', 'cht'), $before = '<i class="icon-edit"></i> ', $after = '' );
?>
<div class="row">
<div class="span6">
<?php the_content(); ?>
<h4><?php _e('Contact info', 'cht') ?></h4>
<ul>
<?php if( get_theme_mod( 'custom_contact_info_name' ) != '') { ?>
<li><i class="icon-briefcase"></i> <?php print get_theme_mod( 'custom_contact_info_name' ) ?></li>
<?php } else { ?>
<li><i class="icon-briefcase"></i> Cloud Hoster Ltd.</li>
<?php } ?>
<?php if( get_theme_mod( 'custom_contact_info_address' ) != '') { ?>
<li><i class="icon-map-marker"></i> <?php print get_theme_mod( 'custom_contact_info_address' ) ?></li>
<?php } else { ?>
<li><i class="icon-map-marker"></i> 01234 Main Street, New York 45678</li>
<?php } ?>
<?php if( get_theme_mod( 'custom_contact_info_phone' ) != '') { ?>
<li><i class="icon-phone"></i> <?php print get_theme_mod( 'custom_contact_info_phone' ) ?></li>
<?php } else { ?>
<li><i class="icon-phone"></i> Phone: 555-555-5555 Fax: 444-444-4444</li>
<?php } ?>
<?php if( get_theme_mod( 'custom_contact_info_mail' ) != '') { ?>
<li><i class="icon-envelope-alt"></i> Email: <?php print get_theme_mod( 'custom_contact_info_mail' ) ?></li>
<?php } else { ?>
<li><i class="icon-envelope-alt"></i> Email: info#domain.com</li>
<?php } ?>
</ul>
</div><!-- span6 end -->
<div class="span6">
<div id="map"></div>
<script>
jQuery(document).ready(function(){
var map;
map = new GMaps({
div: '#map',
<?php if( get_theme_mod( 'custom_google_map_lat' ) != '') { ?>
lat: <?php print get_theme_mod( 'custom_google_map_lat' ) ?>,
<?php } else { ?>
lat: 40.714353,
<?php } ?>
<?php if( get_theme_mod( 'custom_google_map_lng' ) != '') { ?>
lng: <?php print get_theme_mod( 'custom_google_map_lng' ) ?>,
<?php } else { ?>
lng: -74.005973,
<?php } ?>
zoom: 15,
zoomControl: true,
zoomControlOpt: {
style : 'SMALL',
position: 'TOP_LEFT'
},
streetViewControl: false,
});
map.addMarker({
<?php if( get_theme_mod( 'custom_google_map_lat' ) != '') { ?>
lat: <?php print get_theme_mod( 'custom_google_map_lat' ) ?>,
<?php } else { ?>
lat: 40.714353,
<?php } ?>
<?php if( get_theme_mod( 'custom_google_map_lng' ) != '') { ?>
lng: <?php print get_theme_mod( 'custom_google_map_lng' ) ?>,
<?php } else { ?>
lng: -74.005973,
<?php } ?>
});
});
</script>
</div><!-- span6 end -->
</div><!-- row end -->
<div class="row">
<div class="span12">
<form action="<?php the_permalink(); ?>" method='post' name='contactform' id='contactform'>
<p><?php _e('Your name:', 'cht') ?></p>
<input type="text" class="input-box" name="contact_name" value="<?php if (isset($_POST['contact_name'])) echo $_POST['contact_name']; ?>" placeholder="<?php _e('Please enter your name.', 'cht') ?>">
<p><?php _e('Email address:', 'cht') ?></p>
<input type="text" class="input-box" name="contact_email" value="<?php if (isset($_POST['contact_email'])) echo $_POST['contact_email']; ?>" placeholder="<?php _e('Please enter your email address.', 'cht') ?>">
<p><?php _e('What kind of problems are you having?', 'cht') ?></p>
<input type="text" class="input-box" name="contact_subject" value="<?php if (isset($_POST['contact_subject'])) echo $_POST['contact_subject']; ?>" placeholder="<?php _e('Purpose of this message.', 'cht') ?>">
<p class="right-message-box"><?php _e('How Can We Help You?', 'cht') ?></p>
<textarea class="input-box right-message-box message-box" name="contact_message" value="<?php if (isset($_POST['contact_message'])) echo stripslashes($_POST['contact_message']); ?>" placeholder="<?php _e('Your message.', 'cht') ?>"></textarea>
<button type='submit' class='submit-contact-form' name='submit' id="submit">Send your message</button>
<input type="hidden" name="contact-submit" id="contact-submit" value="true">
</form>
</div><!-- span12 end -->
</div><!-- row end -->
<?php if (isset($contact_form_sent) && $contact_form_sent == true) : ?>
<div class="alert alert-success"><p><strong><?php _e('Success! ', 'cht') ?> </strong><?php _e('Your message has been sent.', 'cht') ?></p></div>
<?php elseif (isset($contact_form_sent_error) && $contact_form_sent_error == true) : ?>
<div class="alert alert-error"><p><strong><?php _e('Error! ', 'cht') ?> </strong><?php _e('Something went wrong. Please try again.', 'cht') ?></p></div>
<?php elseif (isset($contact_form_not_filled) && $contact_form_not_filled == true) : ?>
<div class="alert alert-error"><p><strong><?php _e('Error! ', 'cht') ?> </strong><?php _e('Fill out the form correctly and try again.', 'cht') ?></p></div>
<?php endif; ?>
</div><!-- span12 end -->
</div><!-- row end -->
</div><!-- conteiner end -->
</div><!-- white-section end -->
<?php endwhile; endif; ?>
</section><!-- content end -->
<?php get_footer(); ?>
It's not really a trick, its how you can do exactly what you want done.
if (mail($contact_reciever, $the_subject, $the_message, $the_headers)) {
$contact_form_sent = true;
header("Location: " . get_permalink($THANKYOU_PAGE_ID));
}
Does it throw off any errors when you try using header? If so you might have to create a hook and verify the form earlier in the page load.
I'm assuming your comment means "Yes it is throwing off errors, how do I hook my form earlier so that it doesn't do that?". Well my good friend follow me..
add_action( 'send_headers', 'form_verify' );
function form_verify() {
// add form code here with header code
}

Security Flaw in php form

Apparently my php email form is full of security vulnerabilities, what can I do to fix them?
And what i mean by security flaws, that is hackers/bots being able to inject additional headers(eg bcc) into my form and send spam in my name
Any suggestions?
<?php
/*
* Template Name: Contact Form Page
*/
if(isset($_POST['submitted'])) {
//Check to make sure that the name field is not empty
if(trim($_POST['contactName']) === '') {
$nameError = __("You forgot to enter your name.", "site5framework");
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) === '') {
$emailError = __("You forgot to enter your email address.", "site5framework");
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+#[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$emailError = __("You entered an invalid email address.", "site5framework");
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//Check to make sure comments were entered
if(trim($_POST['comments']) === '') {
$commentError = __("You forgot to enter your comments.", "site5framework");
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}
//If there is no error, send the email
if(!isset($hasError)) {
$msg .= "------------User Info------------ \r\n"; //Title
$msg .= "User IP: ".$_SERVER["REMOTE_ADDR"]."\r\n"; //Sender's IP
$msg .= "Browser Info: ".$_SERVER["HTTP_USER_AGENT"]."\r\n"; //User agent
$msg .= "Referrer: ".$_SERVER["HTTP_REFERER"]; //Referrer
$emailTo = ''.of_get_option('sc_contact_email').'';
$subject = 'Contact Form Submission From '.$name;
$body = "Name: $name \n\nEmail: $email \n\nMessage: $comments \n\n $msg";
$headers = 'From: '.$name.' <'.$email.'>' . "\r\n" . 'Reply-To: ' . $email;
if(mail($emailTo, $subject, $body, $headers)) $emailSent = true;
}
}
get_header();
?>
<div id="content" class="container clearfix">
<!-- page header -->
<div class="container clearfix ">
<?php if(of_get_option('sc_contact_map') != '') { ?>
<!-- contact map -->
<div id="contact-map">
<?php echo of_get_option('sc_contact_map') ?>
</div>
<!-- end contact map -->
<?php } else if(of_get_option('sc_showpageheader') == '1' && get_post_meta($post->ID, 'snbpd_ph_disabled', true) != 'on' ) : ?>
<?php if(get_post_meta($post->ID, 'snbpd_phitemlink', true)!= '') : ?>
<?php
$thumbId = get_image_id_by_link ( get_post_meta($post->ID, 'snbpd_phitemlink', true) );
$thumb = wp_get_attachment_image_src($thumbId, 'page-header', false);
?>
<img class="intro-img" alt=" " src="<?php echo $thumb[0] ?>" alt="<?php the_title(); ?>" />
<?php elseif (of_get_option('sc_pageheaderurl') !='' ): ?>
<?php
$thumbId = get_image_id_by_link ( of_get_option('sc_pageheaderurl') );
$thumb = wp_get_attachment_image_src($thumbId, 'page-header', false);
?>
<img class="intro-img" alt=" " src="<?php echo $thumb[0] ?>" alt="<?php the_title(); ?>" />
<?php else: ?>
<img class="intro-img" alt=" " src="<?php echo get_template_directory_uri(); ?>/library/images/inner-page-bg.jpg" />
<?php endif ?>
<?php endif ?>
</div>
<!-- content -->
<div class="container">
<h1><?php the_title(); ?> <?php if ( !get_post_meta($post->ID, 'snbpd_pagedesc', true)== '') { ?>/<?php }?> <span><?php echo get_post_meta($post->ID, 'snbpd_pagedesc', true); ?></span></h1>
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="page-body clearfix">
<?php the_content(); ?>
</div>
<div class="one-third">
<div class="caddress"><strong><?php _e('Address:', 'site5framework') ?></strong> <?php echo of_get_option('sc_contact_address') ?></div>
<div class="cphone"><strong><?php _e('Phone:', 'site5framework') ?></strong> <?php echo of_get_option('sc_contact_phone') ?></div>
<div class="cphone"><strong><?php _e('Fax:', 'site5framework') ?></strong> <?php echo of_get_option('sc_contact_fax') ?></div>
<div class="cemail"><strong><?php _e('E-mail:', 'site5framework') ?></strong> <?php echo of_get_option('sc_contact_email') ?></div>
</div>
<div class="two-third last">
<div id="messages">
<p class="simple-error error" <?php if($hasError != '') echo 'style="display:block;"'; ?>><?php _e('There was an error submitting the form.', 'site5framework'); ?></p>
<p class="simple-success thanks"><?php _e('<strong>Thanks!</strong> Your email was successfully sent. We should be in touch soon.', 'site5framework'); ?></p>
</div>
<form id="contactForm" method="POST">
<div class="one-third">
<label for="nameinput"><?php _e("Your name", "site5framework"); ?></label>
<input type="text" id="nameinput" name="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField"/>
<span class="error" <?php if($nameError != '') echo 'style="display:block;"'; ?>><?php _e("You forgot to enter your name.", "site5framework");?></span>
</div>
<div class="one-third last">
<label for="emailinput"><?php _e("Your email", "site5framework"); ?></label>
<input type="text" id="emailinput" name="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="requiredField email"/>
<span class="error" <?php if($emailError != '') echo 'style="display:block;"'; ?>><?php _e("You forgot to enter your email address.", "site5framework");?></span>
</div>
<div class="two-third">
<label for="nameinput"><?php _e("Area/Rep", "site5framework"); ?></label>
<select>
<option>Area 1 - Engela</option>
<option>Area 2 - Francois</option>
<option>Area 3 - Johan</option>
</select>
</div>
<div class="two-third">
<label for="Mymessage"><?php _e("Your message", "site5framework"); ?></label>
<textarea cols="20" rows="20" id="Mymessage" name="comments" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<span class="error" <?php if($commentError != '') echo 'style="display:block;"'; ?>><?php _e("You forgot to enter your comments.", "site5framework");?></span>
</div>
<br class="clear" />
<input type="hidden" name="submitted" id="submitted" value="true" />
<button type="submit" id="submitbutton" class="button small round orange"><?php _e(' SEND MESSAGE ', 'site5framework'); ?></button>
</form>
</div>
<?php endwhile; ?>
</article>
<?php else : ?>
<article id="post-not-found">
<header>
<h1><?php _e("Not Found", "site5framework"); ?></h1>
</header>
<section class="post_content">
<p><?php _e("Sorry, but the requested resource was not found on this site.", "site5framework"); ?></p>
</section>
<footer>
</footer>
</article>
<?php endif; ?>
</div>
</div> <!-- end content -->
<?php get_footer(); ?>
use another contact template!
contact templates are a very vulnerable point in web sites, this one is really insecure (I guess / hope it's quite old).
A few points for the curious (only a first glance, there may be more issues)
the $name parameter is not escaped, malicious user can enter for example bcc addresses, which would be added to the header section, here
the regex for the $email parameter allows %, thus it is possible to enter url_encoded signs like < >
$comments is not secured, too..
Why exactly do you have the need to let users send email with aribtrary name and email address? Are you trying to be an open proxy?
P.S. Lines like this won't do what you probably intended, because they don't handle the case of no parameter or an array being passed.
trim($_POST['contactName']) === ''

Show user inputs on a summary page

I have several quantity boxes next to products so a user can input what quantity they want of a certain product.
The setup uses a step by step process using Jquery with the first step made up of checkboxes, the second made up of quantity inputs (where I need the help!) and the final step shows what has been selected... on submit it all gets emailed to me.
Step 1 with checkboxes is complete (with a lot of help from #Beetroot-Beetroot -Step by step checkbox process with summary of selections). Step 2 is where I need the help, how can I show the user quantity inputs on the summary page?
Here's the HTML:
<form id="customisesystem" method="post" action="">
<div id="first-step">
<div class="steps">
<p><b>Step 1 of 3</b></p>
</div>
<div class="progress-buttons"></div>
<div class="clear"></div>
<div id="customise-area">
<div id="customise-title">
<p><b>1. Hardware & software options</b> <span>Please choose one or more of the following</span></p>
</div>
<div id="customise-area">
<?php $posts = get_field('options');
if( $posts ):
$items = 0;
foreach( $posts as $post): // variable must be called $post (IMPORTANT)
setup_postdata($post); ?>
<div class="custom-option">
<p><b>
<?php the_title(); ?>
</b></p>
<br />
<div> <?php echo the_content(); ?> </div>
<?php $counter = 1; while(the_repeater_field('images')): ?>
<?php if($counter <= 1) { ?>
<img width="180" height="136" src="<?php the_sub_field('image'); ?>" alt="<?php the_title(); ?>" />
<?php } ?>
<?php $counter++; endwhile; ?>
<p>
<input type="checkbox" name="hardware[]" value="<?php the_title(); ?>">
Select</p>
<div class="clear"></div>
</div>
<?php $items++; endforeach;
wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly
endif; ?>
</div>
</div>
</div>
<!-- end first-step -->
<div id="second-step">
<div class="steps">
<p><b>Step 2 of 3</b></p>
</div>
<div class="progress-buttons"></div>
<div class="clear"></div>
<div id="customise-area">
<div id="customise-title">
<p><b>2. Accessories</b> <span>Please choose one or more of the following</span></p>
</div>
<div id="customise-area">
<?php $posts = get_field('accessories');
if( $posts ):
$items = 0;
foreach( $posts as $post): // variable must be called $post (IMPORTANT)
setup_postdata($post); ?>
<?php if ($items&1) { ?>
<div class="custom-option">
<p><b>
<?php the_title(); ?>
</b></p>
<br />
<div> <?php echo the_content(); ?> </div>
<?php $counter = 1; while(the_repeater_field('images')): ?>
<?php if($counter <= 1) { ?>
<img width="180" height="136" src="<?php the_sub_field('image'); ?>" alt="<?php the_title(); ?>" />
<?php } ?>
<?php $counter++; endwhile; ?>
<p style="clear:right;float:right;width:180px;">
<?php if(get_field('sizes')) { ?>
<?php while(the_repeater_field('sizes')) { ?>
<input type="text" name="quantity[]" style="width:15px;" value="0">
<?php echo the_sub_field('size'); ?><br />
<input type="hidden" name="product[]" value="<?php echo the_title(); ?> - <?php echo the_sub_field('size'); ?>">
<?php } ?>
<?php } else { ?>
<input type="text" name="quantity[]" style="width:15px;" value="">
<?php echo the_sub_field('size'); ?><br />
<input type="hidden" name="product[]" value="<?php echo the_title(); ?>">
<?php } ?>
</p>
<div class="clear"></div>
</div>
<?php } else { ?>
<div class="custom-option">
<p><b>
<?php the_title(); ?>
</b></p>
<br />
<div> <?php echo the_content(); ?> </div>
<?php $counter = 1; while(the_repeater_field('images')): ?>
<?php if($counter <= 1) { ?>
<img width="180" height="136" src="<?php the_sub_field('image'); ?>" alt="<?php the_title(); ?>" />
<?php } ?>
<?php $counter++; endwhile; ?>
<p style="clear:right;float:right;width:180px;">
<?php if(get_field('sizes')) { ?>
<?php while(the_repeater_field('sizes')) { ?>
<input type="text" name="quantity[]" style="width:15px;" value="0">
<?php echo the_sub_field('size'); ?><br />
<input type="hidden" name="product[]" value="<?php echo the_title(); ?> - <?php echo the_sub_field('size'); ?>">
<?php } ?>
<?php } else { ?>
<input type="text" name="quantity[]" style="width:15px;" value="">
<?php echo the_sub_field('size'); ?><br />
<input type="hidden" name="product[]" value="<?php echo the_title(); ?>">
<?php } ?>
</p>
<div class="clear"></div>
</div>
<?php } ?>
<?php $items++; endforeach;
wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly
endif; ?>
</div>
</div>
</div>
<!-- end second-step -->
<div id="third-step">
<div class="steps">
<p><b>Step 3 of 3</b></p>
</div>
<div class="progress-buttons"></div>
<div class="clear"></div>
<div id="customise-area-3">
<p>Summary</p>
<div id="customise-area-3-child">
<input type="submit" name="submit" id="submit" value="submit" />
</div>
</div>
</div>
<!-- end third-step -->
</form>
Here's the Jquery:
jQuery(document).ready(function( $ ) {
//Create nav wrapper
var $nav = $('<div/>').addClass('prev-next');
//Create Prev button, attach click handler and append to nav wrapper
$('<a class="prev" href="#">Back</a>').on('click', function () {
$(this).closest(".step").hide().prev(".step").show();
}).prependTo($nav);
//Create Next button, attach click handler and append to nav wrapper
$('<a class="next" href="#">Next</a>').on('click', function () {
$('.summary_text').html(makeSummary());
var $step = $(this).closest(".step");
if (validate($step)) {
$step.hide().next(".step").show();
}
}).appendTo($nav);
//In one long jQuery chain ...
//* prepend nav to each step div
//* hide all steps except the first
//* convert first 'Back' link and last 'Next' link to spans.
var $steps = $(".step").prepend($nav).hide()
.filter(":first").show().find("a.prev").after('Back').remove().end().end()
.filter(":last").find("a.next").after('').remove().end().end();
//Set step titles
$steps.each(function (i, step) {
$(step).find(".step-title").text('Step ' + (i + 1) + ' of ' + $steps.length);
});
$('a.back-to-product').click(function(){
$(".customise").hide();
$(".entire_product").show();
});
//Unfortunately, hidden form elements are not inlcuded in the submission,
//so all steps must be shown before the form is submitted.
var $submitButton = $("input[name='submit']").on('submit', function () {
$steps.show();
return true;
});
function validate($step) {
//var valid = false;
var valid = true; //for debugging
//Perform validation
switch ($step.index(".step")) { //index-origin is zero
case 0:
//Validate step 1 here
//if valid, set `valid` to true
break;
case 1:
//Validate step 2 here
//if valid, set `valid` to true
break;
case 2:
//No validatation required
break;
}
return valid; //Important - determines behaviour after validate() returns.
}
function makeSummary() {
var summary = [];
$steps.not(":last").each(function (i, step) {
$step = $(step);
summary.push('<p><b>' + $step.data('name') + '</b></p>');
var $ch = $step.find('input[type="checkbox"]:checked');
if (!$ch.length) {
summary.push('<p>No items selected</p><br />');
} else {
$ch.each(function (i, ch) {
summary.push('<p>' + $(ch).val() + '</p><br />');
});
}
});
return summary.join('');
}
});
First, make the quantity[] and product[] fields more readily selectable by hard-coding class="quantity" and class="product" in the HTML.
<input type="text" name="quantity[]" class="quantity" style="width:15px;" value="0">25 cm²<br />
<input type="hidden" name="product[]" class="product" value="Equipment Electrode Set - 25 cm²">
Here's the javascript :
function makeSummary() {
var summary = [];
$steps.not(":last").each(function (i, step) {
$step = $(step);
summary.push('<p><b>' + $step.data('name') + '</b></p>');
var $ch = $('input[type="checkbox"]:checked', $step);
var $qty = $('input.quantity', $step).filter(function() {
return this.value !== '0';
});
var $selected = $ch.add($qty);//jQuery collection of checkeboxes, or quantity fields, or a mixture of both.
if (!$selected.length) {
summary.push('<p>No items selected</p><br />');
} else {
$selected.each(function (i, s) {
var $s = $(s);
var prefix = ($s.hasClass('quantity')) ? ($s.nextAll("input.product").val() + ' : ') : '';
summary.push('<p>' + prefix + $s.val() + '</p><br />');
});
}
});
return summary.join('');
}
By doing it this way, the function remains general with regard to the number of steps, but also with regard to the composition of each step; it will handle completely specialized "checkbox step(s)" and "quantity step(s)", and (should you ever have the need) mixed "checkbox/quantity step(s)". In every case, the selected items will be summarized in their original DOM order.
DEMO

Categories