Qfyilyi

I want two fields (id="cost" and id="deposit") to show 2 separate values based on the id="size" field in a form.

The following AutoFill scripts were designed to achieve this goal. However, they do not seem to work together. Strangely it i delete the AutoFillCost or the AutoFillDepost, then the other will work on it's own.

But, they do not work when together. Can anyone advise why this is happening. I have provided the relevant code below:

 <form action="send_form_email.php" method="post" name="contactform">

<table>

  <tbody>

<tr>

  <td>Group Size:</td>

  <td><input type="number" min="6" max="200" id="size"                 

onblur="autoFilldeposit();sizeValidate();" required><strong id="demo"></> 

</td>

<tr>

  <td>Deposit:</td>

  <td><input type="text" id="deposit"></td>

</tr>

<tr>

  <td>Total cost:</td>

  <td><input type="text" id="cost"></td>

</tr>







 <!--Total Cost auto populate-->



<script>



 function autoFillcost() { 

 var sizeb = document.getElementById("size").value;

 if (sizeb <= 25)

 document.getElementById("cost").value = "£200";

 else if (sizeb >= 26 && sizeb <= 50)

document.getElementById("cost").value = "£400";

else

document.getElementById("cost").value = "£600";

}



</script>





<!--Group Size/deposit fields and Validation Message-->



<script>



function autoFilldeposit() { 

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

if (size <= 25)

document.getElementById("deposit").value = "£100";

else if (size >= 26 && size <= 50)

document.getElementById("deposit").value = "£200";

else

document.getElementById("deposit").value = "£300";

}



function sizeValidate() {

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

if (!size.checkValidity()) {

    document.getElementById("demo").innerHTML = size.validationMessage;

} else {

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

} 

} 

</script>