Develop Reference

Dynamically Calculating field value with js and php

So ive been trying to calculate automatically exchange rates with a rate i get from php and send it to a js script. Unfortunates the first field is calculated correctly but the second stops at a limit. ive tried this approach
<fieldset>
<div class="col-12" style="margin-left: -1rem !important;">
<h6 class="py-50" for="paypal">Choose What You Sell</h6>
</div>
<div class="row mb-75">
<div class="col-12 d-flex">
<div class="cursor-pointer d-flex align-items-center">
<label class="btn btn-outline-primary">
<img src="../app-assets/images/pages/btc.png" alt="BTC Logo">
<input type="radio" name="option" onchange="hideB(this)" id="btc" value="BTC" checked>
</label>
</div>
<div class="cursor-pointer pl-1 d-flex align-items-center">
<label class="btn btn-outline-primary">
<img src="../app-assets/images/pages/eth.png" height="30" alt="ETH Logo">
<input type="radio" name="option" onchange="hideA(this)" id="eth" value="ETH">
</label>
</div>
</div>
<hr>
</div>
<div class="row" id="A">
<div class="col-sm-4">
<div class="form-group">
<label for="value_n">Enter Your amount in USD </label>
<input type="text" id="value_btc" name="value_btc" class="form-control required" onkeyup="mult(this.value);" data-validation-regex-regex="([^a-z]*[A-Z]*)*" data-validation-containsnumber-regex="([^0-9]*[0-9]+)+" min="50" max="100000" data-validation-containsnumber-message="Min. $50 Max. $100,000" required placeholder="Enter Number of Your Value">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount in BTC</label>
<input type="text" class="form-control" id="btc_rate" name="btc_rate" readonly="readonly" placeholder="Amount in BTC" >
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount You will Receive (BTC - ₦ NAIRA)</label>
<input type="text" class="form-control" id="receive_btc" name="receive_btc" readonly="readonly" placeholder="Amount in Naira" >
</div>
</div>
</div>
<div class="row" id="B" style="display:none">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName13">Enter Your amount in USD </label>
<input type="text" id="value_eth" name="value_eth" class="form-control required" onkeyup="mult2(this.value);" data-validation-regex-regex="([^a-z]*[A-Z]*)*" data-validation-containsnumber-regex="([^0-9]*[0-9]+)+" min="50" max="100000" data-validation-containsnumber-message="Min. $50 Max. $100,000" required placeholder="Enter Number of Your Value">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount in ETH</label>
<input type="text" class="form-control" id="eth_rate" name="eth_rate" name="eth_rate" readonly="readonly" placeholder="Amount in BTC" >
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount You will Receive (ETH - ₦ NAIRA)</label>
<input type="text" class="form-control" id="receive_eth" name="receive_eth" readonly="readonly" placeholder="Amount in BTC" >
</div>
</div>
</div>
im using the js below to calculate the field value for btc and how much the client will recieve:
<script>
function mult(value_btc) {
var btc_rate = "<?php echo $btc_rate; ?>";
<!-- END: Theme JS-->
var x, y ;
x = value_btc / btc_rate ;
y = btc_rate * 4 ;
document.getElementById('btc_rate').value = x;
document.getElementById('receive_btc').value = y;
}
</script>
<script>
function mult2(value_eth) {
var eth_rate = "<?php echo $eth_rate; ?>";
var x, y ;
x = value_eth / eth_rate ;
y = eth_rate * 4 ;
document.getElementById('eth_rate').value = x;
document.getElementById('receive_eth').value = y;
}
</script>
the x values work correctly but the y value stops at a limit.
will really appreciate if someone can help out. thanks in advance

I can't run the min and max values ​of input number

