Strings within strings within strings - a triple layer of quotes

Question

Strings within strings within strings - a triple layer of quotes

Here is a snippet of the code that I'm working with:

<select class="form-select" id="topicId" name="topicId" onchange="javascript:
                var data = $(':input[name]', '#dynamic-form').serialize();
                $.ajax(
                  'ajax.php/form/help-topic/' + this.value,
                  {
                    data: data,
                    dataType: 'json',
                    success: function(json) {                            
                        var eng1 = document.querySelectorAll('input[type="text"]');
                        eng1[eng1.length-1].style.display = 'none';
                    }
                  });">

The issue arises with input[type="text"] - the quotation marks surrounding text are causing complications, especially since the entire code block is already enclosed in quotes. How can I resolve this problem effectively? Do you have any suggestions?

javascript quotes

Answer 1

Answer №1

To simplify the process, you can move the code from the onchange attribute to a function and then call that function from the attribute.

function triggerAjax() {
  var data = $(':input[name]', '#dynamic-form').serialize();
  $.ajax(
    'ajax.php/form/help-topic/' + this.value, {
      data: data,
      dataType: 'json',
      success: function(json) {
        var eng1 = document.querySelectorAll('input[type="text"]');
        eng1[eng1.length - 1].style.display = 'none';
      }
    });
}

<select class="form-select" id="topicId" name="topicId" onchange="triggerAjax()">

Alternatively, you can attach the event listener in JavaScript without using onchange.

$("#topicId").change(function() {
  var data = $(':input[name]', '#dynamic-form').serialize();
  $.ajax(
    'ajax.php/form/help-topic/' + this.value, {
      data: data,
      dataType: 'json',
      success: function(json) {
        var eng1 = document.querySelectorAll('input[type="text"]');
        eng1[eng1.length - 1].style.display = 'none';
      }
    });
});

<select class="form-select" id="topicId" name="topicId">

If you absolutely need to include all the code in the onchange attribute, you can use single quotes instead of double quotes. Remember to escape them because single quotes are already used around the selector.

<select class="form-select" id="topicId" name="topicId" onchange="javascript:
                var data = $(':input[name]', '#dynamic-form').serialize();
                $.ajax(
                  'ajax.php/form/help-topic/' + this.value,
                  {
                    data: data,
                    dataType: 'json',
                    success: function(json) {                            
                        var eng1 = document.querySelectorAll('input[type=\'text\']');
                        eng1[eng1.length-1].style.display = 'none';
                    }
                  });">

Lastly, you can simply use $('input:text:last').hide().

Answer 2

To simplify the process, you can move the code from the onchange attribute to a function and then call that function from the attribute.

function triggerAjax() {
  var data = $(':input[name]', '#dynamic-form').serialize();
  $.ajax(
    'ajax.php/form/help-topic/' + this.value, {
      data: data,
      dataType: 'json',
      success: function(json) {
        var eng1 = document.querySelectorAll('input[type="text"]');
        eng1[eng1.length - 1].style.display = 'none';
      }
    });
}

<select class="form-select" id="topicId" name="topicId" onchange="triggerAjax()">

Alternatively, you can attach the event listener in JavaScript without using onchange.

$("#topicId").change(function() {
  var data = $(':input[name]', '#dynamic-form').serialize();
  $.ajax(
    'ajax.php/form/help-topic/' + this.value, {
      data: data,
      dataType: 'json',
      success: function(json) {
        var eng1 = document.querySelectorAll('input[type="text"]');
        eng1[eng1.length - 1].style.display = 'none';
      }
    });
});

<select class="form-select" id="topicId" name="topicId">

If you absolutely need to include all the code in the onchange attribute, you can use single quotes instead of double quotes. Remember to escape them because single quotes are already used around the selector.

<select class="form-select" id="topicId" name="topicId" onchange="javascript:
                var data = $(':input[name]', '#dynamic-form').serialize();
                $.ajax(
                  'ajax.php/form/help-topic/' + this.value,
                  {
                    data: data,
                    dataType: 'json',
                    success: function(json) {                            
                        var eng1 = document.querySelectorAll('input[type=\'text\']');
                        eng1[eng1.length-1].style.display = 'none';
                    }
                  });">

Lastly, you can simply use $('input:text:last').hide().

Answer 3

Answer №2

I'm confused as to why not simply write everything inside the <script> tag? Regardless, you have the option to switch all single quotation marks to backticks and then replace the global double quotation marks within the onchange="..." with single quotation marks.

Answer 4

I'm confused as to why not simply write everything inside the <script> tag? Regardless, you have the option to switch all single quotation marks to backticks and then replace the global double quotation marks within the onchange="..." with single quotation marks.

Strings within strings within strings - a triple layer of quotes

Answer №1

Answer №2

Similar questions

The jQuery show/hide functionality is malfunctioning

Creating a delayed queue using RxJS Observables can provide a powerful and

Unveil the content of a string by applying Base64 decoding in AngularJS

Select2.js Dropdown List with Case Sensitivity

The findById function is encountering errors only on invalid id inputs: Unable to cast value to ObjectId

The presence of a default value within an Angular ControlValueAccessor triggers the dirty state due to

Using javascript, how can you fill in the missing dates within an array of objects?

Is it possible to clear a div using jQuery and then restore its contents?

Tips for adjusting the up and down controls and spins of a date input after modifying its height

What is the process for separating static methods into their own file and properly exporting them using ES6?

Implement a transition effect for when elements change size using the `.resizable().css` method

The functionality of save() is not compatible with mongoose.Schema

Issue with Ionic 4 button not triggering event when created using Jquery

Troubles arising while using ng serve in Angular 2

How can I access the marker's on-screen location in react-native-maps?

Is it possible to append an "index" to a database field using Express, Loopback, or NodeJS?

display and conceal elements according to the slider's current value

JavaScript: CryptoJS does not have the SHA1 method implemented

Ensure to update the canvas prior to the function finishing

Block users from viewing the image displayed within a JavaScript canvas