guy.joseph on "Running JQuery onclick"

Hi

I have very little experience with web development but a reasonable experience with Windows .Net development. Apologies therefore if any of this is a bit silly.

I have got this JSFiddle which is working perfectly, but I'm now trying to 'port' it over to a wordpress plugin.

I have my plugin below. Essentially I am taking the code in the fiddle and running a for/each over a GravityForms property to generate x number of different input boxes. By pressing the add another link a new set of identical boxes should be added, and removed with their respective remove link.

I am unable to get the add/remove code to actually run. All that happens is that the page reloads to the top... I know that's because of the href="#" bit.

So I'm pretty sure that I've done something stupid, but if somebody could point out what I've done that would be very much appreciated. The Java code from the JSFiddle is located in the /gf-repeater-field/js/repeaterJS.js file, copied exactly from the Fiddle. I don't care if it's a button, link or image that the user presses. It would be preferable if it didn't reload to the top of the page.

Thanks for your help!

<?php
function gf_repeater_scripts() {
	wp_enqueue_script( 'repeaterJS',  plugins_url() . '/gf-repeater-field/js/repeaterJS.js', '', '1.0.0', false );
}

add_action( 'wp_enqueue_scripts', 'gf_repeater_scripts' );

function phpAlert($msg) {
    echo '<script type="text/javascript">alert("' . $msg . '")</script>';
}

// Add a custom field button to the advanced to the field editor
add_filter( 'gform_add_field_buttons', 'gf_add_repeat_field' );
function gf_add_repeat_field( $field_groups ) {
    foreach( $field_groups as &$group ){
        if( $group["name"] == "advanced_fields" ){
            $group["fields"][] = array(
                "class"=>"button",
                "value" => __("Repeater", "gravityforms"),
                "onclick" => "StartAddField('repeater');"
            );
            break;
        }
    }
    return $field_groups;
}

// Adds title to GF custom field
add_filter( 'gform_field_type_title' , 'gf_repeat_title' );
function gf_repeat_title( $type ) {
    if ( $type == 'repeater' )
        return __( 'Repeater' , 'gravityforms' );
}

// Adds the input area to the external side
add_action( "gform_field_input" , "gf_repeat_input", 10, 5 );
function gf_repeat_input( $input, $field, $value, $lead_id, $form_id ){

if ( $field["type"] == "repeater" ) {

        $id = $field["id"];
        $field_id = IS_ADMIN || $form_id == 0 ? "input_$id" : "input_" . $form_id . "_$id";
        $form_id = IS_ADMIN && empty($form_id) ? rgget("id") : $form_id;

        $has_columns = is_array(rgar($field, "choices"));
        $columns = $has_columns ? rgar($field, "choices") : array(array());

				// Start building control

				$repeater = "";
                $repeater .= "<div class='repeatingSection' style='border: 1px solid black; padding: 5px; margin: 5px;'>";

                foreach($columns as $item){
					$myName = $item["text"];
					$myValue = $item["value"];

					$repeater .= "<div class='formRow' style='padding: 2px;'>";				//Begin formRow

					$repeater .= "<label for='" . $myValue . "_1'>";
					$repeater .= $myName;
					$repeater .= "</label>";

					$repeater .= "<input type='text' name='";
					$repeater .= $myValue;
					$repeater .= "_1' id='";
					$repeater .=  $myValue ;
					$repeater .= "_1' value='' />";
					$repeater .= "</div>";													//End formRow
                }

				$repeater .= "<a href='#' class='deleteSection'>Delete</a>";

				$repeater .= "</div>";														//End repeatingSection

				$repeater .= "<div class='formRowRepeatingSection'> <a href='#' class='addAnotherSection'>Add Another</a></div>";

                return $repeater;
}
}