[英]How to send multiple radio button values in tab form
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 代碼!
//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
使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.