Echo the textbox value without using submit and onclick function in php

I want to echo the textbox value using php. Whatever user types characters in the textbox that as to be displayed in the another textbox as well it as to echo the amount in top As Value is:(Whatever is typed in the textbox) Here is the screenshot

Here is the Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php 
    if(!empty($_GET['a1']))
    { 
        $selected = $_GET['a1'];
    }
    else
    { 
        $selected = 'home';
    }

    if(!empty($_GET['a1']))
    { 
        $selected = $_GET['a1'];
    }
    else
    { 
        $selected = 'home';
    }
?>
<span class="r-text" style="font-weight:bold;">Value is</span>
<form action="" method="post">
    <label>
        <input type="radio" name="a1" value="100" /> 100
    </label>
</br>
    <label>
        <input type="radio" name="a1" value="200" /> 200 
    </label>
</br>
    <label>
        <input type="radio" name="a1" value="300" /> 300 
    </label>
</br>
      <label>
        <input type="radio" name="a1" value=" " /> Other
    </label>
</br>
    <input type="text" name="a1"/>
<br/>
<br/>
    Amount
    <input type="text" name="a2" />
<br/>
<br/>
</form>

<script>
    $('input[type=radio]').click(function(e) {//jQuery works on clicking radio box
        var value = $(this).val(); //Get the clicked checkbox value
        var check = $(this); //Get the clicked checkbox properties (like ID, value, class etc) 
        $('.r-text').html('Value is '+value);// The class r-text after clicked checkbox print the line 'This was selected'
    });
</script>
<script>
    $('input[type=text]').click(function(e) {//jQuery works on clicking radio box
        var value = $(this).val(); //Get the clicked checkbox value
        var check = $(this); //Get the clicked checkbox properties (like ID, value, class etc) 
        $('.r-text').html('Value is '+value);// The class r-text after clicked checkbox print the line 'This was selected'
    });
</script>

3 answers

  • answered 2017-12-11 09:32 raja

    Use onKeyup event on text box that contain user input. and fill your required text box.

  • answered 2017-12-11 09:32 manikant gautam

    you can set value in textarea when user is typing in another textarea.By using keyup events.

    $('input[type=text]').on("keyup",function(){
           var value = parseInt($(this).val()); 
           if($.isNumeric($("input[name='a1']:checked").val())){
             value = parseInt($("input[name='a1']:checked").val()) +value;
           }
           $('[name="a2"]').val(value);
           $(".r-text").html('Value is '+value);
        })
        
        $('input[type=radio]').on("change",function(){
            var textBoxVal = parseInt($("input[type='text'][name='a1']").val()); 
            var selectedVal = parseInt($("input[type='radio'][name='a1']:checked").val());
             if(!$.isNumeric(textBoxVal)){
               textBoxVal = 0;
            }
            if($.isNumeric(selectedVal  )){
             textBoxVal = parseInt(selectedVal) +textBoxVal;
           }
           $('[name="a2"]').val(textBoxVal);
           $(".r-text").html('Value is '+textBoxVal);
        })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <span class="r-text" style="font-weight:bold;">Value is</span>
    <form action="" method="post">
    
        <label>
            <input type="radio" name="a1" value="100" /> 100
        </label></br>
        <label>
            <input type="radio" name="a1" value="200" /> 200 
        </label></br>
        <label>
            <input type="radio" name="a1" value="300" /> 300 
        </label></br>
          <label>
            <input type="radio" name="a1" value=" " /> Other
        </label></br>
        <input type="text" name="a1"/><br/><br/>
        Amount
    <input type="text" name="a2" /><br/><br/>
    </form>

  • answered 2017-12-11 09:32 user3843150

    You can use onblur() function from your HTML tag. onblur() is a JavaScript function. Display the contents of the text box from this function.