Javascript works in html but not wordpress

I’m currently working on turning my 22 year old site that’s mostly html into a single WordPress site. I’ve almost finished but I’m having some trouble getting one of my Javascripts to work in WordPress (I’m working offline in Wamp at the moment so I can’t link the exact page).

The script takes user input from the form, then processes the results and returns either an error message or a knitting pattern on the same page.

Here is the script working fine in html Custom fit fingerless mitts

This is my Javascript (please excuse if it’s clumsy, I’m a novice)

function pattern () {
//get values from form
var yourName = $('input[name="name"]').val(),
    handCircumference = $('input[name="handCirc"]').val(),
    thumbCircumference = $('input[name="thumbCirc"]').val(),
	thumbBaseToIndex = $('input[name="thumbBase"]').val(),
	stitchesPerFourInches = $('input[name="gauge"]').val(),
	needleSize = $('input[name="needles"]').val(),
	yarnUsed = $('input[name="yarn"]').val(),
	cm = $('input[id="cm"]:checked').val();
	inches = $('input[id="inches"]:checked').val("true");
	
// Make sure hand circumference is a number
var handCircumference = parseFloat(handCircumference);

// work out number of sts per cm		
var stitchesPerFourInches = parseFloat(stitchesPerFourInches);
	stsPerCm = (stitchesPerFourInches)/10;
	
//if knitter has chosen inches, convert inches to cm and work out palm measurement - ribbing
if (inches.length > 0) {
var measure = "inches",
	handInches = parseFloat(handCircumference) * 2.5,
	thumbInches = parseFloat(thumbCircumference) * 2.5,
	thumbBase = parseFloat(thumbBaseToIndex),
	palm = (Math.floor(thumbBase - 0.5) * 2 / 2).toFixed(1);} else {
var measure = "cm",
	handInches = parseFloat(handCircumference),
	thumbInches = parseFloat(thumbCircumference),
	thumbBase = parseFloat(thumbBaseToIndex),
	palm = (Math.floor(thumbBase - 1.25) * 2 / 2).toFixed(1);
}

// work out number of cast on stitches and make sure cast on is an even number
var castOn = Math.ceil(stsPerCm * handInches);

if ((castOn % 2 == 0) === true){
var castOn = castOn;
} else {
var castOn = castOn + 1
};

// number of thumb stitches - make sure thumb stitches is an odd number
var thumbStitches = Math.ceil(stsPerCm * thumbInches-2);
    
if ((thumbStitches % 2 != 0) === true){
var thumbStitches = thumbStitches;
} else {
var thumbStitches = thumbStitches + 1
};

var thumbStitchesPlus2 = (thumbStitches+2);

// Work out how far to knit after working thumb
var thumbBaseToIndex = parseFloat(thumbBaseToIndex);

// Return all values to the pattern
$('#yourName').html(yourName);
$('#measure').html(measure);
$('#measure2').html(measure);
$('#measure3').html(measure);
$('#handCircumference').html(handCircumference);
$('#needleSize').html(needleSize);
$('#needleSize2').html(needleSize);
$('#yarnUsed').html(yarnUsed);
$('#castOn').html(castOn);
$('#thumbStitches').html(thumbStitches);
$('#palm').html(palm);
$('#thumbBaseToIndex').html(thumbBaseToIndex);
$('#stitchesPerFourInches').html(stitchesPerFourInches);
$('#thumbStitchesPlus2').html(thumbStitchesPlus2);
}

// Validate

  function validation(){

    var valid = true;

    var yourName = $('input[name="name"]').val(),
    handCircumference = $('input[name="handCirc"]').val(),
    thumbCircumference = $('input[name="thumbCirc"]').val(),
    thumbBaseToIndex = $('input[name="thumbBase"]').val(),
    stitchesPerFourInches = $('input[name="gauge"]').val(),
    needleSize = $('input[name="needles"]').val(),
    yarnUsed = $('input[name="yarn"]').val();

if  (yourName.length == 0, 
	handCircumference.length == 0, 
	thumbCircumference.length == 0,
	thumbBaseToIndex.length == 0, 
	stitchesPerFourInches.length == 0,
	needleSize.length == 0, 
	yarnUsed == 0 ) {
	
	valid = false;
}

	return valid;

 }
 
 // Return pattern or request to finish form

