if I select No in radio button, it just showing Blank - javascript

There are 4 Yes,No radio buttons and if I choose Yes, it shows the value 'YES'. But, if I chooseNo, it just showing blank. May I know how can I fix it?
<div id='testtwo' style="display:block;">
<label class="control-label col-sm-4" for="pnl">Is the packing properly vacuum sealed? :</label>
<div class="col-sm-4" style="margin-top:19px;">
<p class="form-control-static" style="margin-top: -7px;display: inline-flex;color: darkslategrey;">
<input type="radio" name="pkyes" value="YES">
<label for="pkyes" style="margin-left: 6px; margin-top: 8px;">YES</label><br>
<input type="radio" name="pkyes" value="NO" style="margin-left: 16px;">
<label for="pkno" style="margin-left: 6px; margin-top: 8px;">NO</label><br>
</p>
</div></div>
Below is JavaScript.
var testasd=document.querySelector('input[type=radio][name=pkyes]');
if(testasd.checked == false ){
var pk = '';
}else {
var pk = testasd.value;
}

I believe you have to check for checked. Add :checked in querySelector. Adding solution there:
const testasd = document.querySelector('input[type=radio][name=pkyes]:checked');
const pk = testasd ? testasd.value : '';
console.log(pk)
<div id='testtwo' style="display:block;">
<label class="control-label col-sm-4" for="pnl">Is the packing properly vacuum sealed? :</label>
<div class="col-sm-4" style="margin-top:19px;">
<p class="form-control-static" style="margin-top: -7px;display: inline-flex;color: darkslategrey;">
<input type="radio" name="pkyes" value="YES">
<label for="pkyes" style="margin-left: 6px; margin-top: 8px;">YES</label><br>
<input type="radio" name="pkyes" value="NO" style="margin-left: 16px;" checked>
<label for="pkno" style="margin-left: 6px; margin-top: 8px;">NO</label><br>
</p>
</div></div>

Related

How to get data from a form which is written in inner HTML?

