I created jsp which has 2 forms. In UI there are 2 buttons. On select of each button respective form should be displayed. But while trying to do this its not allowing me to display other form on button click. Any sample code such to solve my problem?
I created example code to do show and hide forms as you explained. Check whether this is the solution for your problem.
<html>
<head>
<script langauge="javascript">
function showForm1(){
document.getElementById('form1').style.display="block";
document.getElementById('form2').style.display="none";
}
function showForm2(){
document.getElementById('form2').style.display="block";
document.getElementById('form1').style.display="none";
}
</script>
</head>
<body>
<div id="form1" name="form1">
<h1> Form 1 </h1>
<form id="frm1" name="frm1">
Form 1 text 1 <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
Form 1 text 2 <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
<input type="submit" id="frm1btn1" name="frm1btn1" value="submit"/> <br>
</form>
</div>
<div id="form2" name="form2" style="display:none">
<h1> Form 2 </h1>
<form id="frm2" name="frm2">
Form 2 text 1 <input type="text" id="frm2txt1" name="frm2txt1"/> <br>
Form 2 text 2 <input type="text" id="frm2txt2" name="frm2txt2"/> <br>
<input type="submit" id="frm2btn1" name="frm2btn1" value="submit"/> <br>
</form>
</div>
<div id="form1" name="form1">
<h1> Show/Hide buttons </h1>
<form id="ctrl" name="ctrl">
<input type="button" id="ctrlbtn1" name="ctrlbtn1" value="Show form 1" onclick="showForm1();"/>  
<input type="button" id="ctrlbtn2" name="ctrlbtn2" value="Show form 2" onclick="showForm2();"/> <br>
</form>
</div>
</body>
</html>
Related
I have a form in html,inside this form I have a input-type-file and two input-type-submit button.
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="input_file">
<input type="submit" value="Goto This Page">
<input type="submit" value="Goto That Page">
</form>
We know a form can submit whole form in a single page(action).But I need to submit the form in two different place by clicking two different button.
Thank You,
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<input type="file" name="input_file">
<input type="submit" value="Goto This Page" name="submit1">
<input type="submit" value="Goto That Page" name="submit2">
</form>
<?php
if(isset($_POST['submit1']))
{
header("location:first_page.php");
}
if(isset($_POST['submit2']))
{
header("location:second_page.php");
}
?>
</body>
</html>
I currently have a code, that is loaded dynamicly, so I can not tweak it much.
But now I want to trigger the submit when clicking the entire <form>.
How can I achive that?
My current code:
<form action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<input type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
Okay man, i will answer this, but on the next time you need to post your javascript code.
This is your markup:
<!-- add a id here -->
<form id="form" action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<!-- add a id here -->
<input id="submit" type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
With your markup set now is time for the JS:
<script type="text/javascript">
//call a anonymous function
$(document).ready(function(){
//Event On click of the form
$('#form').click(function(){
$('#submit').trigger('click');
})
})
</script>
Obs: submit the form on click in his body dont makes sense to me, please explain this.
Edit:
You can learn basic JS and JQuery on www.codecademy.com
this is my code.jsp file and I've written javascript in it to enable/disable textbox name=uinp when toggling checkbox name=input but it is not working!
<html>
<body>
<form action="compile.jsp" method="get">
Custom Input: <input type="checkbox" name="input" onchange="toggle('input','uinp')"><br><br>
<textarea rows="5" cols="15" name="uinp" style="display: none"></textarea><br><br>
<br><input type="submit" value="Submit">
<input type="reset" value="Cancel">
</form>
<script>
function toggle(chk,txt)
{
if(document.getElementById(chk).checked)
document.getElementById(txt).style.display='';
else
document.getElementById(txt).style.display='none';
}
</script>
</body>
</html>
Please anyone help me with this!
You need to set id for textarea otherwise getElementById() returns null, since there is no element with that id. Also you can pass this context to refer the checkbox.
<form action="compile.jsp" method="get">
Custom Input:
<input type="checkbox" name="input" onchange="toggle(this,'uinp')">
<br>
<br>
<textarea rows="5" cols="15" id="uinp" style="display: none"></textarea>
<br>
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Cancel">
</form>
<script>
function toggle(ele, txt) {
if (ele.checked)
document.getElementById(txt).style.display = '';
else
document.getElementById(txt).style.display = 'none';
}
</script>
I have a form with drop down, text boxes and one submit button. I can submit form with ENTER key like just add ng-keypress="addBookmarkOnEnter($event) with any text boxes and it'll work.
But can I do same task without adding ng-keypress with any text box?
Here is my form:
<form>
<div><input type="text" class="greyPhold" placeholder="http://" data-ng-model="bookmark.url" /></div>
<div class="forSelect">
<div class="selHead" data-ng-class="{hOpen: popup.dropdownStatus}">
<button data-ng-click="toggleDropdown()"><span data-ng-bind="popup.selectedCategory"></span></button>
<ul id="testDiv2" class="dropdownH">
<li data-ng-repeat="category in categories track by $index" data-ng-click="selectCategory($index)">
<div class="colony pull-left"><span>{{category.category_name}}</span></div>
<div class="pull-right"><input type="radio" name="tag" /><label></label></div>
</li>
</ul>
</div>
</div>
<div class="createColony">
<input type="text" class="whitePholder" placeholder="Create a new colony" data-ng-model="bookmark.categoryName"/>
</div>
<div class="complete text-center"><button type="submit" class="done" data-ng-click="addBookmark()">Complete</button></div>
</form>
hope this code would be help you
<html>
<head>
<script src="angular.min.js"></script>
<script src="ui-bootstrap.js"></script>
</head>
<body bgcolor="gray">
<div id="container" ng-app='two_way' ng-controller="two_way_control" style="background-color:CCFF66">
<p style="padding:10px;">
<h1 align="center"> Search Product </h1>
</p>
<p align="center">
<form method="post">
<input type="text" ng-model="searchText" placeholder="Enter a name here" required>
<button ng-click="check(searchText)">Search</button>
</form>
</p>
Search Item Name: {{searchText}}
</div>
</body>
</html>
and use given code inside controller
$scope.check=function(searchText){};
I have four form like form-1 , form-2 , form-3 , form-4 and three Buttons as Button-1, Button-2 , Button-3.
When first jsp page load it has form elements which will display on the screen.
Now my question is when i click to button-2 it should display form-2 and disable other three forms (form-1 , form-3 , form-4 ).Same case with the others two buttons.
Please provide me proper solution using javascript or jquery.
I am using jsp page for html form design.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
$("#b1").click(function(){
$("#f2,#f3,#f4").hide();
$("#f1").show();
});
$("#b2").click(function(){
$("#f1,#f3,#f4").hide();
$("#f2").show();
});
$("#b3").click(function(){
alert("jj");
$("#f1,#f2,#f4").hide();
$("#f3").show();
});
</script>
<style type="text/css">
#f2,#f3,#f4{
display: none;
}
</style>
</head>
<body >
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<input type="button" value="b1" id="b1" >
<input type="button" value="b2" id="b2">
<input type="button" value="b3" id="b3">
</body>
</html>
I have done the coding as per above answer but i am not able to get the different form when i click. I check with alert message also the click is not working . Please tell me where i am doing wrong.
here is the sample.
live Demo : http://jsfiddle.net/a6NJk/626/
Html
You need four forms and three buttons for this:
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<input type="button" value="b1" id="b1" >
<input type="button" value="b2" id="b2">
<input type="button" value="b3" id="b3">
Jquery
When you will click in the button you need to show corresponding form and hide all other form.
see jquery api : http://api.jquery.com/
$("#b1").click(function(){
$("#f2,#f3,#f4").hide();
$("#f1").show();
})
$("#b2").click(function(){
$("#f1,#f3,#f4").hide();
$("#f2").show();
})
$("#b3").click(function(){
$("#f1,#f2,#f4").hide();
$("#f3").show();
})
CSS
#f2,#f3,#f4{
display: none;
}
If you wanted to use anchor tag instead of button then change your html :
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<a href="javascript:void(0)" id="b1" > b1</a >
<a href="javascript:void(0)" id="b2" > b2</a>
<a href="javascript:void(0)" id="b3" > b3</a >
Demo : http://jsfiddle.net/a6NJk/627/