New to coding, please be gentle. This has to be done with pure JavaScript, due to limitations by our class. At the moment, all I'm trying to do is console.log() the value of the image clicked by the user. In this instance, it's either value="0" for "Rock", value="1" for "Paper" or value="2" for "Scissors". I'm unexperienced with using this.value, and I'm wondering if I can pass the value of the clicked image as a parameter to the function called "check()".
HTML
<img src="img/rock.png" alt="Rock" id="rock" value="0" onclick="check(this.value)">
<img src="img/paper.png" alt="Paper" id="paper" value="1" onclick="check(this.value)">
<img src="img/scissors.png" alt="Scissors" id="scissors" value="2" onclick="check(this.value)">
JavaScript (no jQuery)
function check(inputValue) {
console.log(inputValue);
}
I expect the output to be either 0, 1 or 2 depending on which image was clicked by the user. At the moment, all I'm getting is undefined.
Because images don't have a value attribute, this will always come back as undefined. An alternative would be to use a data attribute. These can be retrieved using this.dataset.<attributeName>.
For example, data-value would be accessed by doing this.dataset.value.
function check(inputValue) {
console.log(inputValue);
}
<img src="img/rock.png" alt="Rock" id="rock" data-value="0" onclick="check(this.dataset.value)">
<img src="img/paper.png" alt="Paper" id="paper" data-value="1" onclick="check(this.dataset.value)">
<img src="img/scissors.png" alt="Scissors" id="scissors" data-value="2" onclick="check(this.dataset.value)">
Images don't have a value attribute. You'd probably be better off using a data attribute.
function check(inputValue) {
console.log(inputValue.dataset.value);
}
<img src="img/rock.png" alt="Rock" id="rock" data-value="0" onclick="check(this)">
<img src="img/paper.png" alt="Paper" id="paper" data-value="1" onclick="check(this)">
<img src="img/scissors.png" alt="Scissors" id="scissors" data-value="2" onclick="check(this)">
Related
I want to change the following image from a thumbnail.
Here is the code:
<input type="radio" name="slide_switch" id="{{$index+1}}" ng-model="g" ng-repeat="gallery in Blog.GalleryImageList"/>
<label for="{{$index+1}}" ng-model="g">
<img ng-repeat="gallery in Blog.GalleryImageList" ng-src="{{gallery}}" width="100" height="50" class="col-md-2"/>
</label>
<img ng-repeat="gallery in Blog.GalleryImageList" ng-src="{{gallery}}" class="img-responsive img-rounded ImgSize"/>
Below is the code that i tried to get the template id from the slider wrapper. Whenever user choose the active template which is current template, how to get the id from there?
I tried to use the html way but it always give me the template id is no 3 which is always give the last template id
This is the html code:
<!-- slider-->
<div id="slider-wrapper">
<div id="slider">
<div class="template">
<h3>Chronological Resume</h3>
Traditional Resume Template
<img src="images/resumes_image/chronological.png" id="1" alt="Chronological Resume" />
<input type="hidden" name="template" value="1"/>
</div>
<div class="template">
<h3>Functional Resume</h3>
Skills-based Resume Template
<img src="images/resumes_image/functional.png" id="2" alt="Functional Resume" />
<input type="hidden" name="template" value="2"/>
</div>
<div class="template">
<h3>Combination Resume</h3>
Combination of Chronological Resume & Functional Resume
<img src="images/resumes_image/combination.png" id="3" alt="Combination Resume" />
<input type="hidden" name="template" value="3"/>
</div>
</div> <!-- close for slider-->
</div> <!-- close for slider-wrapper-->
<div id="nav">
<div id="button-previous"><img src="images/icons/prev.png" alt="previous" /></div>
<div id="button-next"><img src="images/icons/next.png" alt="next" /></div>
Code Trying to Retrieve Slider Number:
if ($_SERVER["REQUEST_METHOD"] == "POST"){
if(isset($_POST['submit'])){
$template = $_POST['template'];
echo $template;
exit;
}
}
a pure javascript/jQuery solution:
var sliderNum = $('.active > #template').val();
First of all I'm no javascript expert at all, actually I am totally new to javascript. The function I use is copy pasted and edited, so I am rly not into this. For some how I can not figure out how to resolve the input text from that form.
Javascript code:
function addInput(type) {
// Create an input type dynamically.
var element = document.createElement("input");
// Assign different attributes to the element.
element.setAttribute("type", "text");
//element.setAttribute("value", type);
element.setAttribute("name", "text");
var foo = document.getElementById("fooBar");
// Append the element in page (in span).
foo.appendChild(element);
};
The method call in xhtml is :
<h:form>
<h:messages infoClass="success" errorClass="error"
warnStyle="warning" />
<div class="info">
<span class="required">*</span>
<h:outputText value=" = #{msg['required']}" />
</div>
<div class="widget box" style="width: 40%; float: left">
<div class="widget-header">
<i class="fa fa-bars" /> #{msg['common']}
</div>
<div class="widget-content">
<div class="form_wrapper">
<label>#{msg['projectname']}:<span class="required">*</span></label>
<h:inputText class="inputText"
value="#{projectBean.project.name}" label="#{msg['firstname']}"
required="true" autocomplete="off" />
<util:helptext helptext="#{msg['projectname.desc']}" show="true" />
</div>
</div>
</div>
<div class="widget box" style="width: 40%; float: left">
<div class="widget-header">
<i class="fa fa-bars" /> #{msg['workpackage']}
</div>
<div class="widget-content">
<label>#{msg['workpackagename']}:</label><br />
<span id="fooBar"><br /></span> <INPUT type="button" value="Add"
onclick="addInput()" />
<div style="clear: left;"></div>
</div>
</div>
<div style="clear: left;">
<h:commandButton id="button" class="button"
value="#{msg['button.save']}"
action="#{projectBean.createProject}" />
</div>
</h:form>
But how do I get the values of the input text in my bean?
You don't need javascript for passing value to bean. In your code already exist h:inputText which will do it. You need create proper Java class with getter and setter for property used in value attribute of h:inputText.
Images are rendered on razor view page like this
<img id="9" class="thumb" src="/Content/uploads/Jellyfish.jpg">
<img id="10" class="thumb" src="/Content/uploads/Lighthouse.jpg">
<img id="11" class="thumb" src="/Content/uploads/Chrysanthemum.jpg">
How can I put checkbox on side of each image to send these image id's to the controller on further manipulation?
You can write code something like :
Html
<div>
<img id="9" class="thumb" src="/Content/uploads/Jellyfish.jpg">
<input type='checkbox' class='sendImage' /></div>
<div>
<img id="10" class="thumb" src="/Content/uploads/Lighthouse.jpg">
<input type='checkbox' class='sendImage' /></div>
<div>
<img id="11" class="thumb" src="/Content/uploads/Chrysanthemum.jpg">
<input type='checkbox' class='sendImage' /></div>
JS
$(".sendImage").bind("change", function(e){
var checkbox = $(e.target);
if(checkbox.is(":checked")){
var imageId = checkbox.siblings('img').attr("id");
alert("checked image id : " + imageId);
//send image id to your controller for further processing
}
});
And here is the working fiddle.
You can do this on the server:
public ActionResult SaveImageId(string imageId)
{
//Process your image id somewhere
//If successful
return Json(new { success = true }, JsonRequestBehaviours.AllowGet);
}
On the client:
$(".sendImage").change(function(){
var imageId = $(this).is(":checked")
? $(this).siblings('img').attr("id")
: null;
if(imageId) sendRequest(imageId);
});
//Send the image id to your controller endpoint
function sendRequest(imageId) {
$.get('#Url.Action('SaveImageId')' + '?imageId=' + imageId, function(){
//show a loading gif maybe
});
}
//Your html
<div>
<img id="9" class="thumb" src="/Content/uploads/Jellyfish.jpg">
<input type='checkbox' class='sendImage' />
</div>
<div>
<img id="10" class="thumb" src="/Content/uploads/Lighthouse.jpg">
<input type='checkbox' class='sendImage' />
</div>
<div>
<img id="11" class="thumb" src="/Content/uploads/Chrysanthemum.jpg">
<input type='checkbox' class='sendImage' />
</div>
I have this code in my html:
<form>
<div style="width:530px; height:220px; overflow-y:scroll;">
<div class="people">
<label class="checkbox_1" for="1">
<img src="1.jpg" />
<span>
Jolly Bob Monumir
</span>
</label>
<input type="checkbox" name="people[]" value="1" id="1" />
</div>
<div class="people">
<label class="checkbox_1" for="2">
<img src="2.jpg" />
<span>
Jonathan Monumir
</span>
</label>
<input type="checkbox" name="people[]" value="2" id="4" />
</div>
<div class="people">
<label class="checkbox_1" for="3">
<img src="3.jpg" />
<span>
Misoury Crow
</span>
</label>
<input type="checkbox" name="people[]" value="3" id="3" />
</div>
<div class="people">
<label class="checkbox_1" for="4">
<img src="4.jpg" />
<span>
Michael Crow
</span>
</label>
<input type="checkbox" name="people[]" value="4" class="checkbox_1" id="4" />
</div>
</div>
</form>
After page loads whole form should be displayed. Now I would like to have inputbox and when I type in this box letters names of people it should automatically leave visible those names (divs with classes "people") which contain letters I type.
Example: I type "Jo", divs with Jolly Bob Monumir and Jonathan Monumir should be displayed and other should stay hidden. Then when I type "Cro", Misoury Crow and Michael Crow should be visible., etc. How can I do this with jquery? thanks in advance
UPDATE:
I found this and it works like a charm!
$('#search-criteria').on('keyup', function(){
$('div.people').hide();
var txt = $('#search-criteria').val();
$('div.people').each(function(){
if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
$(this).show();
}
});
});
I think you are looking for something like autocomplete of jqueryui.
I added a input field where you type:
<input type="text" id="people_name">
and jQuery code is:
$('input#people_name').on('keyup', function() {
var value = this.value.trim();
if(value.length) {
$('div.people span').filter(function() {
return new RegExp(value, 'i').test($(this).text());
}).closest('div.people').show();
} else $('div.people').hide();
});
DEMO
NOTE: You may use any autocomplete plugin.
UPDATE:
I found this and it works like a charm!
$('#search-criteria').on('keyup', function(){
$('div.people').hide();
var txt = $('#search-criteria').val();
$('div.people').each(function(){
if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
$(this).show();
}
});
});