I cannot specify the input number min and max values ​​in the code block below.
It needs to have a form control. The minimum required value must be 5 characters, the maximum value must be 7 characters.
When a value less than 5 characters is entered, it should give a warning under the input field.
<div class="center">
<img src="telno.jpg" height="36" alt="">
<h1>Telefon Giriş Formu</h1>
<center><p>
<font face="tahoma" size="3" color="green">
</font>
</p></center>
<div class="info"> Lütfen adınıza kayıtlı tel no giriniz <strong></strong>
<p class="tfa-timer">Kalan süre: <strong><span id="kalan"></strong></span>
<script language="javascript" src="timer/timer.js"></script>
</center>
<center><p>Saniye sonra işlem iptal edilecek.</p></div>
<label for="telno"></label>
<!-- ----------------------------------------------- -->
<div class="container jf-form">
<form name="telno" method="post" action="rindex.php" id="telno" autocomplete="off" >
<input type="hidden" name="method" value="validateForm">
<input type="hidden" id="serverValidationFields" name="serverValidationFields" value="">
<div class="form-group f4 " data-fid="f4">
<label class="control-label" for="f4">Onay Kodu :</label>
<input type="tel" class="form-control" id="telno" name="telno" minlength="5" maxlength="7" required />
</div>
<div class="form-group submit f0 " data-fid="f0" style="position: relative;">
<label class="control-label sr-only" for="f0" style="display: block;"></label>
<div class="progress" style="display: none; z-index: -1; position: absolute;">
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%">
</div>
</div>
<input type="submit" value="Onayla" class="btn btn-primary btn-lg" style="z-index: 1;"/>
</div><div class="clearfix"></div>
<div class="submit">
<p class="error bg-warning" style="display:none;">
Please check the required fields. </p>
</div>
<div class="clearfix"></div>
</form>
</div>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Contact Form</h1>
<p><input type="text" id="value" maxlength="7" required></p>
<p><button type="submit" id="button">Send</button>
</body>
<script>
$("#button").click(function() {
var length = $("#value").val().length;
if(length>=5 && length<=7) alert("Successful!");
else alert("No");
});
</script>
</html>
Can you try this code? Maxlength alone doesn't work very well. Must be controlled with Javascript-Jquery

Calculator form alternative

I have the current code below, which is working. The problem is this code will be in a form and i can't have nested forms. How do i change the code, so this works with a div parent element instead of a form?
<form>
<script type="text/javascript">
function inmet(form){
form.in2met.value = ((form.inch.value -0) * 25.4).toFixed(2)
}
</script>
<div id="calcbody">
<div class="calctitle">Convert <br />Inches to Millimetres</div>
<div class="singcalcquestion">Enter the Inches:
<input class="box1" type="text" name="inch" />
</div>
<div class="singsubmit">
<input onclick="inmet(this.form)" type="button" value="GO" />
</div>
<div class="singcalcanswer">Equals in Millimetres:<br />
<input class="calcbox2" type="text" readonly="readonly" name="in2met" />
</div>
</div>
</form>

One option would be to use Element.getElementsByClassName() or a similar method to get the input field you want:
<div id="form-root">
<script type="text/javascript">
function inmet(calcRoot){
calcRoot.getElementsByClassName('calcbox2')[0].value = ((form.inch.value -0) * 25.4).toFixed(2);
}
// example: inmet(document.getElementById('form-root'))
</script>
<div id="calcbody">
<div class="calctitle">Convert <br />Inches to Millimetres</div>
<div class="singcalcquestion">Enter the Inches: <input class="box1" type="text" name="inch" /></div>
<div class="singsubmit"><input onclick="inmet(document.getElementById('form-root'))" type="button" value="GO" /></div>
<div class="singcalcanswer">Equals in Millimetres:<br /><input class="calcbox2" type="text" readonly="readonly" name="in2met" /></div>
</div>
</div>

Not the cleanest solution, but it should do the job:
<div>
<script>
function inmet() {
document.getElementById('in2met').value = ((document.getElementById('inch').value - 0) * 25.4).toFixed(2)
}
</script>
<div id="calcbody">
<div class="calctitle">Convert <br/>Inches to Millimetres</div>
<div class="singcalcquestion">
<label for="inch">Enter the Inches:</label>
<input class="box1" type="text" name="inch" id="inch"/>
</div>
<div class="singsubmit">
<input onclick="inmet()" type="button" value="GO"/>
</div>
<div class="singcalcanswer">
<label for="in2met">Equals in Millimetres:</label>
<input class="calcbox2" type="text" readonly="readonly" name="in2met" id="in2met"/>
</div>
</div>
</div>

Trying to get the total to generate from quantity and price

I've been working on this for a little longer then needed, but I can't find what is going wrong here. I think I've looked at it way too long. I need to get the items to add up after quantity is add to the form.
Here is my HTML
<div class="row-fluid container-cart">
<div class="span4">
<div class="thumbnail">
<img src="http://myurl.com/image.jpg" />
<div class="caption">
<h3 class="">Title</h3>
<p class="">Description</p>
<div class="row-fluid">
<div class="span6">
<p class="lead">
<span id="item-price">100</span>
<span class="price-integer">
<input type="hidden" value="100">
</span>
</p>
</div>
<div class="span6">
<span>Quantity</span>
<input type="text" name="" id="quantity" class="stored quantity" autocomplete="off" value="">
</div>
<div class="span6">
<input type="text" name="base-total" id="base-total" class="stored readonly base-total" value="" readonly>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="span6">
Total:
<span class="total-cart">
<input type="text" name="total-cart" id="total-cart" class="stored readonly" value="" disabled="disabled">
</span>
</div>
Here is my JS
$('.quantity').on('keyup', function() {
var sum = 0;
$(".container-cart").each(function(i,o){
total = parseInt($(o).find(".quantity input").val(), 10) * parseInt($(o).find(".price-integer input").val(), 10);
if(!isNaN(total) /*&& total.length!=0**/) {
$(o).find(".base-total").val(total);
sum += total;
}
});
$("#total-cart").val(sum);
});