$(document).ready(function() {
  
$( "#makepattern" ).click(function( event ) {
   
    if(validation() === true){
    event.preventDefault();
	$( "#patternResult" ).html( event.result );
	$( "#patternCreate" ).hide( );
	$( "#patternResult" ).show( );
	return pattern();
          
    }

    else {
  alert("You must fill in all of the form");
    }
}
);
});

And this is what I have in my WordPress page I’ve removed a lot of plain text for brevity)

<div id="patternCreate">

<form id="patterninfo" method="post">
<fieldset><legend>Who are the mitts going to fit?</legend> 
Who is this pattern for? <input id="name" name="name" type="text" /></fieldset>
<fieldset class="clear"><legend>Measurements</legend><strong>Note for those who usually use fractions</strong>: text

Would you like your pattern written in inches or cm?
<input id="inches" name="increments" type="radio" /><label for="inches">inches </label>

<input id="cm" name="increments" type="radio" /><label for="cm">cm</label>

Measure the person who will be wearing the mitts. You will need 3 measurements:

<label for="handCirc">The circumference of the hand, excluding the thumb</label> <input id="handCirc" name="handCirc" type="text" />

<label for="thumbCirc">The circumference of the thumb</label> <input id="thumbCirc" name="thumbCirc" type="text" />

<label for="thumbBase">The distance from the base of the thumb to the base of the base of the index finger</label> <input id="thumbBase" name="thumbBase" type="text" /></fieldset>
<fieldset><legend>Gauge</legend><label for="gauge">text</label> <input id="gauge" name="gauge" type="text" /></fieldset>
<fieldset><legend>Yarn and Needles</legend><label for="needles">What size needles did you use?</label> <input id="needles" name="needles" type="text" />

<label for="yarn">What yarn did you use?</label> <input id="yarn" name="yarn" type="text" /></fieldset>
<p class="clear"><input id="makepattern" type="submit" value="Make My Pattern!" /></p>

</form></div>

<div id="patternResult" style="display: none;">
<h2><span id="yourName"></span>'s Custom Fit Fingerless Mitts Pattern</h2>

<strong>Size:</strong> to fit <span id="handCircumference"></span> <span id="measure"></span> hand circumference (excluding thumb)
<h3>Materials</h3>
<strong>Needles:</strong> A set of size <span id="needleSize"></span> double pointed needles and a set of DPNs one or two sizes smaller for the ribbing

<strong>Yarn:</strong> <span id="yarnUsed"></span>

<strong>Tension:</strong> <span id="stitchesPerFourInches"></span> sts per 10cm/4" on <span id="needleSize2"></span> needles
<h3>Abbreviations</h3>

text

<h3>Pattern</h3>
Using smaller needles, cast on <span id="castOn"></span>sts, and join for knitting in the round.

text

until you reach "K1, m1, k<span id="thumbStitches"></span>, m1, k to end of round

Next round: K1, put next <span id="thumbStitchesPlus2"></span> sts onto a holder, cast on 1 st, k to the end of the round.

Continue working rounds in stocking stitch for <span id="palm"></span> <span id="measure2"></span>

Change to smaller needles and work in k1, p1 rib until knitting measures <span id="thumbBaseToIndex"></span> <span id="measure3"> from the thumb opening. Cast off neatly in rib.
</span>

text

</div>

<script type="text/javascript" src="../../../../scripts/mittstofit.js"></script>

When I fill in the form and click the “Make my pattern” button, I get a 404 error.
This happens both when I should get an error, and when it should return the pattern.

As you can see from the linked page, it works fine in html.

I’d really appreciate any guidance anyone could offer in getting it to work. Thanks in advance.

Edited to add: It seems that if I don’t fill in any of the form the page just reloads. If I fill in a bit, or all of the form, I get a 404 error.

• This topic was modified 6 years, 5 months ago by knittingand.