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);
Related
I am trying to figure out the best approach to modifying a hidden django form field. Or if it's even possible. I had my HTML setup to accomplish this very task and it was working perfectly. However, in order to prevent multiple submissions I had to change my HTML and now I am unable to figure out how to pass a value via an HTML button depending on what the user clicks on.
Previously, I had two buttons defined as outline below:
<button type="submit" class="button1" name="status" value="Saved"><h3 class="txtalgn4">Save</h3></button>
<button type="submit" class="button2" name="status" value="Submitted"><h3 class="txtalgn4">Submit</h3></button>
As stated above, this worked perfectly for the purpose of passing a value to an attribute for my model. The value of status was saved as expected depending on which button the user clicked on.
Now I have updated the buttons to type="button" in response to this issue that I opened up today...How To Prevent Double Submit With Form Validation
I tried using the following code:
<button type="button" class="button1" name="status" value="Saved"><h3 class="txtalgn4">Save</h3></button>
<button type="button" class="button2" name="status" value="Submitted"><h3 class="txtalgn4">Submit</h3></button>
And then I also changed the status field to {{ status.as_hidden }} in my HTML to get the value. This only works if I hardcode the status value in my database structure. I need to be able to get this value dynamically depending on what the user clicks. Is JQuery with Ajax the right approach for this? Is there some simple way to modify the hidden field depending on which button the user clicks?
Is there some better way to go about trying to get this field in a hidden manner? As stated above the HTML way with type="submit" worked perfectly, but caused problems when I was trying to prevent the user from double submitting the form. As in all things programming I solved one problem and created another.
Thanks in advance for any thoughts.
Keep using two submit buttons like you were. But instead of disabling the buttons, you disable the whole form from submitting if once submitted.
First, give your form a unique html ID.
<form id="myform">
...
</form>
<!-- JS code -->
<script type="text/javascript">
$('#myform').on('submit', function(e) {
if ($(this).hasClass('submitted')) {
// prevent submission
e.preventDefault();
return;
}
$(this).addClass('submitted');
});
</script>
So here's a strange one... I've built tons of HTML+PHP forms and never had this issue before - but in this instance, when a user clicks the submit button, it does nothing. In this form, we are just editing details of something specific. I am using form_type as my validation method and to post what I am editing to my database. What could I be doing wrong?
Things I have tried until the issue was fixed:
Changing button to input
Assigning an ID to the form and tieing that to the button
Tried to assign a name to the button for validation instead of using a hidden form_type
Using type="hidden" rather than hidden
Using a self-closing / at the end of the input
edit-details.php
<?php include 'includes/edit.php'; ?>
...
...
<form method="post">
<input name="form_type" value="edit_details" hidden>
... form stuff ...
<button class="btn btn-success" type="submit">
<i class="fa fa-check"></i> Update
</button>
</form>
includes/edit.php
if(isset($_POST['form_type']) AND !empty($_POST['form_type'])){
if($_POST['form_type'] == 'edit_details') {
... everything that posts to database with above form's variables ...
}
}
So it turns out that it was something deeper. There was some JavaScript messing with my validation at some point, which never caused the button to submit the POST command.
I'm currently using Opencart which has a form in currency.tpl that changes the currency value depending on the button clicked.
The forms action works off of currency.php, there is then a button within the form that works as a drop down using data-toggle which allows the user to see the currencies available:
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-currency">
<button class="buttoninvis" style="font-size:14px; margin-top:-4px;" data-toggle="dropdown">
<?php echo $text_currency; ?></button>
My problem is that I am trying to have more than one action with a data-toggle button (which doesn't seem possible), the button which is currently opening a drop down menu, I would like it to still do this but also have another action which redirects to a different page when the button is clicked and the screen width is below X.
I have tried onclick, css displays, giving the button an ID and adding functions to detect the button click, etc but nothing works I'm not sure if it is to do with the form's action prohibiting it or the data toggle can only have one action?
Any help or ideas around this?
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 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.