Question

HTML：

<div class="tab"><h4>Zip Code</h4>
    <p><input type="text" class="text1" placeholder="Enter zip code..." oninput="this.className = ''" name="zipcode"></p>
  </div>
  <div class="tab"><h4>Question1</h4>
    <p><input type="radio" name="rdb" value="1-3 months"  class="option-input radio" checked/> 1-3 months</p>
    <p><input type="radio" name="rdb" value="4-6 months" class="option-input radio"> 4-6 months</p>
  </div>

  <div class="tab"><h4>Question2</h4>
    <p><input type="radio" name="rdb1" value="Single" class="option-input radio"  checked/> Single</p>
    <p><input type="radio" name="rdb1" value="Condo" class="option-input radio"> condo</p>
    <p><input type="radio" name="rdb1" value="Mobile" class="option-input radio">Mobile</p>
  </div>

  <div class="tab"><h4>Question3</h4>
    <p><input type="radio" name="rdb2" value="Moving" class="option-input radio" checked/> Moving</p>
    <p><input type="radio" name="rdb2" value="100" class="option-input radio"> 100</p>
  </div>

  <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
  <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>

JS

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  var rdb = document.getElementsByName('rdb').value;
  var rdb1 = document.getElementsByName('rdb1').value;
  var rdb2 = document.getElementsByName('rdb2').value;

  for (i = 0; i < y.length; i++) {
    if (y[i].value == "") {
      y[i].className += " invalid";
      valid = false;
    }
  }
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

PHP

$EmailFrom = "test@gmail.com";
$EmailTo = "xyz@gmail.com";
$Subject = "Test";

$zipcode = $_POST['zipcode'];
$rdb_value = trim(stripslashes($_POST['rdb']));
$rdb_value1 = trim(stripslashes($_POST['rdb1']));
$rdb_value2 = trim(stripslashes($_POST['rdb2']));

$Body .= $zipcode;
$Body .= "Question1: ";
$Body .= $rdb_value;
$Body .= "Question2: ";
$Body .= $rdb_value1;
$Body .= "Question3: ";
$Body .= $rdb_value2;

查询如下：我在HTML中使用多个选项卡表单，并使用javascript和PHP将所有值发送到电子邮件。请查看上面的代码。

我收到了这封电子邮件：

邮政编码：问题1：问题2：问题3：

第一部分是HTML代码，第二部分是Javascript，第三部分是Php代码！

Answer 1

//Html 
<form method="post" id="submit">Your html code goes here <input type="button" onclick="onclick()" value="submit"></form>

//javascript
function onclick()
{

$.ajax({type:'POST', url: 'email.php', data:$('#submit').serialize(), success: function(response) {
    alert(response); //success or fail from email.php page
}});

}

//php email.php
echo "<pre>";print_r($_POST); //here u can see all submitted data from html

Answer 2

使用document.querySelector('input[name=rdb]:checked').value;从单选按钮

中获取所选值

function test(){
var rdb = document.querySelector('input[name=rdb]:checked').value;
var rdb1 = document.querySelector('input[name=rdb1]:checked').value;
var rdb2 = document.querySelector('input[name=rdb2]:checked').value;
 console.log(rdb,rdb1,rdb2);
}

.tab{
  width:30%;
  float:left;
}

<form>
<div class="tab"><h4>Question1</h4>
    <p><input type="radio" name="rdb" value="1-3 months"  class="option-input radio" checked/> 1-3 months</p>
    <p><input type="radio" name="rdb" value="4-6 months" class="option-input radio"> 4-6 months</p>
  </div>

  <div class="tab"><h4>Question2</h4>
    <p><input type="radio" name="rdb1" value="Single" class="option-input radio"  checked/> Single</p>
    <p><input type="radio" name="rdb1" value="Condo" class="option-input radio"> condo</p>
    <p><input type="radio" name="rdb1" value="Mobile" class="option-input radio">Mobile</p>
  </div>

  <div class="tab"><h4>Question3</h4>
    <p><input type="radio" name="rdb2" value="Moving" class="option-input radio" checked/> Moving</p>
    <p><input type="radio" name="rdb2" value="100" class="option-input radio"> 100</p>
  </div>

  <div style='clear:both;'>
  <button type="button" onclick="test()">Test</button>
  </div>
  </form>

如何以制表符形式发送多个单选按钮值

2 个答案: