I am having a form in which once I submit, all would go back blank as initial. I have implemented Sumo Select plugin for the dropdowns. When the form is submitted no changed on dropdown's value or text. No attempts are helping here. I will share the code below
HTML
<div class="col-lg-6">
<div class="input-group mb-3">
<select value="" name="_fromDrop" id="_fromDrop" class="SlectBox form-control">
<?php echo load(); ?>
</select>
</div>
</div>
JQUERY FORM SUBMISSION
$(document).ready(function(e){
$("#form").on('submit', function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'add.php',
data: new FormData(this),
dataType: 'json',
contentType: false,
cache: false,
processData:false,
async: false,
autoUpload: false,
success: function(response){
$('.statusMsg').html('');
if(response.status == 1){
$('#form')[0].reset(); //FORM TO RESET AFTER SUBMISSION
$('.statusMsg').html('<p class="alert alert-success">'+response.message+'</p>'); // REPONSE MESSAGE
postOrderSave(); //TEST METHOD TO RESET DROPDOWN
}else{
$('.statusMsg').html(alert(response.message));
}
$('#form').css("opacity","");
$(".submit").removeAttr("disabled");
}
});
});
});
Method to RESET
function postOrderSave(){
//Order From
$('#_fromDrop[value="Name List"]').text('Name List');
}
Where am I making the Mistake? Please help on this.
If you look at that plugin documentation to set selected value in your select-box you can use :
$('select.SlectBox')[0].sumo.selectItem('Name List');
Related
Hello I am trying to upload data to the database suing ajax call I have created a script but the problem is that I had a textarea but for some reasons i CHANGED that textarea to and editable div now my question is how do i get data from that div
<form method="POST" action="" id="post" enctype="multipart/form-data" onsubmit="return false;">
<ul>
<li>
<i class="fa fa-photo"></i> Upload A Photo / Document
<input type="file" name="image" />
</li>
</ul>
<div id='display'></div>
<div id="contentbox" contenteditable="true" name="post_dt">
</div>
<input type="submit" id="sb_art" class="btn_v2" value="Start Discussion" />
</form>
And this is my ajax script created for uploading data
$(document).ready(function(e) {
$("#post").on('submit', (function(e) {
$(document).ajaxStart(function(){
$("#load").css("display", "block");
});
$(document).ajaxComplete(function(){
$("#load").css("display", "none");
});
var form = this;
var content = $("#contentbox").html();
$.ajax({
url : "url/demo/forums/post_forum",
type : "POST",
data : {new FormData(this), content: content},
contentType : false,
cache : false,
processData : false,
success : function(data) {
$("#data_update").prepend($(data).fadeIn('slow'));
form.reset();
}
});
}));
});
You're using the correct method to get the content from the editable element: html(). Your issue is how you're sending the data. When sending binary data through FormData you cannot place that inside an object to be encoded. Instead, the additional data must be added to the FormData using append(). Try this:
$("#post").on('submit', function(e) {
$("#load").show();
var form = this;
var formData = new FormData(this);
formData.append('content', $("#contentbox").html());
$.ajax({
url: "http://tfsquare.com/demo/forums/post_forum",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData: false,
success: function(data) {
$("#data_update").prepend($(data).fadeIn('slow'));
form.reset();
$("#contentbox").empty();
},
complete: function() {
$("#load").hide();
}
});
});
Also note that I changed your use of ajaxStart() and ajaxComplete() to use the complete method. Defining new global AJAX handlers on every submit of the form is rather redundant.
I have fetched the data from database using ajax and i am showing it to the user using javascript confirm dialog. But even after user selects cancel option, form is being submitted, but I want to submit a form only when user wants to proceed further by selecting OK in confirm box. Here is my code
<form class="form-horizontal form-bordered" method="post" id="ncell" action="formaction">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<div class="form-group">
<label class="col-md-3 control-label" for="inputSuccess">Amount</label>
<div class="col-md-6">
<select class="form-control mb-md" name="amount" id="amount">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
</div>
</div>
<div class="input-group mb-md">
<button type="submit" class="btn btn-warning btn-sm" id="sub">Submit</button>
</div>
</form>
and my javascript
<script>
$("#ncell").submit(function(e){
var selectedVal= $("select option:selected").val();
$.ajax({
type:"GET",
url: "/getdollarvalue",//put y
data:{ value:selectedVal},
contentType: "application/json; charset=utf-8",
dataType: "Json",
success: function(result){
return confirm(result.nrs); // Note Send the Json Object from the server side
}
});
e.preventDefault();
});
</script>
I am now getting the confirm dialog when user clicks the submit button. I just want to proceed further only when user clicks OK in confirm dialog.
<script>
$("#ncell").submit(function(e){
var selectedVal= $("select option:selected").val();
$.ajax({
type:"GET",
url: "/getdollarvalue",//put y
data:{ value:selectedVal},
contentType: "application/json; charset=utf-8",
dataType: "Json",
success: function(result){
if(confirm(result.nrs)){
$("#ncell").submit();
}
}
});
return false;
});
</script>
or you can use e.preventDefault(); in place of return false.
You can change the button type of your button from submit to button like
<input type="button" class="btn btn-warning btn-sm" id="sub"/>
to avoid automatic submit
If you want to submit the form when the user presses the ok button, you will need to bind a click event to the ok button to submit the form.
See example below.
$('.ok-btn').click(function(){
var data = $('form').serialize();
// your ajax to submit the form and handle the response.
$.ajax({
})
});
hope this help.
You can put ajax call in function and call it from confirm dialog function
also you should add return false on submit click to prevent the default form submit action:
$('#submit').on('click', function() {
confirmFunction('Are you sure you want to...');
return false;
}
function confirmFunction(message) {
//show confirm dialog ( ok - cancel )
$('#confirm').show();
$('#confirm p').innerHTML(message);
$('.ok').on('click', function(){
ajaxSubmit();
$('#confirm').hide();
});
$('.cancel').on('click', function(){
$('#confirm').hide();
});
}
function ajaxSubmit() {
var selectedVal = $("select option:selected").val();
$.ajax({
type: "GET",
url: "/getdollarvalue", //put y
data: {
value: selectedVal
},
contentType: "application/json; charset=utf-8",
dataType: "Json",
success: function(result) {
return confirm(result.nrs);
}
});
};
I have a problem with submiting my "form" with json. Its not form in traditional way, i will post a code now:
$('#select').on('change', function() {
document.getElementById("info").setAttribute("data-info", this.value);
})
$('#info').on('click', function() {
var id = $(this).data('info');
add(info);
});
function add(info) {
$.ajax({
type: 'get',
cache: false,
contentType: content_type,
beforeSend: function(xhr) {xhr.overrideMimeType(content_type);},
data: {'action': 'info_add', 'info': info },
url: sitepath + 'info/all',
success: function() { update(); }
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="select">
<option value="1">data1</option>
<option value="2">data2</option>
<option value="3">data3</option>
<option value="4">data4</option>
</select>
<div id="info">Button</div>
So as you see, when select is changed it adds "data-info" attribute to div. And when div is pressed it send data-info to php script. And the problem is that it always send the same value. But after refresh it sends fine only once and than again the same value as first. Its hard to explain but here is example:lets say that i change select to "data2" and press on div. It sends "2". But then when i change it to "data3", and press on div, it still sends "2", not "3". There is no cache set or something. Sorry for bad english and thanks in advance :)
Use jQuery for setting if you are also going to be reading it with jQuery
Change
document.getElementById("info").setAttribute("data-info", this.value);
to
$"#info").data("info", this.value);
Still wondering why you are using data atrrbutes when you are not just reading the value on demand.
add($('#select').val());
You are using confusing code, you can achieve the same using:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="select">
<option value="1">data1</option>
<option value="2">data2</option>
<option value="3">data3</option>
<option value="4">data4</option>
</select>
<div id="info">Button</div>
<script>
$('.product__cart, .stock-product__cart').on('click', function() {
var info = $('#select').val();
$.ajax({
type: 'get',
cache: false,
data: {'action': 'info_add', 'info': info },
url: sitepath + 'info/all',
success: function() { update(); }
});
});
</script>
So here I have two dropdowns:
<select id="CountryId">
<option value="16">UK</option>
<option value="17">Germany</option>
<option value="18">Italy</option>
<option value="19">Spain</option>
</select>
<select id="CityId"> </select>
And in the app I have a php function which returns a list of cities by the country's ID:
{"63":"Rome","65":"Palermo","72":"Torino","73":"Milan"}
What I try to achieve is onChange of the first dropdown to take the country's ID and populate the second list with the returned cities.
I try to achieve it with this AJAX call, and tried to debug it, but nothing seems to work. The var data is being picked up, but nothing else happens. Here is the snippet:
$('#CountryId').change(function(){
var data = $('#EventCustomerId option:selected').val();
$.ajax({
type:'POST',
async: true,
cache: false,
url: <?php echo Router::url(array('controller'=>'projects','action'=>'getbycustomer')) ?>,
success: function(response) {
jQuery('#CityId').html(response);
},
data: data
});
return false;
})
I am not quite secure about the way of filling the second dropdown with the response. The response is returned in plain HTML in JSON.
Any help is much much appreciated.
have you tried with putting async to false?
$('#CountryId').change(function(){
var data = $('#EventCustomerId option:selected').val();
$.ajax({
type:'POST',
async: false,
cache: false,
url: <?php echo Router::url(array('controller'=>'projects','action'=>'getbycustomer')) ?>,
success: function(response) {
jQuery('#CityId').html(response);
},
data: data
});
});
can you post your response here if the call should work now
i want after click on #value(VALUE) get value input:checkbox with .serialize() ?
EXAMPLE: http://jsfiddle.net/tKBJ2/40/
$('#value').click(function(e){
e.preventDefault();
alert("this alert only after click on '#value'");
$('.table_show tr').each(function(){
if ($(this).prop('checked')) {
var dataString = $('.table_show').serialize(); // This don't work
alert(dataString);
$(this).parent().parent().fadeOut("slow");
$.ajax({
type: "POST",
url: "http://localhost/admin/customer_size/delete",
data: dataString,
cache: false,
success: function(){
},
error: function(data){
alert('Load was performed.');
}
})
}
})
});
serialize() is used to get query string from the inputs of a form, you should check if the selector select a form element or not.
cf jquery doc : http://api.jquery.com/serialize/
Encapsulate your div table_show in a form, and do serialize on this form:
<form class="myForm">
<div class="table_show">
rest of your code
</div>
</form>
Then in your js :
var dataString = $('.myForm').serialize();