I have three radio buttons by default none of them is selected and a message saying "By selecting option 1 and 2, you reduce risk. Learn more" is displayed by default.
Now if I select option 1, "You are not liable to pay any excess fee." should replace the default text.
If I select option 2 or 3, "You will pay an excess of up to [£700 (for moderate)/1000 (for basic)] per day. Learn more" £700 will load if I chose option 2 and £1000 will load if I chose option 3 by replacing the default text.
Can someone help me how to achieve it?
Regards, Bill
.font-weight-600 {
font-weight: 600;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Default Message -->
<div>By selecting option 1 and 2, you reduce risk. Learn more</div>
<!-- If I select Premium excess -->
<div>You are not liable to pay any excess fee.</div>
<!-- If I select Moderate excess or Basic excess -->
<div>You will pay an excess of <span class="font-weight-600">up to [£700 (for moderate)/1000 (for basic)]</span> per day. Learn more</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<input type="radio" name="optradio">
<span class="insurance-plan-text">Premium excess</span>
<span class="float-right"><span class="protection-reduced-price">£30.00</span><span class="protection-reduced-day">/day</span></span>
</label>
</div>
</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<input type="radio" name="optradio">
<span class="insurance-plan-text">Moderate excess</span>
<span class="float-right"><span class="protection-reduced-price">£40.00</span><span class="protection-reduced-day">/day</span></span>
</label>
</div>
</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<input type="radio" name="optradio">
<span class="insurance-plan-text">Basic excess</span>
<span class="float-right"><span class="protection-reduced-price">FREE</span></span>
</label>
</div>
</div>
First, I separated Moderate and Basic excess messages. Then, I added class names to your excess messages. Here is working snippet based on your code:
$('input:radio[name="optradio"]').change(function(){
$('.default-message, .excess-message').hide();
$('.' + $(this).val()).show();
});
.font-weight-600 {
font-weight: 600;
}
.excess-message {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Default Message -->
<div class="default-message">
By selecting option 1 and 2, you reduce risk.
Learn more
</div>
<!-- If I select Premium excess -->
<div class="excess-message premium">You are not liable to pay any excess fee.</div>
<!-- If I select Moderate excess -->
<div class="excess-message moderate">
You will pay an excess of <span class="font-weight-600">up to £700</span> per day.
Learn more
</div>
<!-- If I select Basic excess -->
<div class="excess-message basic">
You will pay an excess of <span class="font-weight-600">up to £1000</span> per day.
Learn more
</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<input type="radio" name="optradio" value="premium">
<span class="insurance-plan-text">Premium excess</span>
<span class="float-right"><span class="protection-reduced-price">£30.00</span><span class="protection-reduced-day">/day</span></span>
</label>
</div>
</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<input type="radio" name="optradio" value="moderate">
<span class="insurance-plan-text">Moderate excess</span>
<span class="float-right"><span class="protection-reduced-price">£40.00</span><span class="protection-reduced-day">/day</span></span>
</label>
</div>
</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<input type="radio" name="optradio" value="basic">
<span class="insurance-plan-text">Basic excess</span>
<span class="float-right"><span class="protection-reduced-price">FREE</span></span>
</label>
</div>
</div>
A simple approach might be to update your HTML markup to add data-option attributes to your radio input elements like so:
<input type="radio" name="optradio" data-option="1">
This allows you to easily determine which radio button is clicked in your script, so that you can decide what message to display to the user. Consider the script and HTML below, where messages are displayed based on their class:
$('.insurance-plan input[type="radio"]').click(function() {
/* Re-hide all messages */
$("[class^='message']").hide();
/* Extract the option number of this radio button */
const option = $(this).data('option');
/* Display only the message that should be shown as per the clicked radio button */
$('.message-' + option).show();
});
.font-weight-600 {
font-weight: 600;
}
/* Message 1, 2 and 3 are hidden by default */
.message-1, .message-2, .message-3 {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Update markup for messages -->
<div class="message-default">By selecting option 1 and 2, you reduce risk. Learn more</div>
<div class="message-1">You are not liable to pay any excess fee.</div>
<div class="message-2">You will pay an excess of <span class="font-weight-600">up to [£700 (for moderate)/1000 (for basic)]</span> per day. Learn more</div>
<div class="message-3">You will pay an excess of <span class="font-weight-600">up to [£1000 (for moderate)/1000 (for basic)]</span> per day. Learn more</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<!-- Add data-message attribute to radio button -->
<input type="radio" name="optradio" data-option="1">
<span class="insurance-plan-text">Premium excess</span>
<span class="float-right"><span class="protection-reduced-price">£30.00</span><span class="protection-reduced-day">/day</span></span>
</label>
</div>
</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<!-- Add data-message attribute to radio button -->
<input type="radio" name="optradio" data-option="2">
<span class="insurance-plan-text">Moderate excess</span>
<span class="float-right"><span class="protection-reduced-price">£40.00</span><span class="protection-reduced-day">/day</span></span>
</label>
</div>
</div>
<div class="bg-light mb-3">
<div class="radio">
<label class="insurance-plan">
<!-- Add data-message attribute to radio button -->
<input type="radio" name="optradio" data-option="3">
<span class="insurance-plan-text">Basic excess</span>
<span class="float-right"><span class="protection-reduced-price">FREE</span></span>
</label>
</div>
</div>
Hope that helps!
Related
This question already has answers here:
localStorage how to save a checkbox
(4 answers)
Closed 3 years ago.
For my search-engine I designed a filter using a form with checkboxes. When submitting those, the filter function works fine (using Flask for this). Yet the checkboxes which where used as a filter are unchecked again when the results are shown. Do I need to save the information in the localStorage, and how can this be done?
Thanks for your help <3
This is a part of my Code for the checkbox (I am a newbie to HTML/JS):
<form>
<article class="card-group-item">
<header class="card-header">
<span class="title">Document Types </span>
</header>
<div class="filter-content">
<div class="card-body">
<label class="form-check" >
<input class="form-check-input" type="checkbox" name="doctype" value="offer" id="offer">
<span class="form-check-label">Offer</span>
</label> <!-- form-check.// -->
<button type="submit" class="btn btn-secondary btn-sm">Submit</button>
</div> <!-- card-body.// -->
</div>
</article> <!-- card-group-item.// -->
</form>
Just add checked to it
<input class="form-check-input" type="checkbox" name="doctype" value="offer" id="offer" checked>
Use checked in your checkbox and read here
<form>
<article class="card-group-item">
<header class="card-header">
<span class="title">Document Types </span>
</header>
<div class="filter-content">
<div class="card-body">
<label class="form-check" >
<input class="form-check-input" type="checkbox" name="doctype" value="offer" id="offer" checked>
<span class="form-check-label">Offer</span>
</label> <!-- form-check.// -->
<button type="submit" class="btn btn-secondary btn-sm">Submit</button>
</div> <!-- card-body.// -->
</div>
</article> <!-- card-group-item.// -->
</form>
For our story we have to make sure our contact us page is accessible. We are supposed to make sure the tab order focus for each input in order for information to be read out on the screenreader. However, we have certain input fields that we don't want the user to be able to edit, however we still want them to be able to have the screen reader capture it. What is the best practice for this issue? What is the approach best to follow to solve this issue?
I found this example online and tried exploring the implementation of this fix Tab on disabled input. It is a css style approach to mitigating the problem but doesn't involve the disabled property.
<form [formGroup]="contactUsForm">
<div class="container pt-4">
<!-- Instructions -->
<div name="instructions-row" class="row">
<div tabindex="0" name="form-instructions" id="form-instructions" class="col justify-content-center">
Please fill out the form and click the send button to submit your message. If your question or comment is
about a specific account, enter the account name and account number in the body of the message.
</div>
</div>
<!-- Basic Info -->
<div name="basic-info-row" class="row">
<div class="col-xl-6 justify-content-center">
<!-- From -->
<div class="input-container">
<label for="from-input" class="liberty-text-secondary">
From
<span *ngIf="contactUsForm.get('from').hasError('required')" class="text-danger">
*
</span>
</label>
<input role="textbox" id="from-input" class="liberty-input col-12" formControlName="from" />
</div>
<!-- Account Number -->
<div class="input-container">
<label for="account-number-input" class="liberty-text-secondary">
Account Number
<span *ngIf="contactUsForm.get('accountNumber').hasError('required')" class="text-danger">
*
</span>
</label>
<input tabindex="0" role="textbox" id="account-number-input" class="liberty-input col-lg-4 col-md-12" formControlName="accountNumber" />
</div>
<!-- User ID -->
<div class="input-container">
<label for="user-id-input" class="liberty-text-secondary">
User ID
<span *ngIf="contactUsForm.get('userId').hasError('required')" class="text-danger">
*
</span>
</label>
<input tabindex="0" role="textbox" id="user-id-input" class="liberty-input col-lg-10 col-md-12" formControlName="userId" />
</div>
<!-- Name -->
<div class="input-container">
<label for="name-input" class="liberty-text-secondary">
Name
<span *ngIf="contactUsForm.get('name').hasError('required')" class="text-danger">
*
</span>
</label>
<input tabindex="0" role="textbox" id="name-input" class="liberty-input col-lg-10 col-md-12" formControlName="name" />
</div>
<!-- Phone Number -->
<div class="input-container">
<label for="phone-number-input" class="liberty-text-secondary">
Phone Number
<span *ngIf="contactUsForm.get('phoneNumber').hasError('required')" class="text-danger">
*
</span>
</label>
<input tabindex="0" role="textbox" id="phone-number-input" class="liberty-input col-lg-4 col-md-12" formControlName="phoneNumber" />
<span *ngIf="contactUsForm.get('phoneNumber').hasError('pattern')" class="text-danger">
Please enter a valid phone number.
</span>
</div>
<!-- Subject -->
<div class="input-container">
<label for="subject-input" class="liberty-text-secondary">
Subject
<span *ngIf="contactUsForm.get('subject').hasError('required')" class="text-danger">
*
</span>
</label>
<select tabindex="0" id="subject-input" class="liberty-select col-lg-11 col-md-12" formControlName="subject">
<option *ngIf="!contactUsForm.value.subject" [value]="null" selected disabled></option>
<option *ngFor="let subject of subjects" [value]="subject">{{subject}}</option>
</select>
</div>
</div>
</div>
<!-- Comments -->
<div class="row">
<div class="col-xl-10 justify-content-center">
<div class="input-container">
<label for="comments-input" class="liberty-text-secondary">
Comments
<span *ngIf="contactUsForm.get('comments').hasError('required')" class="text-danger">
*
</span>
</label>
<textarea tabindex="0" role="textbox" id="comments-input" class="liberty-text-area" formControlName="comments"></textarea>
</div>
</div>
</div>
<!-- Submit Button -->
<div class="row py-4">
<div class="col container">
<div class="row">
<button tabindex="0" role="button" id="submit-button" class="col-xl-2 col-3 btn liberty-button mx-3" [disabled]="contactUsForm.invalid"
(click)="onSubmitClick()">
Send
</button>
<button tabindex="0" role="button" id="cancel-button" class="col-xl-2 col-3 btn liberty-button mx-3" routerLink="/home">
Cancel
</button>
<span class="col-xl-8 col-6"></span>
</div>
</div>
</div>
</div>
</form>
The above code tabs through the enabled inputs only.
Use readonly attribute or css pointer-events none to make the input disabled. Use ngClass to add class dynamically.
component.css
.disabled {
pointer-events: none;
opacity: 0.5;
}
component.html
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input type="text" formControlName="userName">
<input type="text" formControlName="password">
<input [ngClass]="{'disabled':!form.valid}" readonly type="button" value="submit" >
</form>
Example
Note: If you use pointer events none with input type button make sure to add readonly attribute otherwise it will be submit able through enter button
I can hide a list item (the first one in this example) in Qualtrics with regular JavaScript. The screenshot below shows my question.
This is the code that I entered into the javascript window belonging to the question:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your JavaScript Here*/
$(this.questionId).getElementsByClassName("ChoiceStructure")[0].getElementsByTagName("li")[0].style.display = "none";
});
I was wondering how the same could be achieved with jQuery?
I have successfully installed jQuery thanks to this handy guide by adding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
in the source view of the header. Additionally, I added var jq = jQuery.noConflict(); at the top of the javascript window belonging to this question.
By inspecting the source code further I found that the ID of the question is QID2. Based on this answer I therefore tried
$("#QID2 .ChoiceStructure ul li:eq(0)").hide();
but without success.
Please note that ideally I would not want to specify the question ID manually, but instead refer to the question as I have with regular JavaScript.
Edit: the html for the qualtrics question is:
<div class="QuestionOuter BorderColor MC QID2" id="QID2" questionid="QID2" posttag="QID2" data-runtime-remove-class-hidden="runtime.Displayed">
<div class="ValidationError" data-runtime-html="runtime.ErrorMsg" data-runtime-show="runtime.ErrorMsg" style="display: none;"></div> <div class="Inner BorderColor SAVR">
<div class="InnerInner BorderColor TX">
<fieldset>
<!-- BEGIN PARTIALS -->
<!-- Partial for defining the ControlContainerContent -->
<!-- END PARTIALS -->
<h2 class="noStyle"><div class="QuestionText BorderColor">Text</div></h2>
<div class="QuestionBody">
<!-- Begin Choices w/o choice groups -->
<ul class="ChoiceStructure">
<li class="Selection reg"> <input choiceid="1" aria-labelledby="QID2-1-label" class="radio QR-QID2-1 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~1" value="1" data-runtime-checked="runtime.Selected"><label for="QR~QID2~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~1" id="QID2-1-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected"> <span>a (0)</span></label></span> <div class="clear"></div> </li>
<li class="Selection alt"> <input choiceid="2" aria-labelledby="QID2-2-label" class="radio QR-QID2-2 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~2" value="2" data-runtime-checked="runtime.Selected"><label for="QR~QID2~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~2" id="QID2-2-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected"> <span>a (1)</span></label></span> <div class="clear"></div> </li>
<li class="Selection reg"> <input choiceid="3" aria-labelledby="QID2-3-label" class="radio QR-QID2-3 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~3" value="3" data-runtime-checked="runtime.Selected"><label for="QR~QID2~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~3" id="QID2-3-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected"> <span>b (2)</span></label></span> <div class="clear"></div> </li>
<li class="Selection alt"> <input choiceid="4" aria-labelledby="QID2-4-label" class="radio QR-QID2-4 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~4" value="4" data-runtime-checked="runtime.Selected"><label for="QR~QID2~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~4" id="QID2-4-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected"> <span>b (3)</span></label></span><div class="clear"></div> </li>
</ul>
<!-- End Choices w/o choice groups -->
<div class="clear zero"></div>
</div>
</fieldset>
</div>
</div>
</div>
You can use prototypejs (which Qualtrics already uses) to do it quite simply:
Qualtrics.SurveyEngine.addOnload(function()
{
$(this.questionId).down('li').hide();
});
Maybe some of rules that you added in JQuery request ( i mean inside the brackets $(here)) is not valid and JQuery returns wrong link to node element (or returns "undefined"). I guesting that a problem in last construction with .class ul li (because u added class to ul).
So you need to use
$("#QID2 ul li:eq(0)")
or
$("#QID2 ul.ChoiceStructure li:eq(0)"
About refer to the question - you can use variables as in normal JS and add value in JQuery using simple concatenation like
$("#QID"+variableWithQuestionNumber+" li:eq(0)")
(function(){
var counter = 0;
$(".myButton").click(function(e){
if (counter===0){
$("#QID2 ul li:eq(0)").hide();
counter++;
}else{
$("#QID2 ul li:eq(0)").show();
counter--;
}
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="QuestionOuter BorderColor MC QID2" id="QID2" questionid="QID2" posttag="QID2" data-runtime-remove-class-hidden="runtime.Displayed">
<div class="ValidationError" data-runtime-html="runtime.ErrorMsg" data-runtime-show="runtime.ErrorMsg" style="display: none;"></div>
<div class="Inner BorderColor SAVR">
<div class="InnerInner BorderColor TX">
<fieldset>
<!-- BEGIN PARTIALS -->
<!-- Partial for defining the ControlContainerContent -->
<!-- END PARTIALS -->
<h2 class="noStyle"><div class="QuestionText BorderColor">Text</div></h2>
<div class="QuestionBody">
<!-- Begin Choices w/o choice groups -->
<ul class="ChoiceStructure">
<li class="Selection reg">
<input choiceid="1" aria-labelledby="QID2-1-label" class="radio QR-QID2-1 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~1" value="1" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~1" id="QID2-1-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected"> <span>a (0)</span>
</label>
</span>
<div class="clear"></div>
</li>
<li class="Selection alt">
<input choiceid="2" aria-labelledby="QID2-2-label" class="radio QR-QID2-2 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~2" value="2" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~2" id="QID2-2-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected"> <span>a (1)</span>
</label>
</span>
<div class="clear"></div>
</li>
<li class="Selection reg">
<input choiceid="3" aria-labelledby="QID2-3-label" class="radio QR-QID2-3 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~3" value="3" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~3" id="QID2-3-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected"> <span>b (2)</span>
</label>
</span>
<div class="clear"></div>
</li>
<li class="Selection alt">
<input choiceid="4" aria-labelledby="QID2-4-label" class="radio QR-QID2-4 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~4" value="4" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~4" id="QID2-4-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected"> <span>b (3)</span>
</label>
</span>
<div class="clear"></div>
</li>
</ul>
<!-- End Choices w/o choice groups -->
<div class="clear zero"></div>
</div>
</fieldset>
</div>
</div>
</div>
<input type="button" class="myButton" value="Push me"/>
I have form with input fields, radio buttons, and select boxes.
How I can show all inputted data on another page or on modal window of this page?
For radio boxes, I want to show text inside getWord, but the form has 2 languages.
<div class="form-group">
<div class="col-sm-offset-1">
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="newpat" ng-model="isNewpat" value="true"><span>{{getWord('New')}}</span></label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="existpat" ng-model="isNewpat" value="false"><span>{{getWord('Exist')}}</span></label>
</div>
</div>
</div>
I also want to be able to see the information inputted in input fields and chosen datepicker.
For example, I used this, but it did not work:
<div class="modalwindow text-center">
<h1>{{getWord.appoitmentmessage}}</h1>
<p>{{message}}</p>
<div>{{user.name}}</div>
<div>{{user.email}}</div>
</div>
As much I understand your question. I think this will work for you. If you want to show value of radio-box selection in modal. Please elaborate more so in can help further
Change this
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="newpat" ng-model="isNewpat" value="New"><span>New</span></label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="existpat" ng-model="isNewpat" value="Exist"><span>Exist</span></label>
</div>
And this Also
<div class="modalwindow text-center">
<h1>{{isNewpat}}</h1>
<p>{{message}}</p>
<div>{{user.name}}</div>
<div>{{user.email}}</div>
</div>
I have a long HTML file where I need to make a relatively simple substitution, which, nevertheless, cannot be achieved by simple find/replace. I was wondering if RegExp could help me do the job.
So, here is the HTML piece:
<div class="panelHeader">
<span class="QN_header">Info1</span>
<span class="QT_header">Info2</span>
</div>
<div id="QXXXX" class="panelContent">
<div class="Question">
<span class="QNumber"></span>
<span class="QText"></span>
</div>
<!-- some more tags here -->
</div>
Thus at the end it should look like:
<div class="panelHeader">
<span class="QN_header">Info1</span>
<span class="QT_header">Info2</span>
</div>
<div id="QXXXX" class="panelContent">
<div class="Question">
<span class="QNumber">Info1</span>
<span class="QText">Info2</span>
</div>
<!-- some more tags here -->
</div>
What I need is:
Copy Info1 from <span class="QN_header">;
Insert it into <span class="QNumber">;
Copy Info2 from <span class="QT_header">;
Insert it into <span class="QText">;
If it is achievable in several iterations - that's ok; much better then copy/pasting it manually throughout the file.
Thanks in advance.
UPDATE:
The whole REPEATABLE piece of the code is below. It then repeats itself.
<div class="panelHeader"> <!-- BEGIN OF PANEL HEADER -->
<span class="QN_header"></span>
<span class="QT_header"></span>
</div> <!-- END OF PANEL HEADER -->
<div id="QXXXX" class="panelContent"> <!-- BEGIN OF CONTENT-->
<div class="Question">
<span class="QNumber"></span>
<span class="QText"></span>
</div>
<div class="Guidance"><p></p></div>
<div class="Response">
<div class="responseControls">
<label><input type="radio" name="RadioXXXX" value="Y" id="RXXXXY" onchange='radioChange(this, "XXXX")' />Yes</label>
<label><input type="radio" name="RadioXXXX" value="N" id="RXXXXN" onchange='radioChange(this, "XXXX")' />No</label>
<label><input type="radio" name="RadioXXXX" value="NS" id="RXXXXNS" onchange='radioChange(this, "XXXX")' />Not Seen</label>
<label><input type="radio" name="RadioXXXX" value="NA" id="RXXXXNA" onchange='radioChange(this, "XXXX")' />Not Applicable</label>
</div>
<div class="responseDetails">
<div class="Observation">
<label for="ObsXXXX">Observation:</label>
<textarea name="observation" id="ObsXXXX" rows="6" disabled ></textarea></div>
<div class="DueDate">
<label for="DueDateXXXX">Due date:<br /></label>
<input name="DueDate" class="DueDate_in" type="text" id="DueDateXXXX"/>
</div>
<div class="actions">
<label for="paXXXX">Actions required to correct and/or prevent this observation:</label>
<textarea name="actions" id="paXXXX" rows="6"></textarea>
</div>
</div> <!-- End of ResponseDetails -->
</div> <!-- End of Response -->
</div> <!-- END OF CONTENT -->
If they just are repeating systematically after each other, in a long row - try this :
var panelHeaders = document.querySelectorAll('.panelHeader');
var panelContents = document.querySelectorAll('.panelContent');
for (var i=0;i<panelHeaders.length;i++) {
panelContents[i].querySelector('.QNumber').innerHTML = panelHeaders[i].querySelector('.QN_header').innerHTML;
panelContents[i].querySelector('.QText').innerHTML = panelHeaders[i].querySelector('.QT_header').innerHTML;
}
fiddle -> http://jsfiddle.net/8su4y/
Using something like jQuery probably makes more sense than regular expressions. You could copy the values in your example with:
$('.panelHeader').each(function() {
var header = $(this);
var qn = header.find('.QN_header').text();
var qt = header.find('.QT_header').text();
var content = header.next('.panelContent');
content.find('.QNumber').text(qn);
content.find('.QText').text(qt);
});
JSFiddle example