JQuery не работает-radiobutton

Я пытаюсь создать webapp, который находит область для выбранной фигуры в соответствии с параметрами для нее.JQuery не работает-radiobutton

поэтому я на полпути застрял.

При щелчке по переключателю текстовые поля параметров должны загружаться в значениях div. Я попытался использовать jquery для этого, чтобы функционировать, но когда переключатель установлен, текстовые поля не загружаются в div.

помогите пожалуйста. я не могу найти, где я иду не так.

JQuery

$(document).ready(function(){ 
    $('input[type="radio"]').click(function(){ 
     if($(this).attr("value")=="circle") 
     { 
      $('.values').innerHTML="<table class='table table-default'><tbody><tr><td> 
      <label for='circlerad'>Radius:</label></td><td><input type='text' 
      class='form-control' name='circlerad' maxlength='10'></td></tr></tbody> 
      </table>"; 
     } 
     if($(this).attr("value")=="square") 
     { 
      $('.values').innerHTML="<table class='table table-default'><tbody><tr><td> 
      <label for='sqside'>Side-length</label></td><td><input type='text' 
      class='form-control' name='sqside' maxlength='10'></td></tr></tbody> 
      </table>"; 
     } 
     if($(this).attr("value")=="rectangle") 
     { 
      $('.values').innerHTML="<table class='table table-default'><tbody><tr><td> 
      <label for='reclen'>Length:</label></td><td><input type='text' 
      class='form-control' name='reclen' maxlength='10'></td></tr> 
      <tr><td> 
      <label for='recbr'>Breadth:</label></td><td><input type='text' 
      class='form-control' name='recbr' maxlength='10'></td></tr> 
      </tbody> 
      </table>"; 
     } 
    }); 
});

HTML/PHP

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Area Finder</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 

    <?php 

    echo("<center><h1>Area Finder!</h1></center><div class='conatiner'><div class='row'><form role='form' action='./arearesult.php' method='POST'><div class='form-group'><div class='panel panel-primary col-xs-3'><div class='panel-heading'>Select a shape</div><div class=' panel-body'>"); 
    echo("<table class='table table-default'><tbody>"); 
    echo("<tr><td>Circle</td><td><input type='radio' name=shape value='circle'></td></tr> 
     <tr><td>Square</td><td><input type='radio' name=shape value='square'></td></tr> 
     <tr><td>Rectangle</td><td><input type='radio' name=shape value='rectangle'></td></tr></tbody></table></div></div></div>"); 
    echo("<div class='col-xs-1'></div><div class='panel panel-primary col-xs-5'><div class='panel-heading'>Enter values</div>"); 
    echo("<div class='values panel-body'><table class='table table-default'><tbody>"); 

    echo("</form></div></div>"); 
    ?> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
    <script src='js/parameters.js'></script> 
    </body> 
</html>

area finder webpage

источник

2016-01-09 Vishnuprasad Venugopal

сделал вам проверить значение кнопки радио принимаются правильно – KVK

хорошо я ВГ разместил весь код .. и можно проверить. .. Я правильно дал значения! –

проверить мой ответ – KVK

Вопрос относится к заданию $('.values').innerHTML.

Должно быть так.

$(document).ready(function() { 
    $('input[type="radio"]').click(function() { 
    if ($(this).attr("value") == "circle") { 
     $('.values').html("<table class='table table-default'><tbody><tr><td>" + 
    "<label for='circlerad'>Radius:</label></td><td><input type='text' " + 
    "class='form-control' name='circlerad' maxlength='10'></td></tr></tbody>" + 
    "</table>"); 
    } 
    if ($(this).attr("value") == "square") { 
     $('.values').html("<table class='table table-default'><tbody><tr><td>" + 
    "<label for='sqside'>Side-length</label></td><td><input type='text'" + 
    "class='form-control' name='sqside' maxlength='10'></td></tr></tbody>" + 
    "</table>"); 
    } 
    if ($(this).attr("value") == "rectangle") { 
     $('.values').html("<table class='table table-default'><tbody><tr><td>" + 
    "<label for='reclen'>Length:</label></td><td><input type='text'" + 
    "class='form-control' name='reclen' maxlength='10'></td></tr>" + 
    "<tr><td>" + 
    "<label for='recbr'>Breadth:</label></td><td><input type='text'" + 
    "class='form-control' name='recbr' maxlength='10'></td></tr>" + 
    "</tbody>" + 
    "</table>"); 
    } 
    }); 
});

UPDATE: Изменен $('.values').html() рассматривает работу plunker https://jsfiddle.net/u0hd5Lmq/

Read https://davidwalsh.name/multiline-javascript-strings

источник

2016-01-09 07:26:17 PrinceG

какая разница это делает, я попробовал. он все еще не работает. –

Вам нужно объединить многострочную строку. – PrinceG

yaa я сделал это .. но его все равно то же самое. –

изменить свой код в этот формат будет вр k

$('.values').html("<table class='table table-default'><tbody><tr><td> 
      <label for='circlerad'>Radius:</label></td><td><input type='text' 
      class='form-control' name='circlerad' maxlength='10'></td></tr></tbody> 
      </table>");

источник

2016-01-09 07:24:31 KVK

все еще не работает! –

JQuery не работает-radiobutton

ответ

Смежные вопросы