1

さまざまな PHP 関数をトリガーするためのラジオ ボタンを用意します。ただし、現時点では、送信ボタンをクリックするとページが点滅するだけです。

.PHP を微調整する必要があるようです!!

ページを更新せずに機能を実行したいので、AJAX..

送信ボタン (Return) がクリックされたときに、選択されたラジオ ボタンに従って、フォーム フィールドは PHP に文字列を送信する必要があります。

http://bootply.com/61461

HTML ページ:

<div class="container">

  <!-- Input Section -->
  <form action="">
    <fieldset>
      <legend>A Form to input plain English and output Pig Latin</legend>
      <label></label>
      <input class="span9" type="text" id="txt1" name="yourText" placeholder="… Type Something Here …"><br><br>
      <span class="help-block">Choose whether or not you want to have the English input echoed on the output as Pig Latin:</span>
      <label class="radio inline">
      <input type="radio" name="optionsRadios" id="english" value="english" checked>
      Echo the English Input
      </label>
      <label class="radio inline">
      <input type="radio" name="optionsRadios" id="piglatin" value="piglatin">
      Output as Pig Latin
      </label>
      <br><br>
      <button type="submit" class="btn" onClick="showTxt(this.value)">Return</button>
    </fieldset>
  </form>

  <br><br><br>

  <!-- Output Section -->
  <span id="return-text">
    <p>Text Will Post Here</p>
  </span>

</div>

PHP ページ:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Pig Latin PHP</title>
  </head>

  <body>

    <?php
    if( isset($_POST['yourText'])){
        $text = $_POST['yourText'];
    }
    function engish(){
        if( isset($_POST['optionsRadios']) &&
        $_POST['optionsRadios'] == 'english'){
            echo $text;
        }
    }
    function piglatin(){
        if( isset($_POST['optionsRadios']) &&
        $_POST['optionsRadios'] == 'piglatin'){
            echo '…pig latin php operation to be written…';
        }
    }
    echo english();
    echo piglatin();
    ?>

  </body>
</html>

AJAX SCRIPT (ogc-nick の回答に感謝):

<!-- AJAX Call to piglatin.php -->
<script>
  function showTxt(str)
  {
  var xmlhttp;
  if (str.length==0)
    { 
    document.getElementById("return-text").innerHTML="";
    return;
    }
  if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
  else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      document.getElementById("return-text").innerHTML=xmlhttp.responseText;
      }
    }
  xmlhttp.open("POST","piglatinajax.php", true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  var dataString = $('form').serialize();
    xmlhttp.send(dataString);
  }

ご覧いただきありがとうございます

4

1 に答える 1

0

リクエストは $_GET 変数でデータを送信しているように見えますqが、php はインデックスを探しています。次のように送信メソッドに投稿データを追加する必要があります

var optionsRadios = document.forms[formname].optionsRadios.value; 
var yourText = document.forms[formname].yourText.value; 
xmlhttp.send("optionsRadios=" + optionsRadios + "&yourText=" + yourText);

参照: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

于 2013-05-15T20:58:47.430 に答える