I have a sumbit button gets his value from an expression language in foreach jstl as showin below ,I want when click three buttons get their values to the three hidden input respectively,but when run this code returns the first value in expression language
<script>
function myfunction()
{
if(document.getElementById('demo1').value=""){
document.getElementById('demo1').value=document.getElementById('btn').value;
}else if(document.getElementById('demo2').value=""){
document.getElementById('demo2').value=document.getElementById('btn').value;
}else
{
document.getElementById('demo3').value=document.getElementById('btn').value;
}
}
</script>
<html>
<form:form action="Search" method="post">
<input type="hidden" name="answer1" id="demo1">
<input type="hidden" name="answer2" id="demo2">
<input type="hidden" name="answer3" id="demo3">
<c:forEach var="item" items="${group.subGroups}">
<input id="btn" type="submit"
value="${item.subGroupName}" onclick="myfunction()">
</c:forEach>
<form:form>
</html>
First of all, testing for equality is made using ==not = which is used for assigning values. So
if(document.getElementById('demo1').value=""){
[...]
}
becomes
if (document.getElementById('demo1').value == "") {
[...]
}
And then, if you have multiples buttons output by your JSTL forEach (the <input id="btn"...> ones), you must provide multiple ids or use another way of referring to them; otherwise, how can the browser know which button you are trying to access ?
The other way would be something like :
function myfunction(element)
{
if (document.getElementById('demo1').value == ""){
document.getElementById('demo1').value = element.value;
} else if (document.getElementById('demo2').value == ""){
document.getElementById('demo2').value = element.value;
} else {
document.getElementById('demo3').value = element.value;
}
}
[...]
<input type="submit" value="${item.subGroupName}" onclick="myfunction(this)">
Related
I am trying to get respective values of dynamically generated inputs. In other words, I have an X number of dynamically generated inputs; each of these inputs is bound to a button. With that being said, I would like the user to get alerted the dynamically generated input that is bound to the clicked button. What I have done so far does not sort this out and whatever button is clicked, only the first input's value is generated.
I have the following code - a dynamic input and a button:
<input type="hidden" id="job_id" name="jobIdName" value="{{ job_id }}"> // please note this input is dynamically generated....
<button name="get_id_name" class="get_id_class" id="get_id_id" >Show Id</button>
As for Jquery, I have done the following:
$('#get_id_id').each(function(index) {
$(this).click(function() {
var job_ids = $("[name='jobIdName']");
console.log('Job Ids -------------- : ' + job_ids);
});
});
The above code keeps generating only the first generated input value? Any ideas or suggestions?
I have seen some posts that might seem similar to this one but they are very old; also I am looking for a more modern implementation.
Add your "input tag" into div:
var counter = 0;
$(document).ready(function(){
$("#get_id_id").click(function() {
var divChildren = $(".job_ids").children();
if(counter < divChildren.length){
if(counter == '0'){
console.log($(divChildren).eq(0).val());
}else{
console.log($(divChildren).eq(counter).val());
}
counter++;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="job_ids">
<input type="hidden" name="jobIdName" value="Test01">
<input type="hidden" name="jobIdName" value="Test02">
<input type="hidden" name="jobIdName" value="Test03">
<input type="hidden" name="jobIdName" value="Test04">
<input type="hidden" name="jobIdName" value="Test05">
</div>
<button name="get_id_name" class="get_id_class" id="get_id_id" >Show Id</button>
My code:
<?php
$id = 0;
/*if(isset($_POST["type_test"]) && !empty($_POST["type_test"])){
if($_POST["type_test"] == "ola"){
echo "Ola José";
}
else if($_POST["type_test"] == "adeus"){
echo "Adeus José";
}
else{
}
}*/
?>
<html>
<form id="<?php echo $id; ?>" name ="form_test" action = "test_form.php" method="post" >
<input type="radio" id = "type_test" name="type_test" value="ola"> ola <br>
<input type="radio" id = "type_test" name="type_test" value="adeus"> adeus <br>
<input type="submit" value="submit"> //imput only use for POST method
<button id="myBtn">Try it</button>
<script>
</script>
</form>
<script>
document.getElementById("myBtn").addEventListener("click", functio_test;
functio_test(){
var x =document.getElementById.("type_test").value;
if(x == "ola" ){
alert("Ola José");
}
else if(x == "adeus" ){
alert("Adeus José");
}
else
alert("Continua José");
}
</script>
</html>
This is a simple program for when a button is triggered, an alert message appears.
I tried with the POST method and it worked. Why does it not work with the DOM Event Listener?
Because you're not using it correctly. addEventListener should be called like this:
document.getElementById("myBtn").addEventListener("click", function(){
// code here
});
Or, you can call it like so:
document.getElementById("myBtn").addEventListener("click", functio_test);
// and you must make sure to declare your function correctly
function functio_test(){
// code here
}
Code should look like this
<form id="<?php echo $id; ?>" name ="form_test" action="test_form.php" method="post">
<input type="radio" name="type_test" value="ola"> ola <br/>
<input type="radio" name="type_test" value="adeus"> adeus <br/>
<input type="submit" value="submit" /> <!--imput only use for POST method-->
</form>
<button id="myBtn">Try it</button>
<script>
document.getElementById("myBtn").addEventListener("click", functio_test);
function functio_test(){
var x = document.querySelector('input[name="type_test"]:checked').value;
if(x == "ola"){
alert("Ola José");
}
else if(x == "adeus"){
alert("Adeus José");
}
else {
alert("Continua José");
}
}
</script>
Comment for "imput only use for POST method" was not a real comment. As mentioned before by #Hossam you are missing a closing bracket in the addEventListeiner. As mentioned by #Cruiser you are missing the word function when declaring the function. Also an id attribute should be unique so id="type_test" should only be assigned once. The way to get the value of the type_test radio buttons can be done via query selector your id call did not work because you have to find the one that is checked. I assume you don't want to submit the form by clicking on the try it button. The easiest way is to put the button outside of the form.
Also check out the jQuery Javascript library which makes Javascript fun :)
make sure you close every bracket:
document.getElementById("myBtn").addEventListener("click", functio_test);
Why does it not work with the DOM Event Listener?
The call to addEventListener() is not closed.
document.getElementById("myBtn").addEventListener("click", functio_test;
To fix this, add a closing parenthesis:
document.getElementById("myBtn").addEventListener("click", functio_test);
// ^
See this working in the example below. Notice a few changes were made:
function keyword added before function name: function functio_test()
event argument accepted: function functio_test(e)
event default behavior (button click submitting form) stopped: e.preventDefault()
getting value from the form elements (instead of by id - since that only relates to the first input with that id attribute):
var x = document.forms[0].elements.type_test.value;
The <input> tags have no permitted content and thus are empty elements, so the closing slash was added to the end of the tags. For example:
<input type="radio" id="type_test" name="type_test" value="ola" />
// ^
The id attribute of the second radio button was changed because "The id global attribute defines a unique identifier (ID) which must be unique in the whole document."2
<input type="radio" id="type_test2" name="type_test" value="adeus" /> adeus <br>
Also if this code wasn't in the snippet sandbox, the <form> and <script> tags would be moved into a <body> tag under the <html> tag, since those are flow content and the only permitted contents for <head> are: "One <head> element, followed by one <body> element."1
Also the id attribute of the form has the text 'form` prepended because "Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility."3
document.getElementById("myBtn").addEventListener("click", functio_test);
function functio_test(e) {
e.preventDefault();
var x = document.forms[0].elements.type_test.value;
if (x == "ola") {
alert("Ola José");
} else if (x == "adeus") {
alert("Adeus José");
} else
alert("Continua José");
}
<form id="form0" name="form_test" action="test_form.php" method="post">
<input type="radio" id="type_test" name="type_test" value="ola" /> ola <br>
<input type="radio" id="type_test2" name="type_test" value="adeus" /> adeus <br>
<input type="submit" value="submit" /> //imput only use for POST method
<button id="myBtn">Try it</button>
</form>
1https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html)
2https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
3https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)
I want to execute php code base on radio result html example below.
<form>
<input type="radio" name="type" value="0" checked />Staff
<input type="radio" name="type" value="1" />Client
</form>
in php I can do this
<?php
if($_POST['type'] == 1){
echo "some of my php code";
} else {
echo "my second option php code";
}
?>
but no idea how to implement that code in javascript using onclick
You need ajax. Php is executed before javascript, so it cant change after your click (only if submit and refresh the page).
If you don't need ajax:
Get the DOM element and just add event listeners:
var inputRadio = document.querySelectorAll("input[type='radio']");
for(var i = 0; i < inputRadio.length; i++) {
inputRadio[i].addEventListener('click', function() {
console.log(this); // if you click the radio button,
// it will be logged to the console
});
/*
instead of `addEventListener` you can use:
inputRadio[i].onclick = function() { }
*/
}
You can execute your code after check radio button value. Here I am using on change event.
$('input[name=radioName]').change(function(){
var value = $('input[name=radioName]:checked').val();
if(value == 1){
//do anything
alert(value);
}else{
//do anything
alert(value);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radioName" value="1" /> 1
<input type="radio" name="radioName" value="0" /> 0
var result = $('input[name=type]:checked').val());
if(result == 1){
//"do anything"
} else{
//"do anything"
}
I am using the code below to ask users to rank (prioritize) which sweets they like the best. The users need to rank from 1-3 (1 being the best)
<form id="form1" name="form1" method="post" action="">
<input type="number" name="cake" id="cake" required="required" max="3" min="1"/>Cake <br />
<input type="number" name="twizlers" id="twizlers"required="required" max="3" min="1"/>Twizlers <br />
<input type="number" name="taffy" id="taffy" required="required" max="3" min="1"/>Taffy <br /><br />
<input type="submit" name="button" id="button" value="Submit" />
</form>
I am using HTML 5 coding to make sure that they only use numbers 1,2, and 3 but how can I make sure they do not use the same number twice? Is there an HTML input code that I can use or is there some javascript code needed? If javascript is needed, what do you suggest?
<script type="text/javascript">
function item() {
cake = Number(document.getElementById('cake').value);
twizlers = Number(document.getElementById('twizlers').value);
taffy = Number(document.getElementById('taffy').value);
if (cake == twizlers) {
alert("Some alert cake or twizlers");
return false;
} else if (twizlers == taffy) {
alert("Some alert taffy or twizlers");
return false;
} else if (taffy == cake) {
alert("Some alert taffy or cake");
return false;
} else {
return true;
}
}
</script>
This will work, otherwise you can use radio button.
You can go with a JS check that the user only rank 1 item with a single value and cant rank that item again. You can use JS to do this.Insert an ID for your input field and then
document.getElementById("your_id").disabled = false;
document.getElementById("your_id").disabled = false;
document.getElementById("your_id").disabled = false;
var var1 = document.getElementById("your_id");
var1.onchange = function () {
if (this.disabled == true) {
document.getElementById("your_id").disabled = true;
}
}
Thus check this for three items.
I am trying to show or hide div after submitting an action. so let say I have textarea and I put "example" there then checked the checkbox. after submitting, the "receipt.php" page must display "example" , and if I unchecked the checkbox and submit, the receipt.php page must hide the "example". I tried searching similar to my problem but I really don't have idea how to solve it. I have this code so far but i dont have any codes in "receipt.php" since I really don't have idea. pls help me
<form method ="POST" action ="receipt.php">
<textarea name ="comment"></textarea><br>
<input type="checkbox" id="checkbox" value ="1" >Show this comment in receipt<br>
<input type ="submit" value ="Print">
</form>
You don't need the server response to recognize if the checkbox was checked unless you have some validation on server side. If using JQuery, you can do this:
$('#checkbox').change(function(){
$('#your_div').toggle();
});
If you want to rely on what your server says you need to return something to your ajax call.
for example {response: true/false}
In Html:-
<form method ="POST" action ="receipt.php">
<textarea name ="comment"></textarea><br>
<input type="checkbox" name="reciept-chk" id="checkbox" value = "1" >Show this comment in receipt<br>
<input type ="submit" value ="Print">
</form>
In receipt.php:
<?php
..//recept.php
if(isset($_POST['reciept-chk'])){
// Write Code example here
}
?>
If you want to validate it client side before posting your value in receipt.php then
you can simply validate by piece of jquery.
$(document).ready(function(){
$('#checkbox').change(function(){
if ($('#checkbox').is(':checked')) {
$("#exampleDiv").show();
} else {
$("#exampleDiv").hide();
}
});
});
Please avoide toggle() as it deprecated in 1.8
Here is the code you'll need in your unique PHP file :
<form method="POST">
<textarea name="comment">
<?php (isset($_POST['checkbox1']) && $_POST['checkbox1'] == '1') ? echo "Example"; : echo ""; ?>
</textarea>
<br>
<label for="checkbox1">Show this comment in receipt</label>
<input type="checkbox" id="checkbox1" name="checkbox1" value="1" />
<br>
<input type="submit" value="Print" />
</form>
Replace what you want in place of "Example".
If you are using javascript only, you might try something like this:
<script>
function show(){
if(form.toggledisplay.checked == false){
document.getElementById('example').style.display = "none";
}
else{
document.getElementById('div').style.display = "block";
}
}
</script>
<form method = "POST" action="receipt.php" onsubmit="show()">
<textarea name = "comment"></textarea><br>
<input type="checkbox" name="toggledisplay" id="checkbox" value = "1" >Show this comment in receipt<br>
<input type = "submit" value = "Print">
</form>
<div id="example" style="display:none;">This is the div you want to show</div>
If you are populating the contents of the div from the receipt.php file, you could make a post request to it, when the onsubmit() function is fired and fill the contents of the div like:
document.getElementById('div').innerHTML = "Result from the get/post request"
Hope this points you in the right direction.