this is code which i try to change
<%if(request.getParameter("hiderefineproblem")==null){%>
<input type="button" value="Refine Problem" onclick="return showHide();" style="background-color: #3399ff;color:#ffffff;" />
<%}%>
<div id="showHideDiv" style="display: none;">
<p>Would one of the following diagnoses apply? Choose the most
specific one:</p>
<FORM ACTION="snomedMapping.jsp#newres" METHOD="POST">
<%
pstm = Con.prepareStatement(selectsql);
pstm.setString(1, snomedid);
pstm.setString(2, snomedname);
resultSet = pstm.executeQuery();
boolean bSubmit=false;
int refid=0;
String[] pipe;
while (resultSet.next()) {
refid=resultSet.getInt("refid");
pipe= resultSet.getString("mapRule").split("\\|");
if (pipe.length > 1){bSubmit=true;
%>
<input type="radio" id="radioList" value="<%=refid%>" name="refId"/>
<tr><%=pipe[1]%></tr>
<br />
<%
}
}
%>
<%if(bSubmit){%>
<input type="hidden" name='hiderefineproblem' value='yes'/>
<INPUT TYPE="SUBMIT" value="Submit" style="background-color: #3399ff;color:#ffffff;">
<%}%>
</FORM>
</div>
<script>
function showHide() {
var ele = document.getElementById("showHideDiv");
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
there is button its value is Refine Problem and i need not to show the button if there is no result for that button . the button contains some value from database .sometimes there is no value for that button . so that time i need not to show the button .
how to hide the on click button if the value is empty .
if I understand the question correctly, I believe you can give all the buttons a class and then iterate across all the buttons with javascript, checking the value each time, and if the value is nothing using javascript to .hide() that button
Related
What i requeire is very very simple, but im quite stuck, im trying to modify an old html form and spice up with some javascript or react. All i want to do here is Say for example the original form (<form>) is
Username:
Password:
And i would like to add a button, and on click it changes the form to
Login Key:
Hiding both Username and Password fields. bascially replace them with the Login Key Form. Any answers are very well aprecciated. Thanks.
You can use jQuery hide and show to accomplish what you're wanting.
$("#thisIsYourBtnID").click(function() {
$("#div").hide(); //this is your div that has username and password inputs in it
$("#div2").show(); //this is your new div showing login key form
});
I don't know a lot about javascript, but maybe you can use PHP to do this writing something like
<?php
if (isset($_POST['buttonNewForm']))
{
echo "......your new form.......";
echo "<form action=page.php method=post>
<button name='buttonOldForm'>Button</button>
</form>"
}
else
{
echo "......your old form.......";
echo "<form action=page.php method=post>
<button name='buttonNewForm'>Button</button>
</form>"
}
?>
The file must be page.php
I didn't check the code, but it should work as you want showing at the first time your old form.
I made a quite simple javascript function, is it what you were trying to do ?
<html>
<body>
<form>
<div id="divNo1">
<label>Username : </label>
<input type="text" />
<br />
<label>Password : </label>
<input type="text" />
</div>
<div id="divNo2" style="display:none">
<label>Login Key : </label>
<input type="text" />
</div>
</form>
<button onclick="changeDisplay()">Button</button>
</body>
<script type="text/javascript">
function changeDisplay() {
var div1 = document.getElementById("divNo1");
var div2 = document.getElementById("divNo2");
if (div1.style.display == 'none') {
div1.style.display = '';
div2.style.display = 'none';
} else {
div1.style.display = 'none';
div2.style.display = '';
}
}
</script>
</html>
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 have a Javascript that triggers when the TrainingRequired checkbox is checked to show two submit buttons. When unchecked, one submit button is shown. The issue is when I check the checkbox and attempt to submit the form without data in one required field, an error message returns via postback. The checkbox remains checked and the two buttons no longer shows. How do I keep the two buttons visible after postback with an error message?
HTML markup:
<tr>
<td>
<label for="trainingRequired">
Training Required?*</label>
</td>
<td>
#Html.CheckBox("trainingRequired", Page.TrainingRequired, new { id = "chkImmediate" })
</td>
</tr>
<tr id="allowSelfTrainingBlock">
<td>
<label for="allowSelfTraining">
Allow Self Training?</label>
</td>
<td>
#Html.CheckBox("allowSelfTraining", Page.AllowSelfTraining)
</td>
</tr>
RegularButton and RequiredButton blocks:
<div id="RegularButton">
<input name="btn" type="submit" id="notrequired" value="Save" />
Cancel
</div>
<div id="RequiredButton">Create New Training Document?<br />
<input name="yesbtn" type ="submit" id="required" value="Yes" />
<input name="nobtn" type="submit" id="required2" value="No & Save" />
Cancel
</div>
Javascript on the same page:
<script type="text/javascript">
function prepareButtons() {
document.getElementById("RequiredButton").style.display = "none";
document.getElementById("RegularButton").style.display = "block";
}
//**********PostBack*************
function postBack(val) {
$('#xtravar').val(val);
$('form').submit();
}
$("#chkImmediate").change(function() {
if(this.checked) {
document.getElementById('allowSelfTrainingBlock').style.visibility = 'visible';
document.getElementById("RequiredButton").style.display = "block";
document.getElementById("RegularButton").style.display = "none";
}
else {
document.getElementById('allowSelfTrainingBlock').style.visibility = 'hidden';
document.getElementById("RequiredButton").style.display = "none";
document.getElementById("RegularButton").style.display = "block";
}
});
window.onload = function () {
prepareButtons();
}
After postback with an error message, I can get the two buttons showing if I uncheck and check the TrainingRequired checkbox. But I really want the two buttons to show after the postback with an error message. Thanks.
Since page would be redrawn after a postback, window.onload would be invoked again. Therefore, you would need to set a condition to check if an error occured. Since your using MVC, you may create a ViewBag prop in the controller and set it if an error occured. Something like the following.
In controller,
public ActionResult Validate()
{
if(Error)
ViewBag.isError = true;
return View();
}
In Js,
window.onload = function () {
var error = '# ViewBag.isError';
if(error != 'true')
prepareButtons();
}
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)">
I need to show a form using a button, and hide it when the user presses another button, because the other button shows another form. I did a similar thing with a select box, but I can't figure out how to do this.
Use the following code fragment to hide the form on button click.
document.getElementById("your form id").style.display="none";
And the following code to display it:
document.getElementById("your form id").style.display="block";
Or you can use the same function for both purposes:
function asd(a)
{
if(a==1)
document.getElementById("asd").style.display="none";
else
document.getElementById("asd").style.display="block";
}
And the HTML:
<form id="asd">form </form>
<button onclick="asd(1)">Hide</button>
<button onclick="asd(2)">Show</button>
There's something I bet you already heard about this! It's called jQuery.
$("#button1").click(function() {
$("#form1").show();
};
It's really easy and you can use CSS-like selectors and you can add animations. It's really easy to learn.
If you have a container and two sub containers, you can do like this
jQuery
$("#previousbutton").click(function() {
$("#form_sub_container1").show();
$("#form_sub_container2").hide(); })
$("#nextbutton").click(function() {
$("#form_container").find(":hidden").show().next();
$("#form_sub_container1").hide();
})
HTML
<div id="form_container">
<div id="form_sub_container1" style="display: block;">
</div>
<div id="form_sub_container2" style="display: none;">
</div>
</div>
There's the global attribute called hidden. But I'm green to all this and maybe there was a reason it wasn't mentioned yet?
var someCondition = true;
if (someCondition == true){
document.getElementById('hidden div').hidden = false;
}
<div id="hidden div" hidden>
stuff hidden by default
</div>
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden
Would you want the same form with different parts, showing each part accordingly with a button?
Here an example with three steps, that is, three form parts, but it is expandable to any number of form parts. The HTML characters « and » just print respectively « and » which might be interesting for the previous and next button characters.
shows_form_part(1)
/* this function shows form part [n] and hides the remaining form parts */
function shows_form_part(n){
var i = 1, p = document.getElementById("form_part"+1);
while (p !== null){
if (i === n){
p.style.display = "";
}
else{
p.style.display = "none";
}
i++;
p = document.getElementById("form_part"+i);
}
}
/* this is called at the last step using info filled during the previous steps*/
function calc_sum() {
var sum =
parseInt(document.getElementById("num1").value) +
parseInt(document.getElementById("num2").value) +
parseInt(document.getElementById("num3").value);
alert("The sum is: " + sum);
}
<div id="form_part1">
Part 1<br>
<input type="number" value="1" id="num1"><br>
<button type="button" onclick="shows_form_part(2)">»</button>
</div>
<div id="form_part2">
Part 2<br>
<input type="number" value="2" id="num2"><br>
<button type="button" onclick="shows_form_part(1)">«</button>
<button type="button" onclick="shows_form_part(3)">»</button>
</div>
<div id="form_part3">
Part 3<br>
<input type="number" value="3" id="num3"><br>
<button type="button" onclick="shows_form_part(2)">«</button>
<button type="button" onclick="calc_sum()">Sum</button>
</div>