Простая проверка ввода и добавление значений в таблицу

Мне нужно добавить информацию о продукте из входов в таблицу с помощью библиотеки jQuery. Я пытаюсь в течение довольно долгого времени, но я никуда не денусь. Сначала мне нужно ввести данные на вкладки, выбрать соответствующий переключатель и подтвердить ввод полей ввода. Если ошибок нет, информация о продукте должна быть добавлена в таблицу. Я пробовал код: jsFiddle Простая проверка ввода и добавление значений в таблицу

Ничего не работает по назначению. Что я делаю не так?

JS код:

$(document).ready(function() { 

//Global variables 
var productName = ""; 
var price = 0; 
var onStack = "N/A"; 

$("body > form").submit(function() { 
    //Check if any of requested inputs is empty 
    if ($("#name").val().length == 0) { 
     //Missing name alert 
     $("#errors").val('Missing product name'); 
     break; 
    } else if ($("#price").val() == 0) { 
     //Missing price alert 
     $("#errors").val('Missing price'); 
     break; 
    } 

    //Get values from text inputs 
    productName = $("#name").val(); 
    price = $("#price").val(); 

    //Check radio buttons and assign values 
    if ($('input[value = "true"]'.is(':checked')) { 
     onStack = "Product available"; 
    } else if ('input[value = "false"]'.is(':checked') { 
     onStack = "Not available"; 
    } 

    //Add values to table 
    $("table tr:last").after("<tr><td>$productName</td><td>$price</td><td>$onStack</td></tr>"); 
    }); 
});

HTML код:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="index.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 

<body> 
    <form method="" action=""> 
     <input type="text" id="name" placeholder="Product name" /> 
     <br /> 
     <input type="text" id="price" placeholder="Price" /> 
     <br/> 
     <input type="radio" name="stack" value="true">Product available 
     <br /> 
     <input type="radio" name="stack" value="false">Product not available 
     <br /> 
     <input type="submit" value="Submit"> 
    </form> 
    <div id="errors"></div> 
    <br /> 
    <table border="1"> 
     <tr> 
      <th>Product name</th> 
      <th>Price</th> 
      <th>Stack</th> 
     </tr> 
    </table> 
    <div id="sumOnStack">Sum of available products</div> 
    <div id="SumNotOnStack">Sum of unavailable products</div> 
    <input type="button" id="resetForm" value="Reset form" /> 
    <br /> 
</body> 
</html>

источник

2013-05-24 Uroš Podrekar

Вы можете определенно отобразить HTML здесь, и это было бы лучше, чем попросить нас перейти на другой сайт, чтобы увидеть ваш вопрос. HTML должен быть отформатирован как код, как это было сделано с вашим JS. – DOK

В написании «длины» есть опечатка. – DOK

вы не включили библиотеки jQuery. проверьте его один раз – PSR

$(document).ready(function() { 

    //Global variables 
    var productName = ""; 
    var price = 0; 
    var onStack = "N/A"; 

    $("body > form").submit(function (e) { 
     //Check if any of requested inputs is empty 
     $("#errors").html(''); 
     if ($("#name").val().length == 0) { 
      //Missing name alert 
      $("#errors").html('Missing product name'); 
      return false; 

     } else if ($("#price").val() == 0) { 
      //Missing price alert 
      $("#errors").html('Missing price'); 
      return false; 
     } else if($('input[name="stack"]:checked').length == 0) { 
      $("#errors").html('Missing product availibility'); 
      return false; 

     } 

     //Get values from text inputs 
     productName = $("#name").val(); 
     price = $("#price").val(); 
     var stack = $('input[name="stack"]:checked'); 
     console.log($(stack).val()); 
     //Check radio buttons and assign values 
     if ($(stack).val() == 'true') { 
      onStack = "Product available"; 
     } else { 
      onStack = "Not available"; 
     } 

     //Add values to table 
     $("table tr:last").after("<tr><td>"+productName+"</td><td>"+ price +"</td><td>"+ onStack +"</td></tr>"); 
     return false; 
     }); 
    });

Пожалуйста, попробуйте это. Надежда выше кода поможет u.

источник

2013-05-24 12:20:04 som

Пробовал. Ничего не изменилось. –

@ UrošPodrekar Я изменил код. Повторите попытку. – som

Пробовал. Теперь я получаю сообщение об ошибке «{« error »:« Пожалуйста, используйте запрос POST »}« при нажатии кнопки «Отправить» на jsFiddle: http://jsfiddle.net/KS3sM/16/ –

Простая проверка ввода и добавление значений в таблицу

ответ

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