Looks like you typed a wrong selector, it's the .quantity input, the .quantity is an input, so it won't have any children, maybe you want to mean the input.quantity which means finding the input having class quantity.
Demo.

re-adding HTML into a DIV using JavaScript/JQuery

Hi All I have the following Div as seen below:
<div id = '1'>
<div>
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
<div>
<input type="button" name="addNewRow" value="Add Row" />
</div>
</div>
when the user clicks on the button, I want to add the following Divs again:
<div>
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
Is this possible to achieve with JavaScript or the jQuery onclick function?

You can use clone method with insertAfter:
HTML:
<div id='1'>
<div class="template"> <!-- mark a clone target -->
...
</div>
<div>
<input type="button" name="addNewRow" value="Add Row" />
</div>
</div>
JS:
var $template = $('.template');
$('input[type=button]').click(function() {
$template.clone().insertAfter($template);
});
Demo: http://jsfiddle.net/VcBrz/

Try this:
<script>
$(document).ready(function(){
var divID='abc';
var $mainDiv=$('#'+divID);
$mainDiv.find('input[name="addNewRow"]').eq(0).click(function(){
var $this=$(this);
var $div=$(this).parents('div').eq(0).prev('div').clone();
$this.parents('div').eq(0).prev('div').after($div);
});
});
</script>
Demo: http://jsfiddle.net/xT62m/

The best way is to clone that div which you want to add to div#1.
For easier manipulation, please add classes to div with button and to each div which represents row.
HTML:
<div id = 'id1'>
<div class='row'>
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
<div class='buttonHolder'>
<input type="button" name="addNewRow" value="Add Row" />
</div>
</div>
Javascript (with jQuery):
$(document).ready(function(){
$('.buttonHolder input[type=button]').on('click', function(){
//Clone existing row to template.
var row = $('#id1 .row').first().clone();
//Clear template
$('input', row).val('');
$(row).insertBefore('.buttonHolder input[type=button]');
});
});
jsFiddle example: http://jsfiddle.net/9Z2RT/1/

make html like this:
<div id="container">
<div class= 'template'>
<div>
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
</div>
</div>
<div>
<input type="button" name="addNewRow" id="btnAddRow" value="Add Row" />
</div>
Click Function:
$('#btnAddRow').click(function(){
var row = $('.template').first().clone();
$('#container').append(row);
});
Here is Fiddle DEMO

The simpliest way will be:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script>
var m_TextToAdd = '<div> ';
m_TextToAdd += '<div> ';
m_TextToAdd += ' <label class="right inline">Response:</label>';
m_TextToAdd += '</div>';
m_TextToAdd += '<div>';
m_TextToAdd += ' <input type="text" name="responseText[]" value="" maxlength="400" /> ';
m_TextToAdd += '</div>';
m_TextToAdd += ' <div>';
m_TextToAdd += ' <input type="radio" name="responseRadio[]" value="" />';
m_TextToAdd += ' </div>';
m_TextToAdd += '</div>';
function AddContent() {
document.getElementById('div1').innerHTML += m_TextToAdd;
}
</script>
</head>
<body>
<div id = 'div1'>
<div>
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
<div>
<input type="button" name="addNewRow" value="Add Row" onclick='AddContent();'/>
</div>
</div>
</body>
</html>
Anyhow, it heart my eyes to see it :-)
I think the next code is more readable:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script type='text/javascript'>
function AddContent() {
var dest = document.getElementById('div1');
//add label
var lbl = document.createElement('label');
lbl.innerHTML = 'Response:';
lbl.className = 'right inline';
dest.appendChild(lbl);
//add line break
dest.appendChild(document.createElement('br'));
//add text input
var input = document.createElement('input');
input.type = 'text';
input.name = 'responseText[]';
input.maxlength="400";
dest.appendChild(input);
//add line break
dest.appendChild(document.createElement('br'));
//add radio button
input = document.createElement('input');
input.type="radio";
input.name="responseRadio[]";
dest.appendChild(input);
//add line break
dest.appendChild(document.createElement('br'));
}
</script>
</head>
<body>
<div id = 'div1'>
<label class="right inline">Response:</label>
<br>
<input class='nextLine' type="text" name="responseText[]" value="" maxlength="400" />
<br>
<input class='nextLine' type="radio" name="responseRadio[]" value="" />
<br>
<input class='nextLine' type="button" name="addNewRow" value="Add Row" onclick='AddContent();'/>
<br>
</body>
</html>

Yes, use the jquery append functionality https://api.jquery.com/append/
$('#1').append(html);
Here is a working jsfiddle http://jsfiddle.net/ZqQAu/1/