MySQL & PHP References: input

Showing posts with label input. Show all posts

Sunday, July 12, 2020

Adding multiple input elements dynamically to a form

Simple Way to Add multiple input elements or formset to a html form when you need extra multiple formsets.

<div class="container1">
    <button class="add_form_field">Add New Field   
      <span style="font-size:16px; font-weight:bold;">+ </span>

</button>
    <div class="xset"><table id="tbl4"><tr><td width="50%"><label>Type of Game Edition</label><input type="text" id="game_editions" name="game_editions[]"></td><td  width="50%" rowspan="3"><label>Edition Description</label>>textarea id="edition_desc" name="edition_desc[]" placeholder="Type in Editions description of the Game">>/textarea></td></tr><tr><td><label>Edition Image Link</label><input  type="text" id="edition_img" name="edition_img[]"></td></tr><tr><td><a href="#" class="delete">Delete</a></td></tr></table></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    var max_fields = 10;
    var wrapper = $(".container1");
    var add_button = $(".add_form_field");

$(wrapper).on("click", ".delete", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});
</script>

Monday, April 24, 2017

Calculate Total Multiple Checkbox and Input Javascript

Very Simple...


<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

function totalIt() {
  var input = document.getElementsByName("product");
  var ifare = document.getElementById('ifare').value;
  //document.getElementById("tfare").value = "$" + ifare.toFixed(2);
  
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      
   
   total += parseFloat(input[i].value);
  
  var tfare = (parseFloat(ifare) + parseFloat(total));
  document.getElementById("tfare").value = "$" + tfare.toFixed(2);
  //alert('ifare : $ ' + tfare);
  
 }
  }
  
  
  document.getElementById("total").value = "$" + total.toFixed(2);
  
  var tfare = ifare + document.getElementById("total").value;
  
  
}
</script>
</head>
<body>
<form action="" id="theForm">
Based Fare : <input type="text" name="ifare" id="ifare" value="142.18" /><br>
        <fieldset>
            <legend>
               Fare Details
            </legend>
            <label>
                <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/>
                Toddler Seats $12.95
            </label>
            <label>
                <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/>
                Airport Toll $5.99
            </label>
            <label>
                <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/>
                Tax $1.99
            </label>
   <label>
                <input name="product" value="19.99" type="checkbox" id="p4" onclick="totalIt()"/>
                Driver Tips $19.99
            </label>
   <label>
                <input name="product" value="41.99" type="checkbox" id="p5" onclick="totalIt()"/>
                Fuel Surcharge $41.99
            </label>
            <label>
                Total 
                <input value="$0.00" readonly="readonly" type="text" id="total"/>
                <input value="$0.00" readonly="readonly" type="text" id="tfare"/>
    
            </label>
        </fieldset>
        <input value="Submit" type="submit"/>
        <input value="Reset" type="reset"/>
    </form>
</body>
</html>

Friday, March 17, 2017

INPUT MAXLENGTH is not working HTML - Solved

If MAXLENGTH is not working in Chrome / Safari / Mozilla / Opera Browsers then dont get Bang Bang - SIMPLE jQuery will solve your problem

<input type="text" name="ccno" id="ccno" placeholder="Credit Card No #" />
<input type="text" name="cvv2" id="cvv2" placeholder="CVV Code" />

<script>
$('input[name="ccno"]').keypress(function() {
    if (this.value.length >= 19) {
        return false;
    }
});

$('input[name="cvv2"]').keypress(function() {
    if (this.value.length >= 4) {
        return false;
    }
});
</script>

MySQL & PHP References

Search This Blog