Currently I am designing a user opinion page where I planned to get input from user like "Is it suitable?"
Possibly the input could be YES / NO / No Idea
The native controls such as alert() or confirm(), prompt() etc doesn't provide more than two options.
Is there a native control , that can provide more than two options..?
If not, How can I create one using angular-ui or jquery-ui?
<input type="radio" name="group1" value="yes"> Yes<br>
<input type="radio" name="group1" value="no"> No<br>
<input type="radio" name="group1" value="no_idea" checked> No Idea<br>
It's just standard html. Why you think it's need jquery or angular ?
You can use the jQuery UI dialog widgets buttons option.
It accepts either an object whose keys are the buttons's label, and value is the callback function or an array of objects defining the attributes, properties, and event handlers to set on the button.
The context of the callback functions is the dialog element. You can use the target property of event in case you want to access the button.
$(function() {
$("#dialog").dialog({
title:"Is it suitable?",
buttons: [{
text: "Yes",
click: function(event) {
$(this).dialog("close");
}
}, {
text: "No",
click: function(event) {
$(this).dialog("close");
}
}, {
text: "No Idea",
click: function(event) {
$(this).dialog("close");
}
}]
});
});
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
Related
How can I put an if answered correctly play sound: "mp3 url" in HTML?
I tried multiple ways, but they still don't work.
I am trying to do it with Tampermonkey
You'll need Javascript to check if your condition returns true.
if(answeredcorrectly) {
let mp3= new Audio('urltomp3file.mp3);
mp3.play();
}
You must use javascript for that. Try this:
if (correct) {
var sound = new Audio('file.mp3');
sound.play();
} else {
var sound_i = new Audio('file2.mp3');
sound_i.play();
}
You can't do that with just HTML, but with a little jQuery you can get it done.
/* Create a sound element our function can reference */
const the_sound = new Audio("https://freesound.org/data/previews/555/555547_1676145-lq.mp3");
the_sound.pause();
/* Attach a handler to the form.quiz_form element and listen for the submit event */
$("form.quiz_form").submit(function(e) {
/* Kill the form submit event */
e.preventDefault();
/* Get the selected form field */
/* Note $(this) refers to the jquery element attached to this handler function (form.quiz_form) */
let answer = $(this).find("input:checked").val();
/* Check the value of the answer and continue if correct */
if (answer === "correct") {
/* Check if sound not already playing and play if paused */
if (the_sound.paused) {
the_sound.play();
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--
Create a form with a set of questions. Each input element has a value of "correct" or "incorrect"
-->
<form class="quiz_form" action="#" method="post">
<h3>This is the question</h3>
<input type="radio" id="answer_1" name="quiz_answer" value="correct">
<label for="answer_1">This is the correct answer</label>
<br/>
<input type="radio" id="answer_2" name="quiz_answer" value="incorrect">
<label for="answer_2">This is the wrong answer</label>
<br/>
<input type="radio" id="answer_3" name="quiz_answer" value="incorrect">
<label for="answer_3">This is the wrong answer</label>
<br/>
<br/>
<button type="submit">Submit your answer</button>
</form>
I am a beginner to Vue, and learning something by doing. I was able to make a checkbox reusable, but getting some weird result for radio buttons.
I have the data in an array format in ProgramDesign.vue:
data() {
return {
strategies: [
"Not Important",
"Slightly Important",
"Moderately Important",
"Very Important",
"Extremely Important",
],
};
},
These are the options that get repeated on every question.
I made a separate component for the radio like this:
<template>
<div>
<span v-for="strategy in groups" :key="strategy">
<input :id="strategy" class="radio-style" name="strategy" type="radio" />
<label :for="strategy" class="radio-style-3-label">{{strategy}}</label>
</span>
</div>
</template>
<script>
export default {
props: {
groups: Array,
},
};
</script>
This is how it's used in ProgramDesign.vue:
<p>first question goes here ?</p>
<RadioButton :groups="strategies" />
<div class="line"></div>
<p>second question goes here ?</p>
<RadioButton :groups="strategies" />
I was able to get the reusable output, but when I click on the radio button for the second question, the buttons for the first question get selected. How can I fix this?
The problem is the input IDs and names are not unique between component instances, as can be seen in the rendering of your two RadioButton components (simplified for brevity):
<!-- RadioButton 1 -->
<div>
<span>
<input id="Not Important" name="strategy" type="radio">
<label for="Not Important">Not Important</label>
</span>
</div>
<!-- RadioButton 2 -->
<div>
<span>
<input id="Not Important"❌ name="strategy"❌ type="radio">
<label for="Not Important">Not Important</label>
</span>
</div>
Each label is linked to an input by matching the for and id attributes, such that clicking the label causes the linked radio input to change values. When there are multiple inputs with the same identifier, the browser links the label to the first matching input, causing the behavior you observed.
The name must also be unique between groups (RadioButton instances), since the browser creates radio groups of inputs that have matching names.
Solution
Alternatively, a label and input can be linked by putting the input inside the label, resolving the id/for duplication (and improving readability):
<label>
<input name="strategy" type="radio">
Not Important
</label>
And one way to resolve the duplicate names is to base the name on a counter incremented per instance:
<template>
<div>
<label v-for="strategy in groups" :key="strategy">
<input :name="'strategy' + groupId" type="radio">
{{strategy}}
</label>
</div>
</template>
<script>
let groupId = 0
export default {
props: {
groups: Array
},
data() {
return {
groupId: groupId++
}
}
}
</script>
I am using html5 attribute 'required' in my form. Following are code snippets
$('form').validationEngine('attach', {
promptPosition: "centerRight",
scroll: false,
binded: false,
onValidationComplete: function(form, status) {
if (status == true) {
} else {
// foo;
}
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.js"></script>
<form method="post">
<input type="text" id="nameIt1" name="nameIt" placeholder="Product name..." class="text validate[required] nameIt" required="required">
<input type="submit" value="Submit" class="button yellow">
</form>
Here, the html5 native validation popup appears instead of validation engine popup. If I remove html5 attribute 'required' the code works properly.
Experts, please shade light on this.
Thanks in advance.
Ganesh
Actually if the main purpose of this code is to validate required text field your code works fine because I tested it already on my machine. The required attribute must be present in order to make that field native required html5. It's not even necessary to set that attribute to any value it should be only like this:
<input type="text" id="nameIt1" name="nameIt" placeholder="Product name..." class="text validate[required] nameIt" required >
And it will work just fine. If you remove that attribute the form will post back with the empty field from your specific code. But if you make some changes on your javascript function then you will notice the validation engine popup and in that case the required attribute is not required. See below here:
$('form').validationEngine('attach', {
promptPosition: "centerRight",
scroll: false,
binded: false,
onValidationComplete: function (form, status) {
if (status == true) {
form.validationEngine('detach');
form.submit();
alert('it is Ok');
} else {
alert('Not OK');
}
}
});
I hope this may help
I have some pre-written code by a developer, Which I have to modify, In that code, A directive is created using textboxe is used inside label, And I added another custom directive in that directive. So the final rendered HTML looks like.
<label class="myClass">
<div><input type="text" ng-model="someModel"></div>
<my-custom-tag>
<div class="customDropdown">
dropdownBox
</div>
</my-custom-tag>
</label>
As this div.customDropdown is inside label, whenever I click on dropdown, that click is going to textbox also.
So My question is, Is there any way to disable label feature of focusing input elements?
You can prevent the default action of the label's click event using jQuery.
$('label.myClass').click(function(e) {
e.preventDefault();
});
This does it in vanilla JavaScript:
document.body.addEventListener('click', function(e) {
if(e.target.className === 'customDropdown') {
e.preventDefault();
}
});
document.body.addEventListener('click', function(e) {
if(e.target.className === 'customDropdown') {
e.preventDefault();
}
});
<label class="myClass">
<div><input type="text" ng-model="someModel"></div>
<my-custom-tag>
<div class="customDropdown">
dropdownBox
</div>
</my-custom-tag>
</label>
I recommend you to use div or span at the place of the label and if you want you can write it before or inside that ..
I know its not simple but you can do it ..
I want to make (an HTML) 'file' input element mandatory: something like
<input type='file' required = 'required' .../>
But it is not working.
I saw this WW3 manual which states 'required' attribute is new to HTML 5. But I am not using HTML 5 in the project I am working which doesn't support the new feature.
Any idea?
Thanks to HTML5, it is as easy as this:
<input type='file' required />
Example:
<form>
<input type='file' required />
<button type="submit"> Submit </button>
</form>
You can do it using Jquery like this:-
<script type="text/javascript">
$(document).ready(function() {
$('#upload').bind("click",function()
{
var imgVal = $('#uploadfile').val();
if(imgVal=='')
{
alert("empty input file");
return false;
}
});
});
</script>
<input type="file" name="image" id="uploadfile" size="30" />
<input type="submit" name="upload" id="upload" class="send_upload" value="upload" />
As of now in 2017, I am able to do this-
<input type='file' required />
and when you submit the form, it asks for file.
You could create a polyfill that executes on the form submit. For example:
/* Attach the form event when jQuery loads. */
$(document).ready(function(e){
/* Handle any form's submit event. */
$("form").submit(function(e){
e.preventDefault(); /* Stop the form from submitting immediately. */
var continueInvoke = true; /* Variable used to avoid $(this) scope confusion with .each() function. */
/* Loop through each form element that has the required="" attribute. */
$("form input[required]").each(function(){
/* If the element has no value. */
if($(this).val() == ""){
continueInvoke = false; /* Set the variable to false, to indicate that the form should not be submited. */
}
});
/* Read the variable. Detect any items with no value. */
if(continueInvoke == true){
$(this).submit(); /* Submit the form. */
}
});
});
This script waits for the form to be submitted, then loops though each form element that has the required attribute has a value entered. If everything has a value, it submits the form.
An example element to be checked could be:
<input type="file" name="file_input" required="true" />
(You can remove the comments & minify this code when using it on your website)
var imgVal = $('[type=file]').val();
Similar to Vivek's suggestion, but now you have a more generic selector of the input file and you don't rely on specific ID or class.
See this demo.
Some times the input field is not bound with the form.
I might seem within the <form> and </form> tags but it is outside these tags.
You can try applying the form attribute to the input field to make sure it is related to your form.
<input type="file" name="" required="" form="YOUR-FORM-ID-HERE" />
I hope it helps.
All statements above are entirely correct. However, it is possible for a malicious user to send a POST request without using your form in order to generate errors. Thus, HTML and JS, while offering a user-friendly approach, will not prevent these sorts of attacks. To do so, make sure that your server double checks request data to make sure nothing is empty.
https://www.geeksforgeeks.org/form-required-attribute-with-a-custom-validation-message-in-html5/
<button onclick="myFunction()">Try it</button>
<p id="geeks"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("gfg");
if (!inpObj.checkValidity()) {
document.getElementById("geeks")
.innerHTML = inpObj.validationMessage;
} else {
document.getElementById("geeks")
.innerHTML = "Input is ALL RIGHT";
}
}
</script>