Question

我对网络开发很陌生，所以请耐心等待。我知道在CSS页面的帮助下，在HTML页面中创建提交按钮时如何执行此操作。但是你可以将CSS应用于javascript块吗？我想在javascript中声明Submit按钮的原因是因为最终我希望提交按钮将选择发送到SQL数据库，我认为在javascript而不是HTML中这样做要容易得多。请告诉我，我是否完全走错了路。

＆＃13;

function myFunction() {
  var x = document.getElementById("myRadio");
  x.checked = true;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta content="en-us" http-equiv="Content-Language" />
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>webpage</title>


  <script type="text/javascript" src="script.js">
  </script>

</head>

<body>


  Radio Button:
  <input type="radio" id="myRadio">
  <input type="radio" id="myRadio2">
  <input type="radio" id="myRadio3">
  <button onclick="myFunction()">Submit</button>

</body>

</html>

＆＃13;

Answer 1

以下是HTML表单的基本概念，它将发布所选单选按钮的值。您可以通过查看Firebug等开发工具来查看POST。

<body>
  <form method="POST" action="mypostpage.php">
    <input name="myRadio" type="radio" value="1"> Choice 1
    <input name="myRadio" type="radio" value="2"> Choice 2
    <input name="myRadio" type="radio" value="3"> Choice 3
    <input type="submit" value="Submit">
  </form>
</body>

如果你想在JavaScript / JQuery中生成单选按钮，这是一个通用模式：

JSFiddle

JQuery的：

//see what value is selected
$('#myForm').on('change', function() {
   var selectedRadio =$('input[name="myRadio"]:checked', '#myForm').val()
   console.log(selectedRadio);
});

//add more radios
$('#addRadio').on('click', function() {
   var lastRadioVal = parseInt($('input[name="myRadio"]:last', '#myForm').val());
   for (i = lastRadioVal + 1; i <= lastRadioVal + 5; i++) {
      $('#myForm').append('<input type="radio" name="myRadio" value="' + i + '"> Choice ' + i );
   }
});

HTML：

<form id="myForm" method="POST" action="mypostpage.php">
   <input name="myRadio" type="radio" value="1"> Choice 1
   <input name="myRadio" type="radio" value="2"> Choice 2
   <input name="myRadio" type="radio" value="3"> Choice 3
   <input type="submit" value="Submit">
</form>
<input type="button" id="addRadio" value="Add Radio">

<强>已更新

（JSFiddle链接保持与上面相同）

HTML

<form id="myForm" method="POST" action="mypostpage.php">
<input name="myRadio" type="radio" value="1"> Choice 1
<input name="myRadio" type="radio" value="2"> Choice 2
<input name="myRadio" type="radio" value="3"> Choice 3
<input id="myButton" type="button" value="Submit">

JQuery的

//see what value is selected
$('#myForm').on('change', function() {
   var selectedRadio =$('input[name="myRadio"]:checked', '#myForm').val()
   console.log(selectedRadio);
});
//add more radios
$('#addRadio').on('click', function() {
   var lastRadioVal = parseInt($('input[name="myRadio"]:last', '#myForm').val());
   for (i = lastRadioVal + 1; i <= lastRadioVal + 5; i++) {
     $('#myForm').append('<input type="radio" name="myRadio" value="' + i + '"> Choice ' + i );
   }

  //change button style
  if($(this).hasClass("warning")) {
       $(this).removeClass("warning");
       $(this).addClass("error");
       $(this).val("Error!");
   } else {
      $(this).addClass("warning");
      $(this).val("Warning!");
   }
});
//change the button styling
$('#myButton').on('click', function() {
   $(this).addClass("validated"); 
   //you'll need to submit the form since the button is just a button and not a submit button.  i've commented it out below because this is just an example
   //$('#myForm').submit();
});

CSS

.validated {
  background: green;
}

.warning {
  background: yellow;
}

.error {
  background: red;
}

你如何在javascript中更改按钮的外观？

1 个答案: