Im currently loading my pages in Codeigniter using ajax for sections of the page.
but, when i press submit on one of the loaded forms, i dont get the response out from it. its like the form never was sent. im exspecting the layout to be proccessed, instead it returns the same layout as if it wasnt proccessed.
How can i make so, when pressing submit button on the loaded form data, that it will be proccessed by the same url, and then load the new response to the view?
piece of code:
$("form").submit(function() {
$.post($(this).attr("action"), $(this).serialize(), function(data) {
$(".main_center").html(data);
});
return false; // prevent normal submit
});
piece of html:
<form method="POST" action="/crime">
<input type="hidden" name="crimeinput" id="crimeAction" value="123">
<input type="submit" value="do" name="docrime" id="krimsubmit" style="display:none">
</form>
EDIT:
After more looking into it, it seems like only the crimeInput variable is sent to the server, and not the docrime. How can i make it able to send the submit name aswell?
As per the docs for serialize:
Note: Only "successful controls" are serialized to the string. No
submit button value is serialized since the form was not submitted
using a button. For a form element's value to be included in the
serialized string, the element must have a name attribute. Values from
checkboxes and radio buttons (inputs of type "radio" or "checkbox")
are included only if they are checked. Data from file select elements
is not serialized.
So if you want that field to be passed, you'll have to add it in a different way, perhaps as another hidden input.
Related
I am writing a practice website using jQuery's ajax.
Currently I have 3 buttons, each of which, when clicked, shows different contents with forms using ajax call. The contents are stored in different files. Let's say you enter "AAA" in the form in the content shown after clicking the first button. Then you click on the second button, which will replace the first content with the new second one. And you enter "BBB" in the form on there. What I want to achieve is, when you do this, I don't want the page to forget what you typed in the first page (or before you changed the page using ajax call), and at the end, you press SUBMIT button, which is common in all buttons' content. Then, I want the webpage to submit both "AAA" and "BBB" for more computation.
Is this ever possible?
This is kind of like a pizza website. Assume that there are 2 tabs on the website, one for pizza dough option, and the other for topping option. Also assume the pagenation of the tabs happens using ajax by asynchronously displaying the contents. When you choose options in pizza dough tab, and you change the tab to select topping options. Then you finally place the order, which reflects customers' option for both dough and topping.
How could you possibly implement this? Any advice would be greatly appreciated.
Do I need a database using SQL? Since this is a simple practice website, it does not have to remember the customer's options once you submit the form and they close the page.
Here is some portion of my code since I cannot write them all. I also omitted some unimportant parts.
php file1:
<script>
$(document).ready(function(){
$(".dough, .topping").click(function(){
$.ajax({
url: /*URL is either dough.php or topping.php*/
success: function(data){
$(".result").html(data);
},
error: function(data){
alert("error");
}
});
});
});
</script>
<button class="dough">Dough</button>
<button class="topping">Toppings</button>
<div class="result"></div> <!--Here I want to show the content with ajax-->
php file2 (=dough.php) and file3(=topping.php): /*This is the form-containing files and both have the same structure */
<form action="confirm.php" method="POST">
<!--Pizza's dough and topping photos, price and name etc-->
<input type="text" name="******"> <!--This is the input form-->
</form>
In this case, I feel like I should have the final "submit" button outside the form tag because the submit button is common and should stay at the bottom of the page during the course of pagenation.
<form action="confirm.php" method="POST">
<!--Pizza's dough and topping photos, price and name etc-->
<input type="text" class='myValue' name="******">
<!-- this button is for saving the input entered above; for topping form give 'toppings' class-->
<input class='option-button pizza-dough' type='button' value='select'/>
</form>
Add event handler for the above form(s)
$('.result').on('click','.pizza-dough,.toppings',function(e){
//using on() because forms are dynamically added
var myValue = $(this).siblings('.myValue').val();
if(this).hasClass('.pizza-dough') {
localStorage.setItem('pizza-dough', myValue);//store the value in localStorage
}else{
localStorage.setItem('toppings', myValue);//store the value in localStorage
}
});
Now, suppose you have following common submit button
<input type='button' value='submit' class='submit-values'/>
Add event handler for this button to submit the values
$('.submit-values').click(function(e){
var dataToSend = {'pizza-dough':localStorage.getItem('pizza-dough'),'topppings':localStorage.getItem('toppings')};
$.ajax({
url: /*submit url*/,
method: "POST",
data: dataToSend,
success: function(data){
//handle success
},
error: function(data){
//handle error
}
});
});
Adding validation for localStorage values is left for you.
Read more about localStorage and sessionStorage to choose what best suits you.
The Goal:
Use an ajax call to either bring back information from database if the user supplied correct information, or if the user is a new user then it will return redirectToAction and send the user to another form. I want to do all of this using either parsley or bootstrap validator (I want to use these tools so that I can put the validator in the input and once I click on submit it will validate the form, but will not submit it. I also want it to have the same look, so the fields highlight similar to http://1000hz.github.io/bootstrap-validator/ The ajax call will handle the decision)
The problem:
Here is a similar form:
<form action="" id="application">
First Name: <input type="text" name="first" required/>
Last Name: <input type="text" name="last" required/>
<button type="submit">Submit</button>
</form>
When one clicks on this form, if the user has not supplied the first and last name it will not submit the form.
What I want it to do is if the user has supplied this information it will not go to the action but will instead execute the ajax call and never submit the form from the button press similar to $(button).click(function (){//do stuff});(the ajax call will handle the submission, my guess here is that we can substitute this ajax call for any JavaScript function).
Finally:
I have read about the e.preventdefault but it did not seem to work for me. How can I get the form to validate the inputs but never actually submit (unless the ajax allows it to). Can you give me an example of how I would do this? Or is this something that cannot be done? Should I do something similar to this Validate Form preventing form submission
Add an onsubmit event on the form, for example,
<form onsubmit = "DoSubmit(this);return false;">
DoSubmit: function()
{
//validate the form and decide submit or not
if($(form).valid())
{//if form valid, this is done by form validation itself
$(form)[0].submit();
}
else
{
//do nothing or do whatever
}
}
Well, I have a lot of input fields in a form, some of them are like this:
<input name="agents[]" type="file" />
Moreover suppose there is a plus button besides this field like this:
<img src="plus.jpg" id="some_id" />
A user can add more agents field in addition to the one field present already.
So I was wondering how would I handle these kind of input fields when submitting form data through Ajax? Using JavaScript objects perhaps?
What's the main problem?
For Ajax uploading i'm using https://github.com/blueimp/jQuery-File-Upload
For handling dinamic form contents i use jquery .serialize()
Like this
var info = $("#additem").serialize();
$.post('/url.php', info, function(data) {
// response
}, 'json');
"additem" is the id of the form
<form id="additem">
I have a html form with some input fields that need validation:
<input type="text" id="hrs-edit-oib" name="oib">
I also have two validators on it. So with the new forms it works great. But with the prepopulated forms, it doesn't work.
I believe it is because the validators are set to work on a "keyup" event:
createEmployeeForm.addValidation("hrs-edit-oib", Alfresco.forms.validation.mandatory, null, "keyup");
Is there a way to tell the validator to process the form rigth away, if it has been prepopulated on the server side?
Here's an example:
I load a page with markup:
"<input type="text" name="myid" value="preloaded" id="myid" />
And lets say that the value of "myid" needs to be longer then two chars (which is the case here). But there was no keyup and my Save button is disabled until I click into that field and press tab or something.
Thanks
Ok here is the deal: Im using BeginRouteForm to submit a search. Anyway, when the button is not set to submit and I click the button, it runs the search just fine and it behaves as it should, meaning that the content is rendered properly. When the button IS set to a type of submit and the button is clicked, the content that is returned is simply some text and the HTML is not rendered at all.
It is important to note that the controller is attempted to return a partial view that is using javascript to replace some of the content using ajax (this means the content type is 'text/javascript').
Controller Method:
public ActionResult Search()
{
[Do Some Work]
return JsView("Index.js");
}
JsView("Index.js") just sets the content type to 'text/javascript' and returns the partial view that coincides with the parameter that was passed
Form Snippit:
<div style="float:right;">
#using (Html.BeginRouteForm(ControllerActionName, SearchRouteValues, FormMethod.Get, new { id = "worklistSearch" }))
{
<input type="text" placeholder="Search Cases" id="SearchCriteria" name="SearchCriteria" value="" />
<input class="search image-button no-text filter" value="Filter" id="worklist-search-button" />
}
</div>
PS: I seem to need to make the button a type of submit in order to get the form to submit using the enter key.
I would like to know how I can make this work so that it renders the view properly and allows me to click the submit button.
Based on your description, it appears that you want to capture the submit event for your form, then make your AJAX call to your controller. If this is what you want, you then need to prevent the submit event from propagating, so that no POST occurs.
Using jquery, do something like this:
$("form").submit(function() {
// make AJAX submission to controller
// process JS returned from controller
// stop submit event from propagating
return false;
});