JS setTimeout 関数が動かない

Question

前提・実現したいこと

valueの値を取得してその値ごとにactionを動的に変え、遷移時にフェードアウトさせようとしているのですが、
sex-age.htmlこのページにおいてvalue="man"を選択しsubmitしたらactionが書き換わり遷移されると思ったのですが、遷移されず同じページに戻されます
if(url.match(/sex-age.html/)){
if(document.sexageform.sex.value == "man"){

        document.sexageform.action="/check/point_men.html";
    }

ここに引っかかりません、console.logで確認しても値が表示できなかったのでなぜここに引っかからないのかがわかりません。
原因がわかる方がいましたら、教えていただければ幸いです。

###html

<main>
	<div class="s-contents">
		<form method="get" class="form" id="sex-age" name="sexageform" data-validate>
			<h2 class="s-heading age-heading">あなたの性別は？</h2>
			<div class="s-radio-box">
				<div class="btn corner-border corner-button">
					<input id="man" type="radio" name="sex" value="man">
					<label for="man" class=" corner-border__inner">
						<img src="/check/common/img/man.png" alt="" class="border">
					</label>
				</div>
			<div class="btn corner-border corner-button">
			<input id="woman" type="radio" name="sex" value="woman">
			<label for="woman" class=" corner-border__inner">
				<img src="/check/common/img/woman.png" alt="" class="border">
			</label></div>
			</div>
			<h2 class="s-heading">あなたの年齢は？</h2>
			<div class="age">
			<input type="number" name="age" max="60" min="20" placeholder="年齢" id="number" required>
			</div>
			<div class="s-btn-line">
				<a href="javascript:void(0);" onclick="window.history.back();"><img src="/check/common/img/return.png" alt=""></a>
				<input type="submit" value="次へ" onclick="puff()" id="next" disabled="disabled">
				<div class=""></div>
			</div>
		</form>
	</div>
</main>

js

let body = document.getElementsByTagName('body')[0];

function fadeOut() {
    body.classList.add('bodyfadeout');
}

// 遷移先切り分け
function  linkUrl(){
    let url = location.href ;

    if(url.match(/sex-age.html/)){
        if(document.sexageform.sex.value == "man"){

            document.sexageform.action="/check/point_men.html";
        }
        else if(document.sexageform.sex.value == "woman"){

            document.sexageform.action="/check/point_women.html";
        }
    }
    else if(url.match(/location.html/)){
        if(document.sexageform.sex.value == "venue"){

            document.sexageform.action="/check/venue.html";
        }
        else if(document.sexageform.sex.value == "store"){

            document.sexageform.action="/check/store.html";
        }
    }
    else if(url.match(/check.html/)){
        location.href = '/check/sex-age.html';
    }
    else if(url.match(/point/)){
        document.sexageform.action="/check/location.html";
    }
}

let next = document.getElementById('next');
    next.addEventListener('click', function() {
    fadeOut();
    setTimeout(function(){
        linkUrl();
    }, 300);
    });

Comments

[kei344]

「ここだけ反応する」が動いているならsetTimeout に登録された関数は動いていますよ。「動きません」とは「何をしたときに」「どうなると思って」「どうなったのか」を、具体的に記述されたほうが回答を得られやすいと思います。

[backwimps]

ご指摘ありがとうございます。
初めてなもので書き方がわからなかったのですが
具体的に書かさせていただきました。

[kei344]

formの内容やクリックイベントを割り当てているボタンによって状況が変わるので、HTMLも追記してください。

[backwimps]

追記いたしました。
どうぞよろしくお願いいたします。

Answer 1

type="submit"にクリックイベントを設定しても、（特に止めなければ）通常動作（フォーム送信）もおこります。（setTimeoutが起こる前にページが書き換わる）
フォーム送信の時間をずらすなら、type="button"にして、linkUrl関数内でフォームをsubmit()するのがよいです。

【<input type="button"> - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/button

【HTMLFormElement.submit - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/submit

Comments

[backwimps]

解決いたしました。
参考まで用意していただきありがとうございます。
この度は解決していただきありがとうございました！