Controlling HTML elements with a controller

Question

Controlling HTML elements with a controller

This seems chaotic and I long for a more organized solution.

I have different HTML elements:

<input class="form-control" required="true" name="Spanish" type="text" value="blah blah" id="lang_1">

<input class="form-control" required="true" name="French" type="text" value="hey hey hey" id="lang_2">

To save them, I use this method:

 function saveTranslations() {
var htmlRows = $("[id^=lang]");
var rowCount = htmlRows.size();
for (i = 0; i < rowCount; i++) {
ARRAY_LANGUAGE_ID[i] = htmlRows[i].id;
ARRAY_DESCRIPTION[i] = htmlRows[i].value;
}
}

Next, I utilize AJAX:

$.ajax({
type: 'PATCH',
url: 'products/' + id,
data: {
languageIDs: ARRAY_LANGUAGE_ID,
descriptiond: ARRAY_DESCRIPTION
}
});

This approach doesn't feel quite right. Is there a better way to accomplish this task?

Mick

Here is a slightly improved version:

var translations = $("[id^=lang]").serializeArray()

javascript ajax laravel

Answer 1

Answer №1

$(function() {
  $('#save').on('click', function() {
    var htmlRows = $('input[id^="lang"]'),
        ARRAY_LANGUAGE_ID = [],
        ARRAY_DESCRIPTION = [];

    $.each(htmlRows, function() {
      ARRAY_LANGUAGE_ID.push($(this).attr('id'));
      ARRAY_DESCRIPTION.push($(this).val());
    });
    
    // Handling AJAX request
    console.log(ARRAY_LANGUAGE_ID,
               ARRAY_DESCRIPTION);

  })
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <title></title>
  </head>
  <body>
    lang_1: <input class="form-control" required="true" name="Spanish" type="text" value="blah blah" id="lang_1"><br>
    lang_2: <input class="form-control" required="true" name="French" type="text" value="hey hey hey" id="lang_2"><br><br>
    
    <button id="save">save</button>
  </body>
</html>

Answer 2

$(function() {
  $('#save').on('click', function() {
    var htmlRows = $('input[id^="lang"]'),
        ARRAY_LANGUAGE_ID = [],
        ARRAY_DESCRIPTION = [];

    $.each(htmlRows, function() {
      ARRAY_LANGUAGE_ID.push($(this).attr('id'));
      ARRAY_DESCRIPTION.push($(this).val());
    });
    
    // Handling AJAX request
    console.log(ARRAY_LANGUAGE_ID,
               ARRAY_DESCRIPTION);

  })
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <title></title>
  </head>
  <body>
    lang_1: <input class="form-control" required="true" name="Spanish" type="text" value="blah blah" id="lang_1"><br>
    lang_2: <input class="form-control" required="true" name="French" type="text" value="hey hey hey" id="lang_2"><br><br>
    
    <button id="save">save</button>
  </body>
</html>

Controlling HTML elements with a controller

Answer №1

Similar questions

Tips for triggering an event from a function instead of the window

Is there a way to inject C++ text into an input field on a webpage using QWebEngine?

Learn the process of effortlessly transferring user information to a MongoDB database

Tips for incorporating theme colors in the "color" prop when employing MaterialUI components

Node.js server encountering a cross-domain error

What steps can be taken to display database results solely for the user currently logged in and created by them?

Somehow, my array only manages to traverse exactly half of its elements

Once the form is submitted, Vue automatically resets all the data

Having difficulty integrating framer-motion with react-router

Refreshing a controller by clicking it from another controller in AngularJS

Using Django ajax doesn't function properly when it's in a separate file

Sorting Columns in PrimeVue DataTable by Date and Time

Updating a particular element within nested arrays: best practices

refresh Laravel 5.1 webpage content seamlessly without page reloading

Utilizing AJAX to send RSS feeds to a Django view

What sets Angular 2 apart when it comes to utilizing [ngStyle] versus [style.attribute]?

Facebook utilizes Ajax for refreshing the page and obtaining updates

Can you define the "tab location" in an HTML document using React?

Locate the midpoint index of the initial sequence occurrence within an array

Whenever an AJAX post request is made to the Rails database, the response consists of a collection of unspecified entities