I have a JSP page in which there are two forms.
One is the default and another is hidden.
On default form, there is a link to the hidden form. On click of this link, the hidden form appears which has some input fields and submit button.
When I click on submit, obviously the form gets submitted.
But when the output comes, the page gets loaded and shows the default form. I want to show hidden form instead. What should I do?
My JSP page has following code structure:
<div id="1st_form">
<form id="defaultForm" action="/searchModel/search">
%{-- form input fields--}%
<div style="float: left; margin-left: 15px;">
Advanced Search
</div>
</form>
</div>
<div id="2nd_form" hidden="hidden">
<form id="hiddenForm" action="/searchModel/search">
%{-- form input fields--}%
<input type="submit" id="searchButton" value="Advanced Search" >
<div style="float: left; margin-left: 15px;">
Advanced Search
</div>
</form>
</div>
And javascript functions are as follows:
function advancedSearch(){
$("#1st_form").hide();
$("#2nd_form").show();
}
function normalSearch(){
$("#2nd_form").hide();
$("#1st_form").show();
}
The problem is, when you send any HTML page to the client, all changes you did with Javascript previously will be lost. That is why you see the default form visible again after submit.
What you want to do is:
When the "Advanced Search"-button is clicked, show the "Advances Search" form and make the "Default" form hidden in the response.
What is something you need to do on server-side, because the client does not know which button submitted the form to the server.
So, you need check if the form was submitted by the "Advanced Search"-button on server side. To be able to do this, you need to give the button a name:
<input type="submit" id="searchButton"
name="searchButton" value="Advanced Search" >
Now, when this button is clicked, it's value will be sent to the server. In this case, Advanced Search.
Next, you need to check if this value was sent to the server in your JSP:
<div id="1st_form" ${param.searchButton == 'Advanced Search'?'hidden':''} >
...
</div>
<div id="2nd_form" ${param.searchButton == 'Advanced Search'?'':'hidden'} >
...
</div>
Note: param is an implicit object in Expression Language.
This way, when you first open the page, param.searchButton will be empty and it will show the default search. When the "Advanced Search" button was submitted, param.searchButton will be Advanced Search, and the advanced search will be visible.
Related
I have a div result_head which is hidden by default. Whenever I click a button which will provide options to select results, this hidden div will display as a heading for the form.
<div class="result_head" id="result_head" style="display: none"> >Results</div>
And the form code
<form method="post" id="form_result">
<div class="form-group">
<-----some drop down menus here --------->
<div class="form-group">
<button type="submit" name="result_submit" id="result_submit" style="display: none;margin:1%;" >Submit</button>
</div>
</form>
After the submit and after the page refresh, I need to display the heading for the result.
I tried different methods to achieve without any luck.
Tried Adding onclick and onsubmit finctions along with form submit
<button type="submit" name="result_submit" id="result_submit" style="display: none;margin:1%;" onclick="document.getElementById('result_head').style.display = 'block';">Submit</button>
Tried to echo CSS in php to display_head.
<div class="result_head" id="result_head" style="display: none" <?php if (isset($_POST['result_submit'])){ echo 'style="display:block !important;"'; } ?> >Results</div>
Also found a method echo entire div via php after form submit which will create the new div after form submit. But that option is not feasible for me as I need to display the head before submit as well.
Also while looking into some solutions, found an option to change the button type from sumbit to button and use jquery\ajax to submit the form. I may have to change my entire code for that.
Is there any other way to do it ?
How about the following:
<div class="result_head" id="result_head" style="display: <?php echo ($_POST['result_submit'] ? 'block' : 'none') ?>">Results</div>
It just changes the style from none to block when submited.
after submitting form you can store value in localStorage for example
localStorage.setItem('isHeadingVisible', true);
and add code which will check in every page load is header visible or not by checking this
if(localStorage.get('isHeadingVisible')){}
you can read more about localStorage here
but this will not work if user will use another browser after these operations, because user's localStorage will be emty in new browser, so I would suggest to use backend data here, or check in every page load if localStorage.get('isHeadingVisible') is undefined and form is submitted, set localStorage.setItem('isHeadingVisible', true);
I need to create a webpage that on first visiting it asks you to put just your name, then once they click login my jQuery will slide away that panel and they will be in the main part of the website. The next time they visit the web page it will go straight to the "main part" rather than ask their name again.
I've never made cookies before how, possible is this?
Also I've created my login form but when i click my submit button it refreshes the page, i want the submit button to be the thing that activates the jQuery.
<div class="login-page">
<div class="form">
<form class="login-form" method="POST" action="">
<!-- user inputs -->
<p class="name">Name:</p><input type="text" name="username" placeholder="Enter Your name Here" />
<!-- your submit button -->
<input class="login" type="submit" name="submit" value="login">
</div>
</div>
I need it to be an input form because that data is going to be saved onto a database by someone else.
In JS, creating a cookie is as simple as document.cookie = "username=John Doe";
And then reading cookies is var cookies = document.cookie; which will give you a semi-colon delimited string of cookies.
As for the second problem, you are using an HTML submit button, which submits the HTML Form. You have to instead capture the click event and prevent the default action. Something like this:
$('.login').click(function(event){
event.preventDefault();
//Do more stuff
})
I have a form with two submit buttons, name="submit_button" and name="search_me_logo", and when the form arrives at the action location, it does two different things depending on which button was pressed.
When the enter key is pressed, I want it to do the same thing as the name="submit_button" but right now it seems to be sending the name="search_me_logo" by default.
Here's the HTML code you need:
<form action="/search_me.php" method="GET">
<div id="search_me_outer_div">
<button id="search_me_div" name="search_me_logo" type="submit">
<img id="search_me_image" src="/images/header/search_icons/search_me.png" height="33" alt='"search me"'/>
</button>
</div><!--
--><div id="search_box_outer_div">
<div id="search_box_div">
<input id="search_box" onfocus="hidePlaceholderAndShineBox();" onblur="showPlaceholderAndBlurBox();" name="search" type="text" spellcheck="false" size="32" placeholder='Get to know Sam... "search me"'>
<button id="search_div" name="submit_button" type="submit">
<img id="search_img" src="images/header/search_icons/fancy_search.png" height="21" alt="Go"/>
</button>
</div>
</div>
</form>
PHP:
if (isset($_GET['submit_button'])) {
echo 'submit was pressed<br>';
} else if (isset($_GET['search_me_logo'])) {
echo 'logo was pressed<br>';
} else if (isset($_GET['search'])) {
echo 'enter was pressed<br>';
} else {
//show error page
}
Right now when I press enter, it echos "logo was pressed". There is probably a way with JavaScript, but if it's possible simply with HTML/PHP, that would be wonderful.
By default, hitting the enter key will cause the first submit button. You can simply add the default submit action in a hidden div right at the beginning of the form. For example:
<form action="/search_me.php" method="GET">
<div style="height:0px; width:0px; overflow:hidden;"><button id="search_div" name="submit_button" type="submit"></button></div>
and keep the rest as is.
Edit: some browsers won't let the enter key to trigger the first button if it's not displayed (e.g. display:none;).
However it will work with:
width: 0;
height: 0;
overflow: hidden;
In the CSS of the element that contains the hidden submit button.
Thanks for all the suggestions. #NoGray's answer could work or I just did two forms, as #Irdrah suggested.
Each forms' buttons and inputs had different names, and one of the inputs had a type="hidden" and id="hidden_input". Then when the submit for the form with the hidden input was clicked, I used jquery's submit() to set
document.getElementById('hidden_input').value = document.getElementById('shown_input').value;`
and returned true. I haven't tried #NoGray's but I'm sure it would work.
I'm trying to essentially have the submit button of search.htm be able to create a pop up with a text area which the users are required to enter a comment describing their actions and click the submit button in the pop up to effectively submit both forms to the same processing page. Both the forms in search.htm and frm_comment.htm will submit both sets of data back to search.htm which calls cfinclude on the server processing logic (server.htm).
In the below code I'm having the the "createPeriod" button submit everything that is in the "srch" form. It is also creating a pop up window which has a html textarea that allows the user to enter a comment. There is a reason that I need to split up the main form from the comment form (frm_comment.htm) but it's very specific to the task I'm trying to accomplish.
search.htm is structured roughly as such:
//include the template here to process the forms
<cfinclude template="../server.htm">
<cfform method = "post" action = "search.htm" name="srch" format="html">
<table>
//bunch of form fields here
.
.
.
.
//bunch of form fields here
<cfinput type="submit" name="createPeriod" value="Create"
onClick="ColdFusion.Window.create('comment', 'CommentBox',
'frm_comment.htm', {center:true,modal:true})">
</table>
</cfform>
I've tried to change the submit button in search.htm to just a cfinput type="button" because keeping it as a submit will make it so that the comment box will appear for a brief moment while the page reloads and disappear as soon as the page reloads. However, I was unable to preserve the form data from search.htm when changing the submit button to a regular button.
I've also tried to have my comment form's submit button's onClick function call a javascript function to submit both forms (to no avail) like so:
submitForms = function(){
document.forms["srch"].submit();
document.forms["srch1"].submit();
}
<cfinput type="button" name="submitComment" value="Submit" onClick="submitForms()"/>
Please advise on the best way to accomplish this task, sorry about the messy code.
This a very basic example, on how to have your 2 forms in one. The JavaScript will just show the comment form when the user clicks on "Search".
<!DOCTYPE html>
<html>
<head>
<style>
#hiddenStuff {
display: none;
}
</style>
</head>
<body>
<form action="...">
// search fields here
<input type="button" value="Search" onclick="document.getElementById('hiddenStuff').style.display='block';">
<div id="hiddenStuff">
// comment form stuff here
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>
I also made a fiddle, if you want to see the result in action.
Sorry I'm not familiar with ColdFusion, but it shouldn't be too hard for you to translate :)
I don't know much about WEB probramming, so feel free to ask if I'm missing any details.
There is a certain website which I'm visiting very frequently, and it requires users to log in every time they visit. For the login page of this website, I'm trying to write down a userscript which will automatically log me in.
I managed to fill in the form fields, but don't have any idea how to click the submit button by JavaScript. The below is a condensed version of the original login code. How can I automatically click this submit button in this code?
<div id="start">
<div id="header">
<div id="login">
<form id="loginForm" name="loginForm" method="post" action="#">
// ...
<input type="submit" id="loginSubmit" onclick="changeAction('submitInput','loginForm');document.forms['loginForm'].submit();" value="Log in" />
// ...
</form>
</div>
</div>
</div>
The usual way to submit a form in general is to call submit() on the form itself, as described in krtek's answer.
However, if you need to actually click a submit button for some reason (your code depends on the submit button's name/value being posted or something), you can click on the submit button itself like this:
document.getElementById('loginSubmit').click();
document.getElementById('loginSubmit').submit();
or, use the same code as the onclick handler:
changeAction('submitInput','loginForm');
document.forms['loginForm'].submit();
(Though that onclick handler is kind of stupidly-written: document.forms['loginForm'] could be replaced with this.)
You can do :
document.forms["loginForm"].submit()
But this won't call the onclick action of your button, so you will need to call it by hand.
Be aware that you must use the name of your form and not the id to access it.