I am currently working on a project and I am stuck. As per client requirements a small modification was made to an existing form.
Imagine the HTML page as follows:
I have added a new form element named Business Type and there are 10 options in that.
The user needs to select an option or multiple options and submit and the data would get stored in the database. The data is also getting stored in the database. I have checked that.
There is also a button within the form which opens up a small window to choose a few options. When this window opens up, the selection made in Business Type (in the form) disappears. How to prevent this from happening?
I am trying to use sessions. But is there a better and easier way to accomplish this? I want to retain the multiple selections that are made.
This can all be done client-side. Basically, you create a form with all of the questions that you want to ask and then use JavaScript to display extra questions. If the user doesn't click the button to open the extra questions, they just maintain their empty values. If they do open the extra questions, the will pop up on the page and the user will fill in the inputs. Once they are finished with those questions, you simply hide them but they still hold the values that the user set.
So put the optional fields in a hidden div in the form, and then display that div when the button is clicked.
<form ...>
... required inputs
...
...
Ask more questions
<div id="optional-inputs" style="display: none;">
<input ... />
<input ... />
'Save' optional questions
</div>
<input type="submit" value="submit" />
Then, give the #optional-inputs some CSS (or you can style it however you like):
#optional-input {
left: ...px;
position: absolute;
top: ...px;
width: ...px;
}
For the button/link that opens the other questions, add some JavaScript/jQuery to open the div as an absolute positioned window.
$('#show-optional-inputs').click(function(e) {
$('#optional-inputs').show();
e.preventDefault();
});
This will get you mostly there. You would need to bind an event to trigger the optional questions box to save/close - which is actually just hiding the box and keeping the values that the user set in the form.
Related
I am facing a situation like below.
WebPage1 with fields and a check box (Agree terms)
WebPage2 check if checkbox is checked and initiates emailing
After the page1 form fields are filled, checkbox is checked (I agree to terms) and submitted to Page2, Page2 detects checkbox checked state and proceeds emailing. - works fine
Now the issue is,
if in the browser "Go back button" is clicked while in page2, page 1 gets loaded (checkbox shows unchecked) and then if browser "Go forward button" is pressed WITHOUT checking the checkbox, page1 gets submitted and page2 starts emailing.
I want the checkbox to be mandatorily checked before going to Page2 even if the browser Back and Forward buttons are used by the user. Mainly, to protect from webform spamming.
How can this be achieved ? Please help.
What you can do is pass the Iagree value into the get so when they go forward to the page they would get something like "/account/register?terms=true" then the input with the name terms will be set to true.
However having two pages for what you are trying to archive may not be a great idea because it allows people to do the whole back/forward thing.
What I have done is created a simple jsFiddle with a solution which should be help you
jsFiddle : https://jsfiddle.net/vq0y78ea/
Html
<div class="section1">
<input type="checkbox" class="TsCs" />
<p>Terms and Conditions</p>
<button class="agree-to-terms">I agree</button>
</div>
<div style="display:none" class="section2">
<label>Email address</label>
<input type="textbox" />
<button class="register-account">Register</button>
</div>
Javascript / jQuery
$(function () {
$('.agree-to-terms').on('click', function () {
if ($('.TsCs').is(':checked')) {
$('.section1').slideUp();
$('.section2').slideDown();
}
});
$('.register-account').on('click', function () {
if ($('.TsCs').is(':checked')) {
$('form').submuit();
}
else
{
alert('There was a problem with the Ts and Cs, please check "I agree"');
$('.section1').slideDown();
$('.section2').slideUp();
}
});
});
Basically the webpage will just have one form on it, when the user has checked the I agree to terms and condtions it will hide the I agree section and display the register section. This will stop the user from going back and forward, also if the user doesn't check the checkbox and attemps to submit I have used jQuery to make sure they have checked it or they can't submit.
Also what you can do with the form post, with the code that uses the form values in the post method, post the value of the checkbox make sure it is checked/true, if not just return the page.
I am learning JavaScript to make a large form that stays completely local( no web server involved what-so-ever ). I am very familiar with PHP, but JavaScript is new to me. I have a form that has 100+ checkboxes and text fields. Some of the fields show as "[X] Other: [/text field/]" so when you select the "other" selection, you have to enter an input. I am making a validation to make sure you, A: enter text if you selected "other." B: make sure you selected the check box if you have entered text. When the validation function finds something wrong, it shows an alert box. Then, the page reloads( Not sure why ) and all of the data put into the form is wiped. So, I need to find a way to store this form data to load it upon page reload. I started with cookies, but then it came upon me that there is limits to the number of cookies and their sizes. What else can I do??? Please help!
Your submit button is reloading the page.
For example, if your form is set up like this:
<form name="main" method="post">
<!-- Lots of input fields -->
<button type="submit" id="subbutton">Submit!</button>
</form>
This is doing a POST to an undefined server because your form has no action
If you're sure that you don't need any server interaction at all, it's not necessary to use a form element
This means you can remove the form and submit elements from your page and use a button element instead
<!-- Lots of input fields -->
<button id="clientaction" type="button">Click me</button>
From MDN:
The HTML element represents a document section that contains
interactive controls to submit information to a web server.
For a form I'm building, I'm using a jQuery UI dialog to give the user a list of about 50 check box options. The text boxes get removed from the form completely when they're added to a dialog, so I have to clone and reinsert them to the form before submission so that all of the check box values will be submitted along with the form. The problem is that the checkboxes, when added back into the form, appear visibly. I'm just trying to make them invisible and still be able to submit the values.
I thought maybe doing something like prepend() might be a solution so that the user doesn't actually see the checkboxes, being all the way at the bottom of the form--but it still pushes the form elements down. So I'm looking for a means of appending the #states_container :input to the form without it visibly affecting the form in any way.
Code:
$('#submit_btn').click(function(e){
$("#form_submission").validate({});
if ($("#form_submission").valid()) {
$("#form_submission").append($('#states_container :input').clone());
$("form#form_submission").submit();
} else {
e.preventDefault();
alert("Please make sure all required information has been provided before submission.")
}
});
Create a div at the bottom of your form. Style it's display to none and give it a unique id.
<div id="checkBoxes" style="display:none;"></div>
When you go to clone the check boxes from your jQuery dialog set their location to:
document.getElementById("checkBoxes").innerHTML = varWithCheckBoxes;
This will place all of your check boxes inside an invisible div that will have no affect on your layout and will still be submitted along with your form. In addition if the need arises to repopulate that list of check boxes to make changes you can simply grab them from the div and place them back in the dialog box.
For a basic HTML form, I would like to seperate the form into three tabs, each tab will contain certain fields, and when submit the form I wish all data in the three forms will be able to submit.
So I have a menu created by <ul> and <li>
<ul class="subnav">
<li class="subnav0 current">Tab1</li>
<li class="subnav1">Tab2</li>
<li class="lastItem subnav2">Tab3</li>
</ul>
and below this menu, I have three divs that represent each of the tab:
<div class="tab1"></div>
<div class="tab2 displayNone"></div>
<div class="tab3 displayNone"></div>
The input controls elements will be put into each of the tab divs. And the javascript in the menu nav bar will control which tab to display by call show() & hide() method of each div. (Using jQuery).
Now my problem is:
1) I want to be able to submit the whole form (all controls within three divs). However, html forms won't submit input controls within a displayNone div, which means I will only be able to submit the data within the tab which I am currently viewing but not the other two tabs.
2) I also want to do some javascript functions on hide elements when initialize the form in tab2 or tab3. However, since they are display:none, the javascript will not have any effect.
So is there any way that I can somehow hide the div, but also be able to submit the form and do any javascript operation on it?
According to the W3C display:none controls may still be sent to the server, as they are considered successsful controls
17.13.2 Successful controls
A successful control is "valid" for submission. Every successful
control has its control name paired with its current value as part of
the submitted form data set. A successful control must be defined
within a FORM element and must have a control name.
However:
Controls that are disabled cannot be successful.
If a form contains more than one submit button, only the activated
submit button is successful. All "on" checkboxes may be
successful. For radio buttons that share the same value of
the name attribute, only the "on" radio button may be
successful. For menus, the control name is provided by a
SELECT element and values are provided by OPTION elements. Only
selected options may be successful. When no options are
selected, the control is not successful and neither the name nor
any values are submitted to the server when the form is
submitted.The current value of a file select is a list of
one or more file names. Upon submission of the form, the contents
of each file are submitted with the rest of the form data. The file
contents are packaged according to the form's content
type. The current value of an object control is determined by
the object's implementation.
If a control doesn't have a current value
when the form is submitted, user agents are not required to treat it
as a successful control.
Furthermore, user agents should not consider the following controls
successful:
Reset buttons. OBJECT elements whose declare attribute has been set.
Hidden controls and controls that are not rendered because of style
sheet settings may still be successful.
For example:
<FORM action="..." method="post">
<P>
<INPUT type="password" style="display:none"
name="invisible-password"
value="mypassword">
</FORM>
will still cause a value to be paired with the name
"invisible-password" and submitted with the form.
In any case if that doesnt seem to be working why not try jQuery serialize() or serializeArray() on each form and concatenate the values and ajax them back to the server.
On your first point, just because an input is display none, doesn't mean that it will not submit those fields.
On your second point, I don't quite follow. Are you saying that when you open one of the tabs, you want to do some action on the content? If so, then JQuery UI allows you to do this:-
http://jqueryui.com/demos/tabs/#event-show
Can you give a more complete example, including the form tag and some inputs?
I have been doing some research on a good way to clear a jQuery form.
I have a couple of ideas but I want to know if someone has a better way.
I know about using reset, but sometimes it is necessary to set a field back to a particular value that may not be accomplished by reset. (ie. if a form starts with some pre-filled data and you want to clear it)
I have read some discussion here: Resetting a multi-stage form with jQuery
But I have another idea that I will post as an answer. Please let me know what you think and if you have a better solution.
More Information:
For example I have an address form. It has a couple of inputs, selects, radios, etc. along with a copy into new button and a clear button. By default I want to have this particular radio selected to option 1.
<div id = "AddressList">
<div class = "Address">
<input type="radio"/> --obviously with some options here
<button>copy into new</button>
</div>
</div>
The user selected option two and clicks copy into new. So I say something like on the click of the click of the copy into new:
$("#addressList").append($(this).closest("#Address").html());
In the second address the secon radio button is selected. The user selects the third radio button. At this point clicking the reset button would reset the input back to option two not option one.
My solution would be to add the attribute called clear.
Then say $([clear]).val($(this).atrr('clear'))