CODEWITHSUNDEEP
jquery
mauricev
mauricev

Reputation: 73

can't change the name of submit button

I have a checkbox where I want it to change the name of the submit button, but it's not having it.

Here's the relevant code

$( document ).ready(function()
    {
        $('input[name=checkbox_htmlName]').change(function() {
                if(this.checked) {
                        confirm("I am checked");
                        // $(this).prop("checked", returnVal);
                        //change from edit to delete
                        // document.getElementById(submit_btn_id).name = 'Delete Selected Item';
                        $('input[name=submit_htmlName]').val = 'Delete Selected Item';
                } else {
                    confirm("I am NOT checked");
                    // document.getElementById(submit_btn_id).name = 'Edit Selected Item';
                    $('input[name=submit_htmlName]').val = 'Edit Selected Item';
                }
        });
    });

The button info is 

<input type="submit" name='submit_htmlName' id='submit_btn_id' class="btn btn-primary btn-block" value="change my name" alt="Edit Selected Item"/>

The code is in action at https://jsfiddle.net/mauricev/9py4vmco/1/

Upvotes: 0

Views: 57

Answers (4)

Vaibhavi S.
Vaibhavi S.

Reputation: 1093

jQuery: you can append value by using val() or you can do using attr:

$('input[name=submit_htmlName]').attr('value','Delete Selected Item')


$( document ).ready(function(){
        $('input[name=checkbox_htmlName]').change(function() {
                if(this.checked) {
                        confirm("I am checked");
                        // $(this).prop("checked", returnVal);
                        //change from edit to delete
                        // document.getElementById(submit_btn_id).name = 'Delete Selected Item';
                        $('input[name=submit_htmlName]').val('Delete Selected Item');
                } else {
                    confirm("I am NOT checked");
                    // document.getElementById(submit_btn_id).name = 'Edit Selected Item';
                    $('input[name=submit_htmlName]').val('Edit Selected Item');
                }
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<input type="submit" name='submit_htmlName' id='submit_btn_id' class="btn btn-primary btn-block" value="change my name" alt="Edit Selected Item"/>
			 <input type="checkbox" class="custom-control-input" id="delete-checkbox" name='checkbox_htmlName' value='checkbox_htmlValue'>

Upvotes: 0

Ajith
Ajith

Reputation: 2666

You can use any of the below methods to achieve this.

Using .val() is used to set the value of every matched element

jQuery( document ).ready(function($){
    $('input[name=checkbox_htmlName]').change(function() {
        if(this.checked) {
            $('input[name=submit_htmlName]').val('Delete Selected Item');
        } else {
            $('input[name=submit_htmlName]').val('Edit Selected Item');
        }
    });
});

Using .attr() you can modify the attribute value to the required values

jQuery( document ).ready(function($){
    $('input[name=checkbox_htmlName]').change(function() {
        if(this.checked) {
            $('input[name=submit_htmlName]').attr('value','Delete Selected Item');
        } else {
            $('input[name=submit_htmlName]').attr('value','Edit Selected Item');
        }
    });
});

Upvotes: 1

Jay
Jay

Reputation: 3107

You should use val() as a function.

$('input[name=submit_htmlName]').val('Delete Selected Item');
$('input[name=submit_htmlName]').val('Edit Selected Item');

Upvotes: 0

User863
User863

Reputation: 20039

val is a function in jquery

https://api.jquery.com/val/

$('input[name=checkbox_htmlName]').change(function() {
  if (this.checked) {
    confirm("I am checked");
    $('input[name=submit_htmlName]').val('Delete Selected Item');
  } else {
    confirm("I am NOT checked");
    $('input[name=submit_htmlName]').val('Edit Selected Item');
  }
});


$('input[name=checkbox_htmlName]').change(function() {
  if (this.checked) {
    confirm("I am checked");
    $('input[name=submit_htmlName]').val('Delete Selected Item');
  } else {
    confirm("I am NOT checked");
    $('input[name=submit_htmlName]').val('Edit Selected Item');
  }
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


<div class="container">
  <form class="needs-validation" novalidate action="edit_gene_element.php" method="post">
    <div class="row">
      <div class="col-md-9 mb-3">
      </div>
      <div class="col-md-3 mb-3">
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="delete-checkbox" name='checkbox_htmlName' value='checkbox_htmlValue'>
          <label class="custom-control-label" for="delete-checkbox">Switch to delete mode</label>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-9 mb-3">
      </div>
      <div class="col-md-3 mb-3">
        <input type="submit" name='submit_htmlName' id='submit_btn_id' class="btn btn-primary btn-block" value="change my name" alt="Edit Selected Item" />
      </div>
    </div>
  </form>
</div>

Upvotes: 1

Related Questions