jQuery: использование replace () для значения ввода не работает

Question

https://jsfiddle.net/vxLurdyb/1/

Когда пользователь выбирает YES в раскрывающемся списке членства, значение ввода должно измениться с "service _ ## ####" на " членство ## _ #### ", которое я пытался сделать с помощью replace (), а также сделать изменение четко видимым для пользователя, но оно остается неизменным как визуально, так и при отправке формы.

<div class="col">
  <div class="form-group col-md-6">
    <label class="" for="membership">¿Membership?</label>
    <select name="membership" id="membership" class="form-control input-sm">
    <option value="0">NO</option>
    <option value="1">YES</option>
    </select>
  </div>

  <div class="form-group col-md-6">
    <label for="exampleInputEmail1" class="light-label">ID</label>
    <input type="text" class="form-control" name="invoice_id" id="invoice_id" value="service_id_19_0022" readonly>
  </div>
</div>

    $('#membership').change(function(e){
        if( $(e.target).val() == 1 ){
            changeServiceId();
        }
    });

    function changeServiceId(){
        $('#invoice_id').prop('readonly',false);
        var invoiceid = $('#invoice_id').val();
        console.log(invoiceid);

        var invoiceid = invoiceid.replace(/service/, 'membership');
        $('#invoice_id').attr('value').replace(/service/, 'membership');
        console.log(invoiceid);
        $('#invoice_id').prop('readonly',true);
    }

Как видите, я пробовал как attr ('value'), так и value (), но мне кажется, что я что-то делаю не так

Answer 1

Проблема в том, что вы вообще не устанавливаете значение на #invoice_id. Чтобы установить значение, мы можем просто использовать .val( value ), например:

var invoiceid = invoiceid.replace(/service/, 'membership');
$('#invoice_id').val(invoiceid);

Fiddle Demo

Answer 2

Пожалуйста, найдите измененный код https://jsfiddle.net/un9v8xah/

You should change the value on dropdown change.
Thanks

Answer 3

Вы можете установить значение одним из следующих способов:

$('#invoice_id').val(invoiceid);

или используя attr(), как вы пытались сделать: $('#invoice_id').attr('value', invoiceid)

Answer 4

Вы слишком обдумываете это здесь:

$('#invoice_id').attr('value').replace(/service/, 'membership');

Прежде всего, вы на самом деле ничего не делаете с заменяемым значением. (.attr() возвращает значение, .replace() возвращает значение, в конечном итоге последнее возвращаемое значение просто игнорируется.) Во-вторых, используйте .val() для установки значения. Вы можете упростить до этого:

$('#invoice_id').val(invoiceid);