3

ラジオボタンでフォームのアクションアドレスを変更する方法

次のフォームを取得しました

とラジオボタン

<b>Would you like to to make payment ? <input type="radio" name="choice" value="yes">Yes <input type="radio" name="choice" value="no" checked>No</b>'

ユーザーの選択がno(デフォルトでオンになっている) 場合、フォームactionは引き続きregister_page4.phpになります。

ただし、ユーザーが選択yesして送信ボタンを押した場合:

<input  id="btnSubmit" type="submit" value="Next" />

フォーム アクションをregister_page4.phpではなくpayment.phpにしたいのですが、どうすればそれを実現できますか。

私は変更を行い、これが私が入力したものです

<html>
<head>
</head>
<body>

  <form name="form1" method="post" action="register_page4.php">

    Would you like to make an appointment for collection ? 
<input type="radio" name="collection" value="yes">Yes 
<input type="radio" name="collection" value="no" checked>No
   <input  id="btnSubmit" type="submit" value="Next" />  
    </form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
jQuery(document).ready(function($) {
    var form = $('form[name="form1"]'),
        radio = $('input[name="choice"]'),
        choice = '';

    radio.change(function(e) {
        choice = this.value;

        if (choice === 'yes') {
            form.attr('action', 'payment.php');
        } else {
            form.attr('action', 'register_page4.php');
        }
    });
});
</script>
</body>
</html>

しかし、結果は引き続き register_page4.php になります。ラジオ ボタンをクリックして [はい] をクリックしても、両方をクリックしてみますが、両方とも register_page4.php に移動します。

4

6 に答える 6

6

これは、JavaScript ソリューションを使用した例です。基本的に、ラジオボタンを変更すると、フォームの属性 (ここでは id #yourForm) が正しいアクションで変更されます。

jQuery(document).ready(function($) {
    var form = $('form[name="form1"]'),
        radio = $('input[name="collection"]'),
        choice = '';

    radio.change(function(e) {
        choice = this.value;

        if (choice === 'yes') {
            form.attr('action', 'payment.php');
        } else {
            form.attr('action', 'register_page4.php');
        }
    });
});
于 2013-11-01T18:42:32.723 に答える
1

POST メソッドと GET メソッドのどちらを使用しているかに応じて、次のいずれかになります。

$nextPage = ($_POST['choice']=='yes') ? 'payment.php' : 'register_page4.php';

また

$nextPage = ($_GET['choice']=='yes') ? 'payment.php' : 'register_page4.php';

次に、単に $nextPage にリダイレクトします

于 2013-11-01T18:39:44.213 に答える
0

次の場合は [送信] ボタンを無効にしますchecked = No

JSFiddle DEMO の動作


HTML

<form action="payment.php" method="POST">   
<input name="choice" type="radio" id="choiceyes" value="yes" />Yes
<input name="choice" type="radio" id="choiceno" value="no" checked="checked" />No
<input  id="btnSubmit" name="btnSubmit" type="submit" value="Next" /></form>

脚本

$(function () {
    var $join = $("input[name=btnSubmit]");
    var processJoin = function (element) {
        if(element.id == "choiceno") {
            $join.attr("disabled", "disabled");
        }
        else {
            $join.removeAttr("disabled")
        }
    };

    $(":radio[name=choice]").click(function () {
        processJoin(this);
    }).filter(":checked").each(function () {
        processJoin(this);
    });
});
于 2013-11-01T18:52:34.783 に答える
0

ドキュメントの準備完了を追加

<script>
$(document).ready(function(){
    $("input[name=choice]").change(function(){
        if ($("input[name=choice]").val() == 'yes'){
            $("#form1").attr("action","payment.php");
        }
        else
        {
            $("#form1").attr("action","register_page4.php");
        }
    });

});
</script>

問題が続く場合は、アクションを削除してみてください:

フォームからアクションを削除します。

<form name="form1" method="post" action="register_page4.php">

正しい

<form name="form1" method="post">
于 2013-11-01T19:11:13.690 に答える
-1

次のコードを使用します。

<body>
  <form name="form1" id="form1" method="post" action="register_page4.php">
    Would you like to make an appointment for collection ? 
    <input type="radio" name="collection" value="yes" onChange="if(this.checked){document.getElementById('form1').action='payment.php'}">Yes 
    <input type="radio" name="collection" value="no" checked>No
    <input type="submit">
  </form>
</body>

ここにデモがあります

于 2013-11-01T19:18:56.307 に答える