DOM Javascript

<script type="text/javascript">
function HIT(nom){

var tagihan=document.getElementById("nominal").value;
var total=parseInt(tagihan)+parseInt(nom);

document.getElementById("total").value = String(total);
}
</script>





<p class="d-flex total-price">

<input OnClick="HIT('20000')"
name="ongkoskirim" type="radio" id="ongkoskirim" checked="checked" value="JABODETABEK" <?php if($ongkoskirim=="JABODETABEK") {echo"checked"; } ?> />&nbsp;&nbsp; JABODETABEK&nbsp; &nbsp; <br> Rp. 20.000.00 


<input OnClick="HIT('30000')" name="ongkoskirim" type="radio" id="ongkoskirim" value="NON JABODETABEK" <?php if($ongkoskirim=="NON JABODETABEK") {echo"cheked"; } ?> />&nbsp;&nbsp; NON JABODETABEK<br>  Rp. 30.000.00
   
</p>


   <div class="w-100"></div>
            <div class="col-md-12">
            <div class="form-group">
                <label for="towncity">Nominal</label>
                  <input type="number" disabled class="form-control" id="nominal" name="nominal" value="<?php echo ($tot); ?>"  placeholder="Nominal" title="Jumlah Nominal Transfer">
                </div>
           </div>
 
    <div class="w-100"></div>
            <div class="col-md-12">
            <div class="form-group">
                <label for="towncity">Jumlah Transfer + Ongkir</label>
                  <input type="number" readonly class="form-control" name="tagihan" value="<?php echo ($tagihan); ?>"  placeholder="Total  Transfer" id="total" title="Total Transfer">
                </div>
           </div>
 
++++++++++++++++++++++++



<form>
  Select your favorite browser:
  <select id="myList" onchange="myFunction()">
    <option></option>
    <option>Google Chrome</option>
    <option>Firefox</option> 
    <option>Internet Explorer</option>
    <option>Safari</option>
    <option>Opera</option>
  </select>
<p>Your favorite browser is: <input type="text" id="demo" size="20"></p>
</form>

<script>
function myFunction() {
  var mylist = document.getElementById("myList");
  document.getElementById("demo").value = mylist.options[mylist.selectedIndex].text;
}
</script>

++++++++++++++++++++

<a class="anchors" id="myAnchor" href="https://www.w3schools.com/html/">HTML</a>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>

function myFunction() {

  var x = document.getElementsByClassName("anchors")[0].id;

  document.getElementById("demo").innerHTML = x;

}

</script>

Isi dari BTN saat di click=myAnchor

+++++++++++++++++++++++++++++++++++++++

<form>

  Select numbers:<br>

  <select id="no">

    <option>0</option>

    <option>1</option>

    <option>2</option>

    <option>3</option>

    <option>4</option>

    <option>5</option>

    <option>6</option>

    <option>7</option>

    <option>8</option>

    <option>9</option>

  </select>

  <input type="button" onclick="myFunction()" value="-->"> 

  <input type="text" id="result" size="20">

</form>

<script>

function myFunction() {

  var no = document.getElementById("no");

  var option = no.options[no.selectedIndex].text;

  var txt = document.getElementById("result").value;

  txt = txt + option;

  document.getElementById("result").value = txt;

}

</script>

+++++++++++++++++++++

Name: <input type="text" id="myText" value="Mickey">

<button type="button" onclick="myFunction()">Try it</button>

  

<p id="demo"></p>

<script>

function myFunction() {

  var x = document.getElementById("myText");

  var defaultVal = x.defaultValue;

  var currentVal = x.value;

  

  if (defaultVal == currentVal) {

    document.getElementById("demo").innerHTML = "Default value and current value is the same: "

    + x.defaultValue + " and " + x.value

    + "<br>Change the value of the text field to see the difference!";

  } 

else {

    document.getElementById("demo").innerHTML = "The default value was: " + defaultVal

    + "<br>The new, current value is: " + currentVal;

  }

}

</script>

++++++++++++++++

<form action="/action_page.php" onsubmit="return myFunction()">

  Name (max 10 characters): <input type="text" id="fname" size="20" name="fname"><br>

  Age (from 1 to 100): <input type="text" id="age" size="20" name="age"><br>

  E-mail: <input type="text" id="email" size="20" name="mail"><br><br>

  <input type="submit" value="Submit"> 

</form>

<script>

function myFunction() {

  var at = document.getElementById("email").value.indexOf("@");

  var age = document.getElementById("age").value;

  var fname = document.getElementById("fname").value;

  submitOK = "true";

  if (fname.length > 10) {

    alert("The name may have no more than 10 characters");

    submitOK = "false";

  } 

  if (isNaN(age) || age < 1 || age > 100) {

    alert("The age must be a number between 1 and 100");

    submitOK = "false";

  }

  if (at == -1) {

    alert("Not a valid e-mail!");

    submitOK = "false";

  }

  if (submitOK == "false") {

    return false;

  }

}

</script>