Link to home
Start Free TrialLog in
Avatar of garethtnash
garethtnashFlag for United Kingdom of Great Britain and Northern Ireland

asked on

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
ASKER CERTIFIED SOLUTION
Avatar of Duy Pham
Duy Pham
Flag of Viet Nam image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You just use the jQuery data function:

$(".selector").data('id', newval)
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

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of garethtnash

ASKER

Excellent - thank you both :)