This is my code, here I want to access data from the textfields, how can I access them
This is my javascript function to add new form eevrytime add button is clicked
function elementAppender() {
if (count <= 5) {
let element = document.createElement('div');
element.id = `${count}`
Here, the code from which I have to get data is written in inner html
element.innerHTML = `<div class="col-md-6 mx-auto my-5" id="myDiv">
<div class="kumite-form">
<button type="button" class="close col-md-2" data-dismiss="form" style="color: coral; float: right;" onclick="remdiv(), count-=1">×</button>
<form action="#" class="mx-auto">
<h3 style="text-align: left;margin-left:10%">Group ${count}</h3>
<ul>
<li>
<div class="text-center">
Category:
<input class="" type="radio" name="category" value="female" style="font-size: 0.5px;">
<label>Male</label>
<input class="" type="radio" name="category" value="male" style="font-size: 0.5px;">
<label>Female</label>
</div>
</li>
<h4 style="text-align: left;margin-left:10%">Player 1</h4>
<li><input type="text" placeholder="Player 1 Name"></li>
<input type="text" placeholder="Date of Birth" onfocus="(this.type='date')"
onblur="(this.type='text')">
<li><input type="Number" placeholder="Weight (in kg)"></li>
The "value" property in JS comes in handy.
var myInput = document.querySelector("#idOfField").value

on selecting radio button, div is not displaying in html

i have created a radio button such that when user click any button some content is displayed in a div.
i have done the following code for it:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.cheque {
background: #ff0000;
}
.bank {
background: #228B22;
}
.cash {
background: #0000ff;
}
<div style="margin-top: 1%;" class="row">
<div class="col-md-12">
<div style="background-color: #f5f5f5; border-radius: 10px;" class="col-md-12 border-1px">
<div class="payment-method">
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="bank">
Direct Bank Transfer </label>
</div>
</div>
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="cheque">
Cheque Payment </label>
<p></p>
</div>
</div>
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="cash" checked="">
Pay In Cash </label>
</div>
</div>
</div>
<div class="bank box">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</strong> so i am here</div>
<div class="cheque box">Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</div>
<div class="cash box">Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</div>
</div>
</div>
</div>
i have tried adding
> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
but no use
but when i select any radio button nothing is happening. can anyone please tell me what is wrong in my code. thanks in advance
Your are only missing the default show for the cash the rest is working fine.
$(document).ready(function() {
$(".cash").show();
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.cheque {
background: #ff0000;
}
.bank {
background: #228B22;
}
.cash {
background: #0000ff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="margin-top: 1%;" class="row">
<div class="col-md-12">
<div style="background-color: #f5f5f5; border-radius: 10px;" class="col-md-12 border-1px">
<div class="payment-method">
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="bank">
Direct Bank Transfer </label>
</div>
</div>
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="cheque">
Cheque Payment </label>
<p></p>
</div>
</div>
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="cash" checked="">
Pay In Cash </label>
</div>
</div>
</div>
<div class="bank box">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</strong> so i am here</div>
<div class="cheque box">Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</div>
<div class="cash box">Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</div>
</div>
</div>
</div>

When radio button checked div hide/show text field works but does not insert in database

I write code using jQuery for radio button. I hide/show textbox when radio button checked, it works but it does not inserty the value in database for Artwork.
$Order_date = mysqli_real_escape_string($conn,$_POST['Order_date']);
$Confirm_Design_Date = mysqli_real_escape_string($conn,$_POST['Confirm_Design_Date']);
$Due_Date = mysqli_real_escape_string($conn,$_POST['Due_Date']);
$Name = mysqli_real_escape_string($conn,$_POST['Name']);
$Type_of_Customer = mysqli_real_escape_string($conn,$_POST['Type_of_Customer']);
$phone = mysqli_real_escape_string($conn,$_POST['phone']);
$Email = mysqli_real_escape_string($conn,$_POST['Email']);
$pic = mysqli_real_escape_string($conn,$_POST['pic']);
$design = mysqli_real_escape_string($conn,$_POST['design']);
$Output = mysqli_real_escape_string($conn,$_POST['Output']);
$Finishing = mysqli_real_escape_string($conn,$_POST['Finishing']);
$Submit_date = mysqli_real_escape_string($conn,$_POST['Submit_date']);
$Product = mysqli_real_escape_string($conn,$_POST['Product']);
$Size = mysqli_real_escape_string($conn,$_POST['Size']);
$Material_implode = implode(" , ",$_POST['Material']);
$Material = mysqli_real_escape_string($conn,$Material_implode);
$Type_finishing = mysqli_real_escape_string($conn,$_POST['Type_finishing']);
$Kuantiti = mysqli_real_escape_string($conn,$_POST['Kuantiti']);
$Artwork = mysqli_real_escape_string($conn,$_POST['Artwork']);
$Pengantin_P = mysqli_real_escape_string($conn,$_POST['Pengantin_P']);
$Pengantin_L = mysqli_real_escape_string($conn,$_POST['Pengantin_L']);
$Jum_Hantaran = mysqli_real_escape_string($conn,$_POST['Jum_Hantaran']);
$Bank_pilihan = mysqli_real_escape_string($conn,$_POST['Bank_pilihan']);
$Nama_singkatan = mysqli_real_escape_string($conn,$_POST['Nama_singkatan']);
$Tarikh_akad_nikah = mysqli_real_escape_string($conn,$_POST['Tarikh_akad_nikah']);
$total = mysqli_real_escape_string($conn,$_POST['total']);
$Deposit = mysqli_real_escape_string($conn,$_POST['Deposit']);
$Balance = mysqli_real_escape_string($conn,$_POST['Balance']);
$Receipt_no = mysqli_real_escape_string($conn,$_POST['Receipt_no']);
$sql = "INSERT INTO mockup_check (Order_date, Confirm_Design_Date, Due_Date, Name, Type_of_Customer, phone, Email, pic, design, Output, Finishing, Submit_date, Product, Size, Material, Type_finishing,
Kuantiti, Artwork, Pengantin_P, Pengantin_L, Jum_Hantaran, Bank_pilihan, Nama_singkatan, Tarikh_akad_nikah, total, Deposit, Balance, Receipt_no)
VALUES
('$Order_date','$Confirm_Design_Date','$Due_Date','$Name','$Type_of_Customer','$phone','$Email','$pic','$design','$Output','$Finishing','$Submit_date','$Product','$Size','$Material','$Type_finishing','$Kuantiti','$Artwork','$Pengantin_P','$Pengantin_L','$Jum_Hantaran','$Bank_pilihan','$Nama_singkatan','$Tarikh_akad_nikah','$total','$Deposit','$Balance','$Receipt_no')";
$result = mysqli_query($conn,$sql);
}
html code and php script. form success isset but database for Artwork
not inserted
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("input[name='Artwork']").click(function(){
var value = $('input[name=Artwork]:checked').val();
if(value === 'Other'){
$('#div_ifOther').show();
}
else if(value !== 'Other'){
$('#div_ifOther').hide();
}
});
});
</script>
<div id="div_id_select" class="form-group required">
<label for="id_Artwork" class="control-label col-md-4 requiredField"> Artwork :<span class="asteriskField">*</span> </label>
<div class="controls col-md-9 " style="margin-bottom: 10px">
<label class="radio-inline"><input type="radio" checked="checked" name="Artwork" id="ifUsb" value="Usb" style="margin-bottom: 10px">Usb</label>
<label class="radio-inline"> <input type="radio" name="Artwork" id="ifEmail" value="Email" style="margin-bottom: 10px">Email </label>
<label class="radio-inline"> <input type="radio" id="ifOther" name ="Artwork" value="Other" style="margin-bottom: 10px">Other</label>
</div>
<div id="div_ifOther" class="controls col-md-8 " style="display:none;">
<input class="input-md textinput textInput form-control" maxlength="30" name="Artwork" placeholder="Other" style="margin-bottom: 10px" type="text" />
</div>
Change input's name attribute and it should work.
As the radio buttons and the input name attribute is Artwork. the form is taking the last one, thus only the input's value is sent.
<div id="div_id_select" class="form-group required">
<label for="id_Artwork" class="control-label col-md-4 requiredField"> Artwork :<span class="asteriskField">*</span> </label>
<div class="controls col-md-9 " style="margin-bottom: 10px">
<label class="radio-inline"><input type="radio" checked="checked" name="Artwork" id="ifUsb" value="Usb" style="margin-bottom: 10px">Usb</label>
<label class="radio-inline"> <input type="radio" name="Artwork" id="ifEmail" value="Email" style="margin-bottom: 10px">Email </label>
<label class="radio-inline"> <input type="radio" id="ifOther" name ="Artwork" value="Other" style="margin-bottom: 10px">Other</label>
</div>
<div id="div_ifOther" class="controls col-md-8 " style="display:none;">
<input class="input-md textinput textInput form-control" maxlength="30" name="artwork_text" placeholder="Other" style="margin-bottom: 10px" type="text" />
</div>

text is beneath other text instead of next to it, though I haven't used any weird code

I made a quiz and the plan is when you click submit there is going to be some text next to the answers with some more information. But now, when I click on submit the information is displayed beneath the answers instead of next to it.
You can see the problem in question 2 answer 1 after submitting.
demo: https://plnkr.co/edit/OvcwBzfFte4A0F0NbNSi?p=preview
What can be the problem ?
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
margin-top: 7%;
text-align: center;
position: relative;
}
.quizstyle {
padding-right: 50%;
}
.row {
text-align: left;
margin-left: 10%;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="quizstyle">
<h3>Moths are a member of what order?</h3>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon</div>
<div> </div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy</div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera</div>
<h3>Question 2</h3>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1</div> <span id="demo"></span>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3</div>
<h3>Question 3</h3>
<div class="row">
<input name="con" type="radio" value="0" />Answer 1</div>
<div class="row">
<input name="con" type="radio" value="33" />Answer 2</div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 3</div>
</div>
<input type="submit" onclick="myFunction()" value="Submit" />
</form>Your grade is: <span id="grade">__</span>
<p id="grade2"></p>
</div>
<!-- close main div -->
<span>fdf</span> <span>fdf</span><span>fdf</span>
fd
<script>
document.getElementById("form1").onsubmit = function(e) {
e.preventDefault();
variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
con = parseInt(document.querySelector('input[name = "con"]:checked').value);
result = variable + sub + con;
document.getElementById("grade").innerHTML = result;
var result2 = "";
if (result == 0) {
result2 = "I don't think you studied."
};
if (result == 33) {
result2 = "You need to spend more time. Try again."
};
if (result == 66) {
result2 = "I think you could do better. Try again."
};
if (result == 99) {
result2 = "Excellent!"
};
document.getElementById("grade2").innerHTML = result2;
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
hgf
<div> </div>
With these couple of changes, the text "Hello World" was getting displayed next to the answer.
Adding a css for the "demo" span tag to stay inline.
span#demo {
display: inline;
}
/* A small bonus */
.quizstyle {
padding-right: 20%;
}
Moving it inside your "row" div tag.
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1
<span id="demo"></span>
</div>
Ofcourse, you'll have to work out the other detailing (like adding sufficient margin between your row div and demo span, providing enough width for the span to be shown on same line, reducing it's size, giving it some color, etc.), but this kind of achieves what your original requirement was.
Just add float: right; for span#demo element

how can i call each value in one function?

when i calculate each price the problem is insert both.
I just want each price for pickup and delivery
Javascript
function refreshprices() {
var pickup_td = getDistanceFromLatLonInKm(origin_lat,origin_lng,pickup_lat,pickup_lng);
var pickup_cost = calculatePrice(base_cost, base_dist, additional_cost, additional_dist, pickup_td);
var pickup_output = document.getElementById('pickup_price');
pickup_output.innerHTML = " $ " + pickup_cost;
var delivery_td=getDistanceFromLatLonInKm(origin_lat,origin_lng,delivery_lat,delivery_lng);
var delivery_cost=calculatePrice(base_cost, base_dist, additional_cost, additional_dist, delivery_td);
var delivery_output = document.getElementById('delivery_price');
delivery_output.innerHTML = " $ " + delivery_cost;
}
HTML
<form action="#" method="post">
<div id="pickup_option_calculate_price">
<div class="row-fluid">
<div class="span12" >
<h2>Pickup Option</h2>
<label class="radio">
<div class="option-title"><input type="radio" name="pickup" value="no_pickup" id="type_0" checked>No pickup required</div>
</label>
<div class="option-desc">You must drop off your passports and supporting documents at our office.</div>
<label class="radio">
<div class="option-title"><input type="radio" name="pickup" value="pickup" id="type_1">Pickup required ( <span id="pickup_price"> Enter Address to calculate Price </span>)</div>
</label>
<div class="option-desc">We will pickup the passports and supporting documents from your home or office.</div>
</div>
</div>
<div id="pickup_location">
<div class="row-fluid">
<input type="text" name="address" class="span10">
<input type="button" name="search" class="span2" value="Calculate Price" class="btn">
</div>
<div class="row-fluid">
<div class="span12">
<div id="coords" style="margin-top: 10px;"></div>
<div id="gmap" style="height:200px;position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
</div>
</div>
</div>
</div>
<div id="delivery_option_calculate_price">
<div class="row-fluid">
<div class="span12" >
<h2>delivery Option</h2>
<label class="radio">
<div class="option-title"><input type="radio" name="delivery" value="no_delivery" id="type_0" checked>No delivery required</div>
</label>
<div class="option-desc">You must drop off your passports and supporting documents at our office.</div>
<label class="radio">
<div class="option-title"><input type="radio" name="delivery" value="delivery" id="type_1">delivery required ( <span id="delivery_price"> Enter Address to calculate Price </span>)</div>
</label>
<div class="option-desc">We will delivery the passports and supporting documents from your home or office.</div>
</div>
</div>
<div id="delivery_location">
<div class="row-fluid">
<input type="text" name="delivery_address" class="span10">
<input type="button" name="delivery_search" class="span2" value="Calculate Price" class="btn">
</div>
<div class="row-fluid">
<div class="span12">
<div id="coords" style="margin-top: 10px;"></div>
<div id="gmap" style="height:200px;position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
</div>
</div>
</div>
</div>
</form>
when i calculate each price the problem is insert both.
I just want each price for pickup and delivery
Image is below.
Ok.Now i found it all my brother.
refreshprices();
pickup_output = document.getElementById('pickup_price');
pickup_output.innerHTML = " $ " + pickup_cost;
refreshprices();
var delivery_output = document.getElementById('delivery_price');
delivery_output.innerHTML = " $ " + delivery_cost;
function refreshprices() {
var pickup_td = getDistanceFromLatLonInKm(origin_lat,origin_lng,pickup_lat,pickup_lng);
pickup_cost = calculatePrice(base_cost, base_dist, additional_cost, additional_dist, pickup_td);
var delivery_td=getDistanceFromLatLonInKm(origin_lat,origin_lng,delivery_lat,delivery_lng);
delivery_cost=calculatePrice(base_cost, base_dist, additional_cost, additional_dist, delivery_td);
}

Categories