CODEWITHSUNDEEP
javascriptphphtml
Jonas Dulay
Jonas Dulay

Reputation: 283

Change the select option value based on input field

I really don't know how to do it. Is it possible to do this process? I want to change the select option value based on the user input on the quant field 

<input type="number" name="quant" id="quant" /> // for example I enter 2
<select name="shipment" disable>
 <option value="100"> 100 per 1 item </option>
 <option value="150"> 150 per 2 item </option> //this must be selected
</select>

My actual code in php 

    <select name="shipment" id="">
<?php 
foreach($shipment as $num => $price)
{
    if($num != NULL || $price !=NULL)
    {
?>              
<option value="<?php echo "{$price}"?>">
    <?php echo "{$price}"." for "."{$num}"." item";?></option>
<?php 
    }
}
?>

</select>
<h4 style="padding:0px;margin:0px;float:left;margin-top:10px;"  class="col-md-3" >Quantity: </h4>
<div class="col-md-9" style="padding-left:0px;"><input  type="number"  name="quant" onblur="multiply.call(this,this.form.elements.price.value,this.form.elements.quant.value)"
 min="1" max="10" placeholder="2" style="height:2em;margin:3px;"></div>

I have to make a simple calculation this is the price of the item: 

<h4 style="padding:0px;margin:0px;float:left;"  class="col-md-12" >Sale Price: ₱<font color='red'><?php $price= number_format(intval($shop_item_orig_price-($shop_item_orig_price*($shop_item_sale/100)))); echo $price;?> </font> </h4>

I will multiply it based on the quantity

    <input  type="number"  name="quant" onblur="multiply.call(this,this.form.elements.price.value,this.form.elements.quant.value);myFunction(this.value)"
 min="1" max="10" placeholder="2" style="height:2em;margin:3px;">

And then add the shipping fee based on the selected value.

Upvotes: 0

Views: 3678

Answers (4)

kp singh
kp singh

Reputation: 1460

HTML

<input type="number" name="quant" id="quant" />
<select name="shipment" disable>
  <option value=""></option>
  <option value="100"> 100 per 1 item </option>
  <option value="150"> 150 per 4 item </option>
  <option value="150"> 150 per 5 item </option> 
  <option value="150"> 150 per 2 item </option>
  <option value="150"> 150 per 3 item </option>
</select>

JavaScript

   document.getElementById('quant').addEventListener("change", function(){
      multiply(this.form.elements.price.value,this.form.elements.quant.value);
      var value = parseInt(this.value, 10),
          selectEle = document.getElementsByTagName('select')[0],
          options = selectEle.options,
          selectedNum = 0;
      for(var i = 0; i < options.length; i++) {
        //checking the exact string with spaces (" " + value + " ")
        if(options[i].textContent.indexOf(" " + value + " ") > -1) {
            selectedNum = i;
        }
     }
     selectEle.selectedIndex = selectedNum ? selectedNum : 0;   
}, false);

Upvotes: 1

divy3993
divy3993

Reputation: 5810

I am showing you the simple demo for your question below:

UPDATE 

function myFunction(quantValue)
{
  var shipmentOption = document.getElementById("shipmentSelect");
  shipmentOption.selectedIndex = quantValue - 1;
}
<input  type="number" name="quant" placeholder="2" onblur="myFunction(this.value)"/>

<select name="shipment" id="shipmentSelect">
 <option value="100"> 100 per 1 item </option>
 <option value="150"> 150 per 2 item </option> //this must be selected
</select>

Explanation: The demo is with very simple logic of selectedIndex. So assuming that your entries would be searialized options. So if 1 is the input than select first option, 2 is the input select the second option,.... and so on.

Second Update:

JSFiddle:Demo

Hope that it help you.

Upvotes: 2

Nana Partykar
Nana Partykar

Reputation: 10548

An alternative

Create one attribute data-quantity in <option> tag. Give 1,2,3... value to it. And, in <script>, use change() or keyup() function.

<select name="shipment" id='selectbox'>
    <option value="100" data-quantity="1"> 100 per 1 item </option>
    <option value="150" data-quantity="2"> 150 per 2 item </option> 
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.quantity').change(function(){
            var quant= $('.quantity').val();
            $("#selectbox").find("option[data-quantity=" + quant + "]").attr('selected', 'selected').siblings().removeAttr('selected');
        });
});
</script>

Upvotes: 0

jcubic
jcubic

Reputation: 66490

Using jQuery:

$(function() {
  $('#quant').keyup(function() {
    var text = $(this).val();
    var select = $('select[name="shipment"]');
    var option = select.find(':contains(' + text + ')');
    if (option.length) {
      select.val(option.attr('value'));
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name="quant" id="quant" />
<select name="shipment" disable>
 <option value="100"> 100 per 1 item </option>
 <option value="150"> 150 per 2 item </option>
</select>

Sorry, don't know vanilla js solution.

Upvotes: 0

Related Questions