Is it possible multiple submit button without refresh in a single form and pass data to designed page through database? I have a from(section.blade.php) in which I have 3 section one for man scheduled 2nd for women scheduled and 3rd for child scheduled and only one submit button, but I want on 3 submit button on form for each section, so I could post data like for men(1), women(1+) and child(1+) on single design page. Please tell or give any relevant link or example, Many Many thanks.
Have you tried ajax request and response?
For example . When onclick event fired on button , make a function for onclick event .
I have added a code here .
Html
<button type ="button" onclick="licenseDelete(sendIdorAnyOtherValue);">
Click me to get value
</button>
JS
function LicenseDelete(Get the value) {
var img = key;
var d_id = $("#driv_id").val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
jQuery.ajax({
url: "{{ url('/vehicle/imgdestroy') }}",
method: 'post',
data: {
img : img,
d_id : d_id,
},
success: function(result){
var vehicle=JSON.parse(result);
console.log(vehicle);
//alert(result);
if(result){
toggleAlert();
}else{
$( "Failed . Try again" ).empty();
$("#send_id").attr("disabled", false);
}
}});
}
I'm using ajax to submit pages and return content blocks based on user action for an onboarding sequence.
If have a page which loads and get 1 content element, the user then clicks Yes or No, which loads the next content element into the same space (via ajax).
For some reason my selectors don't seem to be working on that ajax loaded html.
Here is my ajax function which gets the form:
$.ajax({
beforeSend: function() {
$("#loader").toggleClass('progress');
},
type: 'POST',
dataType: 'json',
data: data,
url: baseUrl+'welcome/user_confirmation_form',
complete: function( response ) {
$("#loader").toggleClass('progress');
},
success: function( response ) {
console.log(response);
$("div.welcome-page > .col").html(response.response);
},
error: function( response ) {
$("#next-steps").html(response.response);
}
});
I'm then trying to access the submit button (have tried doing it as a ahref and button type=submit but nothing seems to be selecting the event.
$('div.welcome-page').on('submit', "user_complete", function(e) {
e.preventDefault();
console.log('FOund form');
var user = $(this).serializeArray();
console.log(user);
});
If I view source, the ajax returned HTML is not even in the dom, but it is when viewing the UI normally.
I'm guessing this has something to do with it?
How can I select all the form data?
Any time I click on the button or ahref it just fires the same page again.
If user_complete is a class you are assigning on your submit button in your loaded html, then you are missing a .
$('div.welcome-page').on('submit', ".user_complete", function(e) {
But this will only work if you're using a submit action as this is listening for a submit event. Maybe you want to listen for a click event?
You need to bind the events to your handlers for your newly added HTML elements. Your original call to
$('div.welcome-page').on('submit' ...
Only bound the event handler for the elements that were on the page at that point in time.
You can put your handler into a function ...
var myHandler = function(e) {
e.preventDefault();
var user = $(this).serializeArray();
}
And then after you load the new HTML you need to bind the handler to the event. So, on success with the AJAX you would ...
success: function( response ) {
$("div.welcome-page > .col").html(response.response);
$('div.welcome-page').on('submit', "user_complete", myHandler);
},
I'm trying to disable a submit button until an ajax function is completed.
Right now, I have only been able to figure out how to disable the button for a specified time when the user is typing.
How can I disable the submit button until the ajax data loads? Thank you.
<script>
$('#comment_comment').keyup(function() {
$("#new_comment_button").attr("disabled", true);
setTimeout(function() { $("#new_comment_button").removeAttr("disabled"); }, 2000);
});
$('#comment_comment').preview({ key:'my key',
selector : {type:'rich'},
preview : {
submit : function(e, data){
$.ajax({
dataType: 'script',
url: this.form.attr('action'),
type: 'POST',
data: data
});
},
},
autoplay : 0,
maxwidth : 350,
display : {display : 'rich'}
});
</script>
Disable the button when starts the AJAX with simple JS and enable it when the AJAX request finishes.
It would be something like this
$.ajax({...
success: function(){
submitButton.enable(); // Pseudo-code
},
...
});
You can do several things with the AJAX request. See this post for more information
EDIT: If you want to prevent the double submit request, there is a way to do it but I can't remember :/ and I didn't found it on google.
This is a way to do it, but I don't like it
I'm trying to post a form that contains an instance of tinyMCE editor to an action method using AJAX. My View:
<script src="#Url.Content("~/Scripts/tinymce/tiny_mce.js")" type="text/javascript"></script>
<div>
<fieldset>
#using (Html.BeginForm("SubmitNewTRForm", "LaboratoriesOrdersGrid", FormMethod.Post,
new {enctype = "multipart/form-data", #id = "newTrUploadForm" }))
{
<div style="overflow: hidden;width: 763px; height:312px; border: black solid thin;">
#Html.TextAreaFor(model => model.TestSummary, new {#class="TestSummaryEditor"})
</div>
}
</fieldset>
</div>
In the same view I instantiate the editor:
$(document).ready(function () {
tinyMCE.init({
directionality: "rtl",
width: "760",
height: "300",
language: 'fa',
// General options
mode: "textareas",
theme: "advanced",
plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect,|,sub,sup,|,charmap,iespell,advhr,|,print,|,fullscreen",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,cleanup,|,insertdate,inserttime,preview,|,forecolor,backcolor,|,insertlayer,moveforward,movebackward,absolute,|,blockquote,pagebreak,|,insertfile,insertimage,|,visualchars,nonbreaking,template",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,ltr,rtl,|,cite,abbr,acronym,del,ins,attribs",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
// Skin options
skin: "o2k7",
skin_variant: "silver",
add_form_submit_trigger: false,
// Example content CSS (should be your site CSS)
content_css: "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "js/template_list.js",
external_link_list_url: "js/link_list.js",
external_image_list_url: "js/image_list.js",
media_external_list_url: "js/media_list.js",
// Replace values for the template plugin
template_replace_values: {
username: "Some User",
staffid: "991234"
}
});
});
ANd my AJAX call:
$("form").live('submit', function (e) {
tinyMCE.triggerSave(true, true);
e.preventDefault();
var form = $("#newTrUploadForm");
if (form.valid()) {
$.ajax({
url: '#Url.Action("SubmitNewTRForm")',
data: form.serialize(),
type: 'POST',
error: function (xhr, textStatus, exceptionThrown) {
$("#errorDIV").html(xhr.responseText);
},
success: function (data) {
if (data.success) {
}
else {
}
}
});
}
});
And my AJAX call always returns an error whenever the tinyMCE editor is on the form, removing tinyMCE solves the problem, but why is this happening? I know this issue has been addresses on SO a couple of times already but I've tried all the proposed solutions and none seem to work for me, plus those solutions are somewhat outdated. During serialization in my AJAX call, i get this error:
[MissingMethodException: No parameterless constructor defined for this object.]
Any ideas?
The error I posted and the tinyMCE problem happen to be totally unrelated. The tinyMCE problem was fixed by saving the contents after preventing the default action of the button click, basically changing my AJAX call from:
$("form").live('submit', function (e) {
tinyMCE.triggerSave(true, true);
e.preventDefault();
to:
$("form").live('submit', function (e) {
e.preventDefault();
tinyMCE.triggerSave(true, true);
and the form serialzed properly and the conents of teh editor sent to the action flawlessly.
Totally irrelevant to this question, but that error posted was caused by setting my model property's type as SelectList and the form posting a SelectListItem.
Your error indicates that the model you are trying to bind to in your controller action needs a constructor like
public yourModel
{
public yourModel()
{
//your logic here
}
}
It also doesn't look like you have a 'form' in your view to post back in the first place. I have a feeling that there are multiple errors on top of each other and the paramterless constructor is just the first one.
I have following js code:
window.addEvent('domready', function() {
var trigger = $('sendme');
trigger.addEvent( 'click', function(event){
event.preventDefault()
var sendform = new Form.Request($('newform'), {
onSend: function(){
console.log('sending');
},
onComplete: function(){
console.log('sent');
}
});
sendform.send();
});
});
and form with data:
<form action="index.php?option=com_mycomp&layout=edit&id=1" method="post" name="newform" id="newform" class="form-validate">...
the form submits just fine and I can see changes but I get no logs,
thus cant execute actions that I need
form action is not supposed to give me any response back , it is simple post but shouldn't this work? Do I need to send the form to another file that will give me responses like json and submit my form like that ?
what am I doing wrong ?
Any help is appreciated. Thnx!
small update since post ,
I change the form to send data and receive response via json file but still no response messages. everything is being updated so submit works 100%.
right way is new Form.Request($('newform'),console.log(),{
window.addEvent('domready', function() {
var trigger = $('sendme');
trigger.addEvent( 'click', function(event){
event.preventDefault()
var sendform = new Form.Request($('newform'),console.log(), {
onSend: function(){
console.log('sending');
},
onComplete: function(){
console.log('sent');
}
});
sendform.send();
});
});