CODEWITHSUNDEEP
javascriptjqueryhtml
asad
asad

Reputation: 149

How to create button to change the alert using JQuery and JavaScript?

I want to create a selection button. There are two options, traveled date and issued date. So when the user click traveled date. There will be an alert for traveled date and vice versa to the issued date. I already create the function inside the selection button but, the alert still didn't work? 

function myFunction() {
  document.getElementById("myInput").alert("try");
}

function myFunction1() {
  document.getElementById("myButton").alert("fefetry");
}
<select class="form-control" name="insurance_id">
  <option value="" id="myInput" onclick="myFunction()">Travel Date</option>
  <option value="" id="myButton" onclick="myFunction1()">Issued Date</option>
</select>

Upvotes: 1

Views: 116

Answers (5)

Mamun
Mamun

Reputation: 68933

alert is a global Window method but you are trying to access that on an element.

You can try something like the following way:

<select class="form-control" name="insurance_id"  onchange="myFunction(this)">
  <option value="" id="myInput">Travel Date</option>
  <option value="" id="myButton">Issued Date</option>
</select>

<script>
  function myFunction(sel) {
    var text = sel.options[sel.selectedIndex].text
    alert(text);
  }
  myFunction(document.querySelector('select'));
</script>

Using jQuery:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="insurance_id">
  <option value="" id="myInput">Travel Date</option>
  <option value="" id="myButton">Issued Date</option>
</select>

<script>
  $('select').change(function(){
    alert($(this).find('option:selected').text());
  }).trigger('change');
</script>

Upvotes: 1

Nguyễn Văn Phong
Nguyễn Văn Phong

Reputation: 14198

You can refactor it by listening event on change of select[name=insurance_id] then alert value accordingly like below 

$("select[name=insurance_id]").on("change", function(){
    alert($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="insurance_id">
        <option value="Travel Date" >Travel Date</option>
        <option value="Issued Date" >Issued Date</option>
   </select>

Upvotes: 2

Mukyuu
Mukyuu

Reputation: 6759

You don't use onclick on options but onchange listener on select.

Supposed that you don't use the options value you can use them as the alert placeholder:

<select class="form-control" name="insurance_id" onchange="alert(this.options[this.selectedIndex].value);">
  <option value="try" id="myInput">Travel Date</option>
  <option value="fefetry" id="myButton">Issued Date</option>
</select>

Alternatively, you can use data_attributes and dataset property to fetch it:

<select class="form-control" name="insurance_id" onchange="alert(this.options[this.selectedIndex].dataset.alert);">
  <option data-alert="try" value="" id="myInput">Travel Date</option>
  <option data-alert="fefetry" value="" id="myButton">Issued Date</option>
</select>

Upvotes: 1

Shubham Nagota
Shubham Nagota

Reputation: 304

Change your javascipt code to

<script>
function myFunction() {
  alert("try");
}

function myFunction1() {
  alert("fefetry");
}
</script>

Upvotes: 1

JoHolli
JoHolli

Reputation: 21

You don't need the document.getElementByID() since you assigned the click handler in the HTML tag.

Upvotes: 1

Related Questions