JQuery update data-id attribute

Hello,

I have a JQuery script that dynamically enters data into a form; the script is -

        $("#AddWorkHistory a.add").click(function () {
            $('#job_description').removeClass("editworkhistory");
            $('#job_description').addClass("addworkhistory");

            tinymce.init({
                selector: "textarea.addworkhistory",
                toolbar1: "paste | bold italic underline  | alignleft aligncenter alignright alignjustify | bullist numlist | ",

                menubar: false,
                toolbar_items_size: 'small',
                paste_as_text: true,
                browser_spellcheck: true,
                statusbar: false,
                height: 400,

                style_formats: [{
                    title: 'Bold text',
                    inline: 'b'
                }, ],

            });
            $('#Edit_Personal_Statement').hide();
            $('#Edit_Work_History').hide();
            $('#Edit_Qualifications').hide();
            $('#Edit_Covering_Letter').hide();
            $('#QualificationSelect').hide();
            $('#GCSE').hide();
            $('#Alevel').hide();
            $('#Degree').hide();
            $('#Masters').hide();
            $('#phd').hide();
            $('#other').hide();$('#CVs').hide();$('#Skills_Expertise').hide();
            $('#Availability').hide();
            $('#Work_History').show();
        });

Open in new window



It is triggered when the link is clicked -

<a href="#" class="editlinks" data-id="12" data-jobtitle="developer" data-company="ims" data-startdate="" data-enddate="" data-description="lorem ipsum...." style="font-size:12px; float:right; width:40px; text-align:right">Edit</a>

Open in new window


The form that it updates is

<form method="post" id="Edit_Work_History" title="Work History">
      <h3>Work History</h3>
      <label for="start_date">Dates From:</label>
      <input name="start_date" type="date" required="required" id="Edit_start_date" class="datepicker">
      <label for="end_date" class="labelindent">To:</label>
      <input name="end_date" type="date" required="required" id="Edit_end_date" class="datepicker">
      <br />
      <label for="Job_Title">Job Title:</label>
      <input name="Job_Title" type="text" required="required" id="Edit_Job_Title" placeholder="e.g. Java Developer" maxlength="255">
      <br />
      <label for="Company">Company:</label>
      <input name="Company" type="text" required="required" id="Edit_Company" maxlength="255">
      <br />
      <textarea name="job_description" rows="20" id="Edit_job_description"></textarea>
      <input name="Work History" type="submit" disabled="disabled" class="submitBtn" id="EditWorkHistorySubmit" form="Edit_Work_History" value="Save">
      <input name="Work History" type="submit" disabled="disabled" class="cancelbutton" id="EditWorkHistorySubmit" form="Edit_Work_History" value="Remove" data-id="">
      <input name="EditWorkHistoryID" type="hidden" id="EditWorkHistoryID" form="Edit_Work_History" value="<%=(Request.Cookies ("UserAuth")("Userid"))%>">
      <input name="EditWorkHistoryUserID" type="hidden" id="EditWorkHistoryUserID" form="Edit_Work_History" value="<%=(Request.Cookies ("UserAuth")("Userid"))%>">
      <input name="EditWorkHistoryAuth" type="hidden" id="EditWorkHistoryAuth" form="Edit_Work_History" value="<%=(Request.Cookies ("UserAuth")("Authentication"))%>">
      <input type="hidden" name="WID" id="WID">
    </form>

Open in new window


Which contains a button - which when clicked opens a fancy box form...

<input name="Work History" type="submit" disabled="disabled" class="cancelbutton" id="EditWorkHistorySubmit" form="Edit_Work_History" value="Remove" data-id="">

Open in new window


I need to dynamically update the data-id attribute of this button, based on the data-id attribute of the original link clicked...

Is this possible?

Thoughts appreciated.

Thank you
garethtnashAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Duy PhamFreelance IT ConsultantCommented:
First you need to add class "add" to your original link (if you haven't done it yet):
<a href="#" class="editlinks add" data-id="12" data-jobtitle="developer" data-company="ims" data-startdate="" data-enddate="" data-description="lorem ipsum...." style="font-size:12px; float:right; width:40px; text-align:right">Edit</a>

Open in new window

Then in your click() function:
$("#AddWorkHistory a.add").click(function () {
    ...
    // set data-id of button to the same as original link
    $('#Edit_Work_History .cancelButton').attr('data-id', $(this).attr('data-id'));

    // other possible options:
    // $('#Edit_Work_History input[type="submit"][value="Remove"]').attr('data-id', $(this).attr('data-id'));
    // $('#Edit_Work_History input[name="Work History"][value="Remove"]').attr('data-id', $(this).attr('data-id'));
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RobOwner (Aidellio)Commented:
You just use the jQuery data function:

$(".selector").data('id', newval)
0
RobOwner (Aidellio)Commented:
That button you speak of is NOT unique and it needs to be.  Your cancel button has the same name AND ID, which is a no no.  Those buttons should not have a "name" attribute and no two elements should have the same ID.

<input name="Work History" type="submit" disabled="disabled" class="submitBtn" id="EditWorkHistorySubmit" form="Edit_Work_History" value="Save">
<input name="Work History" type="submit" disabled="disabled" class="cancelbutton" id="EditWorkHistorySubmit" form="Edit_Work_History" value="Remove" data-id="">

Open in new window

should change to:

<input type="submit" disabled="disabled" class="submitBtn" id="EditWorkHistorySubmit" form="Edit_Work_History" value="Save">
<input type="reset" disabled="disabled" class="cancelbutton" id="EditWorkHistoryCancel" form="Edit_Work_History" value="Remove" data-id="">

Open in new window

0
RobOwner (Aidellio)Commented:
As mentioned by Duy you need the "add" class to use the code as you have it for the click to work, however removing as shown below may work for you as well:

        $("#AddWorkHistory a").click(function () {

            // update the button id
           $("#EditWorkHistorySubmit").data('id', $(this).data('id));

            $('#job_description').removeClass("editworkhistory");
            $('#job_description').addClass("addworkhistory");

            tinymce.init({
                selector: "textarea.addworkhistory",
                toolbar1: "paste | bold italic underline  | alignleft aligncenter alignright alignjustify | bullist numlist | ",

                menubar: false,
                toolbar_items_size: 'small',
                paste_as_text: true,
                browser_spellcheck: true,
                statusbar: false,
                height: 400,

                style_formats: [{
                    title: 'Bold text',
                    inline: 'b'
                }, ],

            });
            $('#Edit_Personal_Statement').hide();
            $('#Edit_Work_History').hide();
            $('#Edit_Qualifications').hide();
            $('#Edit_Covering_Letter').hide();
            $('#QualificationSelect').hide();
            $('#GCSE').hide();
            $('#Alevel').hide();
            $('#Degree').hide();
            $('#Masters').hide();
            $('#phd').hide();
            $('#other').hide();$('#CVs').hide();$('#Skills_Expertise').hide();
            $('#Availability').hide();
            $('#Work_History').show();
        });
0
garethtnashAuthor Commented:
Excellent - thank you both :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.