I am a novice at JavaScript an jQuery. I am writing a project and trying to incorporate $(this) to read a data attribute. Once the data attribute is determined and assigned to a variable, I intend to use that to access other form elements.

Instead of reading the data attribute as intended, clicking the button is submitting the form.

This is a code sample:

<fieldset class="new_inputs" id="new_inputs1">
    <label for="file_input_1">Input File:1</label>
    <input class="fileRenamingFormInput" name="file_input_1" id="file_input_1" type="text" value="">
    <select class="fileRenamingFormSelect" name="destinationFile_1 id="destinationfile_1">...</select>
    <input class="fileRenamingFormFileOut" name="file_out_1" id="file_out_1" type="text" value="">
    <textarea class="copyCommandBlock" name="copyCommandBlock1" id="copyCommandBlock1"></textarea>
    <button type="submit" class="btnGenerate" id="btnGenerate1" data-idx="1">Generate command</button>  <- Button Javascript might act on
    <button type="submit" class="btnCopy" id="btnCopy1" data-idx="1">Copy</button>

<fieldset class="new_inputs" id="new_inputs2">
    <label for="file_input_2">Input File:2</label>
    <input class="fileRenamingFormInput" name="file_input_2" id="file_input_2" type="text" value="">
    <select class="fileRenamingFormSelect" name="destinationFile_2 id="destinationfile_2">...</select>
    <input class="fileRenamingFormFileOut" name="file_out_2" id="file_out_2" type="text" value="">
    <textarea class="copyCommandBlock" name="copyCommandBlock2" id="copyCommandBlock2"></textarea>
    <button type="submit" class="btnGenerate" id="btnGenerate2" data-idx="2">Generate command</button> <- Button Javascript might act on
    <button type="submit" class="btnCopy" id="btnCopy2" data-idx="2">Copy</button>

This is the JavaScript

    var idx = $(this).data("idx");

The logic I am seeking to employ is:

  • When "button.btnGenerate" is clicked, don't submit the form
  • assign data-idx to variable idx
  • once I have variable idx, I can more efficiently use it plus text strings to get form values from sibling or other form elements. For example, if var idx = 2;

    var fnIn = document.getElementById(fileinput'+'idx').value
    var fnOut = document.getElementById(fileout'+'idx').value
    var str = 'cp '+fnIn+' '+fnOut;
    document.getElementById('copyCommandBlock'+idx).value = str;

With the page loaded in the browser there could be ...


My profound apologies for my earlier reply and thanks for your solution.

The first reply to you regarding this answer was before a few cups of tea to get started. That lack of tea combined with a fuzzy head from looking for and trying different solutions yesterday and I couldn't wrap my head around what you had posted.

Rectifying those things and looking at the above, BAM! it works. Thank you!

rproffitt commented: Bam Bam goes Bam Bam Bam! +12

I am back to working on this project after a considerable hiatus working on other jobs. As in my original post, I am doing this project to expand the small amount of javascript skills I already have.

Consider the following as an example of data. I would have anywhere from 1 to 20 such forms on a page. This application is an expanded form of editing a database over simple columns along a row for the data is too wide at times to be visible on the width of a screen. As well, it is in a form for now for, eventually, I want to be able to edit the data using ajax in which clicking on a cell would become a form input.

This is an example of what I have designed based on research carried out so far. I am thinking it is the simplest based on my skill level and the precision it gives for drilling down through the DOM. If there is another way to do it that is simpler, I am open to it. Keep in mind though, I want to use vanilla javascript as much as possible for I plan on using jQuery for ajax I want to add later. I am not concerned about cross-browser compatibility. An admin tool, I only use most recent versions of Firefox or Chromium on Ubuntu.

<form id="row_105">
  <table id="table_105">
        <td id="show_105">
          show name
        <td id="production_number">
        <td id="sement_105">
        </td> ...



Your post and links to articles helped exactly as I had hoped.

This is the javascript to determine the width of the browser:

$(function() {
    var base_url        = window.location.origin;
    var browser_width   = $(window).width();

        url         : base_url+'/index.php/user/jquery_library_browser_width',
        cache       : false,
        type        : "POST",
        data        : {"browser_width":browser_width},
        dataType    : "json"

This is the function within the controller:

function jquery_library_browser_width() {
    //Assign $_post['browser_width'] to $browser_width
    // TRUE runs data through the XSS filtre within CI
    $browser_width = $this->input->post('browser_width', TRUE);
    $this->session->set_userdata('browser_width', $browser_width);

I have more coding still to do for rendering the table based on browser window width but the variable is within the userdata array to run the if method and direct the controller.