<h1>User Review</h1>
<p><em style="font-weight:bold">Still not convinced? </em><br><br> Well let's take a look and see what our </p>
<p>users have to say about RedPanda.</p>
<nav><h1 id="r1" id="comment"> Amazing <br id='rating_1'><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></h1></nav>
<nav><h1 id="r1">Brilliant <br><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></h1></nav>
<nav><h1 id="r1">Good <br><span>★</span><span>★</span><span>★</span><span>☆</span><span>☆</span></h1></nav>
<nav><h1 id="r1">Ugly Logo <br><span>★</span><span>★</span><span>☆</span><span>☆</span><span>☆</span></h1></nav>
<nav><h1 id="r1">Free Software <br><span>★</span><span>★</span><span>★</span><span>☆</span><span>☆</span></h1></nav><br>
You can write your review here :)
Above is the user review html page
<form action="userreview.html" onsubmit="tosubmit()">
<div style="padding-bottom: 18px;">First Name:<span style="color: red;"> </span><br/>
<input type="text" name="firstname">
<br>
<div style="padding-bottom: 18px;">Last Name:<span style="color: red;"> </span><br/>
<input type="text" name="lastname">
<br>
<div style="padding-bottom: 18px;">Review:<span style="color: red;"> </span><br/>
<textarea id="data_8" ${readonly} name="data_8" style="width : 450px;" rows="10" class="form-control"></textarea>
<nav>
<fieldset class="rating">
<legend>Please rate:</legend>
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">★★★★★</label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">★★★★</label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">★★★</label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">★★</label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">★</label>
</fieldset>
</nav>
<div style="padding-bottom: 18px;">Would you recommend this product?<span style="color: red;"> *</span><br/>
<span><input type="radio" id="data_9_0" name="data_9" value="Yes"/> Yes</span><br/>
<span><input type="radio" id="data_9_1" name="data_9" value="No"/> No</span><br/>
<span><input type="radio" id="data_9_2" name="data_9" value="I am not sure"/> I am not sure</span><br/>
</br>
<input type="submit" value="Submit">
</div>
</form>
This is the form page where users put in their review and their rating. I want the input to replace one of the reviews that i had put on my html at the user review page. Can someone help me ??? thanks
(for example when i put my opinion on this form page, then when i submit the opinion i put will be appear as one of the review on the user review page)
I totally have no idea how to start this so it will be good if some suggestion is given to me thanks
I think what you are looking for is making a database to hold all the reviews. Then you can use php to make the entries in the database and to show all the reviews in the database.
I am sort of confused by what you want but I am guessing that you have that user review form that you want to put on a page. You have multiple ways to do that. My personal favorite is doing it in PHP but there are other ways as well.
HTML:
<div w3-include-html="userreview.html"></div>
PHP:
include_once 'userreview.html';
jQuery:
<script>
$(function(){
$("#user-review").load("userreview.html");
});
</script>
<div id="user-review"></div>
iFrame:
<iframe src="userreview.html"></iframe>
Any one of these should work. If this helped please click the check mark.
Related
I have a piece of html which basically looks like this:
<a id="popap" style="display:none;" href="#modal">Call the modal with data-remodal-id="modal"</a>
And then the definition of the remodal popup like following:
<div class="remodal" style="width:60%" data-remodal-id="modal">
<div style="width:100%; text-align:center;">
<canvas class="canvas" height="160"></canvas>
</div>
<div class="hideit">
<button data-remodal-action="close" class="remodal-close"></button>
<div class="row">
<div class="modalMainTitle">
<i class="far fa-save fa-3x"></i>
<h1>Add to search List</h1>
</div>
<p>
Comment:
</p>
<textarea id="TextArea1" rows="2" cols="20"></textarea>
</div>
<div class="row" style="padding:0 41.64% ;">
<p>Rating: </p>
<fieldset class="rating" id="ratingSystem">
<input type="radio" id="star5" name="rating" value="5" autocomplete="off" /><label class="full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" autocomplete="off" /><label class="full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3" name="rating" value="3" autocomplete="off" /><label class="full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2" name="rating" value="2" autocomplete="off" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1" name="rating" value="1" autocomplete="off" /><label class="full" for="star1" title="Sucks big time - 1 star"></label>
</fieldset>
</div>
<div class="row">
<div class="col-lg-push-3 col-lg-6">
<div id="infoError2" style="width:100%;text-align:center; margin-right:50px !important; padding-right:45px;" class="alert"></div>
</div>
</div>
#* 0 - User watchlist // *#
<br>
<button data-remodal-action="cancel" class="remodal-cancel" id="cancelButton">Cancel</button>
<button class="remodal-confirm btnSaveWatchlist">Save</button>
</div>
</div>
And then once I call the popup to be executed like following:
$(document).on("click", ".btnWatchList", function (e) {
$("#popap")[0].click();
});
Once this event is completed I noticed it adds a #modal into the URL that I'm on(and I don't want that to happen).
Once the event is fired I have a url like following:
example.com?Ids=12312312412&Date=30#modal
But the url should stay like following:
example.com?Ids=12312312412&Date=30
Is there any way I can prevent this from happening(so that the #modal part isn't added to the url once the popup shows up)?
Apologies for the first answer, I mis-read the question and have since deleted the entry (Apologies, new to this but trying to improve :) -).
event.preventDefault() can be used to prevent a method firing off. https://www.w3schools.com/jsref/event_preventdefault.asp
This can be attached to your Anchor Element to prevent the href being amended. This would look like the following:
$('#popap').click(function(e){
e.preventDefault();
}
Hopefully the above helps and apologies for the first answer :)
you can also as #charlietfl suggested use the method given to you by the libary:
<a data-remodal-target="modal" id="popap" style="display:none;" href="#">Call the modal with data-remodal-id="modal"</a>
I made a multiple choice test with parsing XML of questions and answers using PHP. The generated HTML looks something like this:
<form>
<div id="category0">
<div id="set0">
<div class="question">What is 6 x 6?</div>
<input type="radio" name="0" value="3">3<br>
<input type="radio" name="0" value="30">30<br>
<input type="radio" name="0" value="36">36<br>
<input type="hidden" class="answer" value="36">
</div>
<div id="set1">
<div class="question">What is 2 x 6?</div>
<input type="radio" name="1" value="4">4<br>
<input type="radio" name="1" value="12">12<br>
<input type="radio" name="1" value="36">43<br>
<input type="hidden" class="answer" value="12">
</div>
<!-- A LOT MORE QUESTIONS -->
</div>
<div id="category1">
<div id="set2">
<div class="question">Which of these tools would you use to hammer a nail?</div>
<input type="radio" name="2" value="A hammer">A hammer<br>
<input type="radio" name="2" value="Another nail">Another nail<br>
<input type="radio" name="2" value="A saw">A saw<br>
<input type="hidden" class="answer" value="A hammer">
</div>
<div id="set3">
<div class="question">What color is a red truck?</div>
<input type="radio" name="3" value="red">red<br>
<input type="radio" name="3" value="blue">blue<br>
<input type="radio" name="3" value="green">green<br>
<input type="hidden" class="answer" value="red">
</div>
<!-- A LOT MORE QUESTIONS -->
</div>
<!-- MORE CATEGORIES WITH A LOT OF QUESTIONS-->
</form>
Categories are named "Category" + a number starting from 0 (category0, category1...)
The answer is stored in a hidden field and is exactly the same as the correct options value.
I created a JS function that checks if the selected answer is correct or not, and colors the background of set div according. The function is triggered onclick in each radio input.
I need help with creating a statistic/score of answers for all questions and for each category separately.
At the beginning the score would be 0 of all possible answers.
If I would click on the correct choice of first question the score would be 1 of all possible questions, and 1 of all questions of first category.
I would like to achive this live (when any button is clicked), without posting the form(no POST/GET).
Hope I described my problem so you can understand it, if any clarification is needed, please let me know.
So far I only worked with JS, but any solutions in jQuery as also welcome.
When a radio button is clicked, execute the same logic you already have to determine if answers are correct, but call it for EACH of your "categories", NOT just the one that was clicked.
Start a variable at 0 and increment it by 1 each time you find a correct answer. Then, after your loop, you can update your "Correct Answers" message with the variable's value. This won't require any postbacks.
You could do something like this
$('input[type="radio"]').change( function(){
var answer = $(this).siblings('.answer').val();
if ($(this).val() == answer) {
var score = $(this).parents().siblings('.score').val();
score++;
$(this).parents().siblings('.score').val(score)
console.log(score);
} else {
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<div id="category0">
<div id="set0">
<div class="question">What is 6 x 6?</div>
<input type="radio" name="0" value="3">3<br>
<input type="radio" name="0" value="30">30<br>
<input type="radio" name="0" value="36">36<br>
<input type="hidden" class="answer" value="36">
</div>
<div id="set1">
<div class="question">What is 2 x 6?</div>
<input type="radio" name="1" value="4">4<br>
<input type="radio" name="1" value="12">12<br>
<input type="radio" name="1" value="36">43<br>
<input type="hidden" class="answer" value="12">
</div>
<input type="hidden" class="score" value="0">
<p></p>
<!-- A LOT MORE QUESTIONS -->
</div>
<div id="category1">
<div id="set2">
<div class="question">Which of these tools would you use to hammer a nail?</div>
<input type="radio" name="2" value="A hammer">A hammer<br>
<input type="radio" name="2" value="Another nail">Another nail<br>
<input type="radio" name="2" value="A saw">A saw<br>
<input type="hidden" class="answer" value="A hammer">
</div>
<div id="set3">
<div class="question">What color is a red truck?</div>
<input type="radio" name="3" value="red">red<br>
<input type="radio" name="3" value="blue">blue<br>
<input type="radio" name="3" value="green">green<br>
<input type="hidden" class="answer" value="red">
</div>
<input type="hidden" class="score" value="0">
<p><p>
<!-- A LOT MORE QUESTIONS -->
</div>
<!-- MORE CATEGORIES WITH A LOT OF QUESTIONS-->
</form>
I am trying to enable textarea based on selection of one of the four radio buttons.
<div id="Response">
<label><input type="radio" name="Radi4.19" value="Y" id="Radio_4.19_0">Yes</label>
<label><input type="radio" name="Radi4.19" value="N" id="Radio_4.19_1">No</label>
<label><input type="radio" name="Radi4.19" value="NS" id="Radio_4.19_2">Not Seen</label>
<label><input type="radio" name="Radi4.19" value="NA" id="Radio_4.19_3">Not Applicable</label>
</div>
<span id="responseSupplement">
<div id="Comment">
<label for="Comment">Comment:</label>
<textarea name="comment" rows="6" style="width: 530px;" id="Comm4.19" placeholder="Enter comments here ..."></textarea>
</div>
<div id="Observation">`
<label for="Observation">Observation:</label>`
<textarea name="observation" rows="6" disabled="disabled" id="Obs4.19" style="width: 530px;" placeholder="Enter text of observation here ..."></textarea>
</div>
</span>
I was able to create desired functionality based on binary choice:
<script type="text/javascript">
function enable(val)
{if(val)document.f1.feedback.setAttribute("disabled",val)
else
document.f1.feedback.removeAttribute("disabled",val)}
</script>
<form name="f1" action="" >
<input type="radio" name="rating" value="1" id="green" onclick="enable(0)"/><label for="green">Positive</label><br />
<input type="radio" name="rating" value="0" id="red" onclick="enable(1)" /><label for="red">Negative</label><br />
<textarea name="feedback" rows="6" disabled style="width: 50%;" ></textarea>
</form>
You need to read the checked or unchecked status of the clicked radio button, for that you can pass this as the parameter of your event listener.
http://jsfiddle.net/m5n6s/
I'm facing one issue here,
I am trying to validate at least one radio button to be answered to each question,
but the error here is when I miss some question to answer, I am getting alert, it is fine, but my previous correct answers also disappearing, I mean the page is loading from the start it seems.
Workingfiddle here.
You can see my sample question form here:
<form name="myform" >
<div id="Q1" class="question">
<h3>1. How convenient is our company to use?</h3>
</div>
<div id="A1"class="answers">
<input type="radio" name="Q1ans" value="1">Extremely convenient<br>
<input type="radio" name="Q1ans" value="2">Very convenient<br>
<input type="radio" name="Q1ans" value="3">Moderately convenient<br>
<input type="radio" name="Q1ans" value="4">Not at all convenient<br>
</div>
<div id="Q2" class="question">
<h3>2. How professional is our company?</h3>
</div>
<div id="A2"class="answers">
<input type="radio" name="Q2ans" value="1">Extremely professional<br>
<input type="radio" name="Q2ans" value="2">Very professional<br>
<input type="radio" name="Q2ans" value="3">Moderately professional<br>
<input type="radio" name="Q2ans" value="4">Not at all professional<br>
</div>
<div id="Q3" class="question">
<h3>3. Compared to our competitors, is our product quality better, worse, or about the same?</h3>
</div>
<div id="A3"class="answers">
<input type="radio" name="Q3ans" value="1">Much better<br>
<input type="radio" name="Q3ans" value="2">some what better<br>
<input type="radio" name="Q3ans" value="3">slightly better<br>
<input type="radio" name="Q3ans" value="4">worse<br>
</div>
<div id="Q4" class="question">
<h3>4. How responsive is our company?</h3>
</div>
<div id="A4"class="answers">
<input type="radio" name="Q4ans" value="1">Much better<br>
<input type="radio" name="Q4ans" value="2">some what better<br>
<input type="radio" name="Q4ans" value="3">slightly better<br>
<input type="radio" name="Q4ans" value="4">worse<br>
</div>
<div id="Q5" class="question">
<h3>5. Do you like our company, neither like nor dislike it, or dislike it?</h3>
</div>
<div id="A5"class="answers">
<input type="radio" name="Q5ans" value="1">Like a great deal<br>
<input type="radio" name="Q5ans" value="2">Like a little<br>
<input type="radio" name="Q5ans" value="3">Dislike a little<br>
<input type="radio" name="Q5ans" value="4">Dislike a great deal<br>
</div><br><br>
<button type="submit" onclick="validate()">submit</button>
</form>
You could simply change:
onclick="validate()"
to:
onclick="return validate()"
and it will have the desired behavior. I think this is what you were trying to do, but the onclick() call never returned the value from validate().
I have a form that I am building for a client and I am trying to make it so when one group of radio buttons is selected, disable the list of checkboxes but if the radio button for the checkboxes is selected then clear the other radio buttons if they are/were selected.
Here is the code that I am using:
<form action="#">
<fieldset><legend>Activities</legend>
<input style="margin-right:0; margin-left:0;" type="radio" id="Golf" value="I would like to golf at The Breakers Ocean Course" name="activity" />
<label for="Golf">Golf - The Breakers Ocean Course</label>
<ul style="margin-top:0;">
<label for="club">Club Rental</label>
<input style="margin-right:0; margin-left:0;" type="radio" id="club-yes" value="Yes" name="clubrental" />
<label for="club-yes">Yes</label>
or
<input style="margin-right:0; margin-left:0;" type="radio" id="club-no" value="No" name="clubrental" />
<label for="club-no">No</label><br>
<input style="margin-right:0; margin-left:0;" type="radio" id="right-hand" value="Right Handed" name="clubhand" />
<label for="right-hand">Right Handed</label>
or
<input style="margin-right:0; margin-left:0;" type="radio" id="left-hand" value="Left Handed" name="clubhand" />
<label for="left-hand">Left Handed</label>
</ul>
<div style="clear:both;"> </div>
<input style="margin-right:0; margin-left:0;" type="radio" id="hometour" value="I would like to take the Home tour and Worth Avenue Shopping" name="activity" />
<label for="hometour">Home tour and Worth Avenue Shopping</label>
<div style="clear:both;"> </div>
<input style="margin-right:0; margin-left:0;" type="radio" id="museum" value="I would like to attend the Cars of Dreams Museum Tour" name="activity" />
<label for="museum">Cars of Dreams Museum Tour</label>
<div style="clear:both;"> </div>
<input style="margin-right:0; margin-left:0;" type="radio" id="spa" value="I would like to attend The Spa at the Breakers" name="activity" />
<label for="spa">Spa - The Spa at the Breakers</label>
<ul style="margin-top:5px;">
- Please select two treatments<br>
<div style="float:left; width:220px; margin-right:15px;">
<input type="checkbox" id="personal-retreat-massage" value="Personal Retreat Massage" name="treatment" onclick="setItems(this)">
<label for="personal-retreat-massage">Personal Retreat Massage</label>
</div>
<div style="float:left; width:220px; margin-right:15px;">
<input type="checkbox" id="simplicity-massage" value="Simplicity Massage" name="treatment" onclick="setItems(this)">
<label for="simplicity-massage">Simplicity Massage</label>
</div>
<div style="float:left; width:220px; margin-right:15px;">
<input type="checkbox" id="guerlain-classic-facial" value="Guerlain Classic Facial" name="treatment" onclick="setItems(this)">
<label for="guerlain-classic-facial">Guerlain Classic Facial</label>
</div>
<div style="float:left; width:220px; margin-right:15px;">
<input type="checkbox" id="cellular-enzyme-peel" value="Cellular Enzyme Peel" name="treatment" onclick="setItems(this)">
<label for="cellular-enzyme-peel">Cellular Enzyme Peel</label>
</div>
</ul>
</fieldset>
<center><input style="width:75px; height:25px; margin-bottom:25px;" type="submit" value="Submit" name="submit"></center>
</form
>
I can't use PHP so this can only be Javascript.
Thank you.
You might try disabling the checkboxes when the spa radio button is not selected and enabling them when it is selected. You could check the state on focus of a radio element. I think something like the following should work for you:
$('[type="radio"]').focus(function(){
if ($('#spa').prop('checked')) {// jQuery 1.7.2
$('[type="checkbox"]').removeAttr('disabled');
} else {
$('[type="checkbox"]').attr('disabled', 'disabled');
}
})
Hope it helps!
You should check out the jQuery docs! They're very helpful!
http://api.jquery.com/
some things that might help in your current situation are:
http://api.jquery.com/attr/
http://api.jquery.com/removeAttr/
http://api.jquery.com/focus/
http://api.jquery.com/blur/
http://api.jquery.com/category/selectors/