I have form name as myForm with two elements dropdown and autocomplete() textbox. If an end-user selects the value on the dropdown and give a suggestions on the autocomplete (tokens) and click an apply button to get the search results matching our inputs.
My Screen Input : HTML Screen
My problem here is to retain the form values after submitting the form through jquery. My code is here:
$("#myForm").submit(function(){
$('#myForm').attr("method","post");
$('#myForm').attr('action','http://localhost:8080/LscaSearch/');
$('#myForm').submit();
});
I wanted to retain the form values after submit the form. Any help on this?
You can use asynchronous form submission using jQuery AJAX. That way you can show the results on the same page without having to refresh it.
Related
I have created a form with 5 tabs in jquery-steps.
How to clear the form, once a i close the form and again reopen i get all fields are filled with the values.
I want to reset the form without page refresh..
Thanks
$("form input").val("");
Something like that, with jQuery.
i have a form in html with two submit buttons either one is enabled. if user is filling the form submit is enabled and the other button is diasbled.
when user clicks submit button other button gets enabled and displays all the field values with read only .when the 2nd button is clicked values are enterd in databse, using jquery or javascript
is it possible
$('input[type="text"]').each(function(){
$(this).attr('readonly','readonly');
});
If I read your question correctly, the first button does not actually submit the form?
$("#firstbutton").click(function() {
$("#myForm input").attr("readonly", "readonly"); //this makes the input fields readonly
$("#secondbutton").attr("disabled","disabled"; //this enable the second button
$(this).removeAttr('disabled'); //this disables the #firstbutton
}
Make sure that:
On page load, the second button is already disabled.
If you have dropdownlists in your form, you'll have to set those readonly as well, as they are not <input> but <select> items.
the firstbutton should not be of type="submit", it should either be of type="button" or be a <button> tag instead.
Your secondbutton can be a regular submit button, nothing fancy required. As long as your form posts to the correct actionlink, the form will be submitted fine.
Never use disabled attribute on your input fields. If you do, the form submit will ignore these fields and not post them as intended. You're already doing it right by using readonly.
$(document).ready(function(){
$('#myForm').submit(function(e){
e.preventDefault();
$myForm = $(this);
$myForm.find('input[type=submit]').attr('disabled','disabled');
$myForm.find('input#other-button').attr('enabled','enabled');
//do a $.post request
$.post('/path/to/my-file.php',
$myForm.serialize(),
function(data){
// make something after the post is complete
$myForm.find("input[type=text]").attr('readonly','readonly');
},
'json');
});
});
I have a page which has a form with 10 fields including select boxes, radio fields and text boxes. It takes the parameters, queries the database and prints the results on the same page.
I am also using $_POST[''] on the same page to hold on to the form values and not lose it.
I have many methods which use the .click function in this page. They all work fine before the first submit. After the first submit with all the parameters, the .click function stops working. None of the jquery code with .click function work.
Does this have anything to do with the server returning information on the same page or with the way im holding on to the form information using $_POST[''] ?
Here is a piece of code that uses .click function.
<!-- Clear form data after form submission -->
<script language="Javascript">
function resetForm($form) {
alert("resetting form");
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox')
.removeAttr('checked').removeAttr('selected');
}
</script>
<script language="Javascript">
$(document).ready(function() {
$("#clear_form").click(function(){
alert("clear form button clicked");
resetForm($('#search_query'));
});
});
</script>
The form is submitted in the following manner.
<form method="POST" action="samepage.php" name="form1" id="formid" onsubmit="return validate_Form()">
# Bunch of text fields, select boxes, radio buttons,
<input type="submit" value="Submit" id="submit">
At the very beginning of the page I collect the form data to automatically fill in the form fields after the submit to retain the form data.
$x = $_POST['x'];
And if the form submit is succesfull (.ie passing all the form validation ) i collect the data again to query the database and print the results on the same page.
$xx = $_POST['x]
I have a custom validation funciton that i wrote which basically just checks if the fields are empty or not, nothing fancy. Its setup in such a way that atleast one field must be entered in order for the form to be submitted to the server.
After researching more on this problem, i finally found a solution.
$('#buttonid').live('click', function () {
#Your code here
});
I still need to understand why this is happening. I'll re edit the answer when I find the root cause to the problem.
How can I get the data that is submitted from a form with jQuery?
I know I can bind the submit function to the form
$('form').bind('submit',function(){});
and I know I can serialize the data in the form:
$('form').serialize();
But how do I get the data that was actually submitted from the form? Like if there are two submit buttons, I want to know which one was pressed. If I handle the submission with PHP I can do that, but ideally I want to get a copy of the submitted data, then return true so that the form goes on to be processed by PHP normally.
Thanks!
The pressed submit button should be available in the serialized field list - and the other submit buttons shouldn't be in there.
However, apparently jQuery does not add submit buttons in there (testcase). See http://forum.jquery.com/topic/submit-event-serialize-and-submit-buttons-get-the-button-name for a workaround.
I need to submit just one input field value to a cgi script via a web form.
I've added a couple of extra form controls (a check box and radio buttons) which manipulate the input value depending on the states selected.
When the form is submitted, the extra form field values are submitted as well which breaks the cgi script (which I don't have access to). I removed the 'name' attribute from the check boxes so they are not submitted but cannot do this for the radio buttons as it breaks their grouping.
How can I prevent radio button values from being submitted?
You can add a disabled attribute to them in the submit handler, this will prevent them from being serialized, either by jQuery or a normal <form> submission. For example:
$("#myForm").submit(function() {
$(this).find(":radio, :checkbox").attr("disabled", true);
});
Or you can .serialize() only the elements you want, for example:
$.post("myPage.cgi", $("#myForm input[type=text]").serialize());
Make them "unsuccessful". There are several ways to achieve this:
http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2
It is also possible to have two different forms: one that has visible form elements and one that has a hidden input that represents the end result to be submitted. You can either attach onchange handlers to your visible form elements so that they call some JavaScript to update the invisible field, or you can run a function as part of the onsubmit handler to set the invisible value directly before it is submitted.
Here's a jsFiddle demonstrating the second approach (the onsubmit handler): http://jsfiddle.net/gtU4J/