jquery submit form with select not working - javascript

I want to perform a submit with AJAX and select list. I made a simple alert but nothing. Did I misss something ?
This is my html:
<form id='bill_action' action='post'>
<input type='hidden' name='bill_id' value='".$v1['id']."'>
<select name='action' onchange='this.form.submit()'>
<option value='test1'>test1</option>
<option value='test2'>test2</option>
</select>
</form>
my JS:
$("#bill_action").submit(function() {
alert('hello world'); //for test
$.ajax({ //make ajax request to bill_action.php
url: "bill_action.php",
type: "POST",
dataType:"json", //expect json value from server
data: bill_id
}).done(function(data){
//on Ajax success
})
})

try this :
<form id='bill_action' action='post'>
<input type='hidden' name='bill_id' value='".$v1['id']."'>
<select name='action' onchange='myfunction'>
<option value='test1'>test1</option>
<option value='test2'>test2</option>
</select>
</form>
function myfunction() {
alert('hello world'); //for test
$.ajax({ //make ajax request to bill_action.php
url: "bill_action.php",
type: "POST",
dataType:"json", //expect json value from server
data: bill_id
}).done(function(data){
//on Ajax success
})
}

Related

AJAX loaded select, select option by value

How to select option by value, if the select is loaded via AJAX
index.php
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="data"></div>
</body>
<script>
function LoadSelect() {
var post_data = {
token: "test"
};
$.ajax({
type: 'POST',
url: 'load_select.php',
data: post_data,
dataType: "json",
beforeSend: function() {},
success: function(data) {
$("#data").html(data["msg"]);
},
complete: function() {}
});
}
$(document).ready(function() {
LoadSelect();
});
</script>
</html>
load_select.php
<?php
// Value from the database
$gender = "female";
$html = '
<select class="form-control" id="gender" name="gender">
<option value="female">Female</option>
<option value="male">Male</option>
</select>
<script>
$("#gender").val("'.$gender.'");
</script>
';
echo json_encode(array('msg' => $html));
Tried this code, but it's not working.
The problem solved, the $gender variable gets wrong value from the database like "f" and not "female".
Typically changing the value of a select via code should be followed by triggering the change event, like this $("#gender").trigger('change');
If I understand you correctly then you override the select with html from your ajax request. In order to maintain the value you will need to store the original value, then override the html and then restore the original value. See this snippet below.
Better would be to not override the html element with your ajax call but only update the information that need to be updated.
$("#gender").val("male");
//Lets pretend this onclick handler is your ajax succes handler.
$('#MimicAjax').on('click', function(){
//Fake ajax result for demonstraion purpose
var ajaxResult = '<select class="form-control" id="gender" name="gender"><option value="female">Female</option><option value="male">Male</option></select>';
//store the original value
var originalValue = $("#gender").val();
//Do your ajax thingy
$('#data').html(ajaxResult);
//restore original value
$("#gender").val(originalValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="data">
<select class="form-control" id="gender" name="gender">
<option value="female">Female</option>
<option value="male">Male</option>
</select>
</div>
<button id="MimicAjax">MimicAjax</button>
If you just want to set the value after you added the html with ajax then just use that line within the succes handler after you changed the html.
$.ajax({
type: 'POST',
url: 'src/ajax/load_select.php',
data: post_data,
dataType: "json",
beforeSend: function() {},
success: function(data) {
$("#data").html(data["msg"]);
$("#gender").val("male");
},
complete: function() {
}
});

select option value send to php file with ajax

I have a select dropdown box
<select name="status" id="status" onchange="changeStatus()">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
<option value="step_4">step_4</option>
</select>
And my javascript
<script>
function changeStatus() {
$('select.changeStatus').change(function(){
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: $('select.changeStatus').val()},
dataType: 'html'
});
});
});
</script>
So I want the value selected from the select dropdown box send to the php file(update_status.php)
Select id using #. Since you are already using javascript onchange event in select field so no need to use jquery change() event. jQuery use # to select id and . to select class. since you are using id="status" so you must use # to select the id. The way you are trying to collect the value of the select field in this line $('select.changeStatus').val() is wrong. Because there are no class named changeStatus there.
function changeStatus() {
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: $('#select').val()},
dataType: 'html'
});
}
$('#status').val() is used to get value of select options.
So try this
<script>
function changeStatus() {
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: $('#status').val()},
dataType: 'html'
});
});
</script>
or
<script>
function changeStatus() {
$.post("update_status.php", {changeStatus: $('#status').val()}, function(data, status){
});
}
</script>
You don't need to mix jQuery and inline JS
HTML - we'll use your selects name in the function. I've removed the inline function call:
<select name="status" id="status">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
<option value="step_4">step_4</option>
</select>
jQuery - I have taken the code out of the function you were calling inline, it was not needed.
<script>
$(document).ready(function() {
$('select[name="status"]').change(function(){
var status = $(this).val();
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: status},
dataType: 'html'
});
});
});
</script>
You can directly test when the select changes and grab its value right then. Here is an EXAMPLE
I have also wrapped the jQuery in a document ready handler. Depending on where you're loading the script in your page you may need to do this to make sure that your jQuery is run as soon as the DOM elements have been loaded.
Remove the onchange field from select and put the below code to your script and this is working. Use JQuery post functionality instead.
$("#status").change( function() {
alert($( this ).val());
$.post('update_status.php', { changeStatus: $(this).val()},
function(response) {
console.log( response);
});
});
<select name="status" id="status" onchange="changeStatus(this.value)">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
<option value="step_4">step_4</option>
</select>
function changeStatus(value) {
$.ajax({
type: 'post',
url: 'update_status.php',
data: {'get_data:value'},
success: function (response) {
document.getElementById("loadto").innerHTML=response;
}
});
}
I Hope it will be helpful .....

preventing form auto submit ajax laravel

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);
}
});
};

Assign javascript variable to php variable

How to pass javascript variable that came from select option to a PHP variable?
I want to set PHP variable depending on user selection.
I tried that code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("select[name='sex']").change(function () {
var submitSearchData = jQuery('#extended-search').serialize();
var selectedValue=$('#sex').val();
jQuery.ajax({
type: "POST",
data: 'selected=' + selectedValue
url: "ajax.php",
success: function () {
// alert(submitSearchData);
alert(selectedValue);
}
});
});
});
</script>
<form id="extended-search" >
<div class="input-container">
<select class="select" name="sex" id="sex">
<option value="0">All</option>
<option value="1">M</option>
<option value="2">F</option>
</select>
</div>
</form>
<?php
var_dump ($_REQUEST['selected']); //that print NULL don't know why!
?>
You are passing data in wrong format. Data is passed as an object. Please refer below.
$("select[name='sex']").change(function () {
var submitSearchData = jQuery('#extended-search').serialize();
var selectedValue=$('#sex').val();
jQuery.ajax({
type: "POST",
data: {'selected': selectedValue},
url: "ajax.php",
success: function (response) {
// alert(submitSearchData);
alert(response);
}
});
});
Is not possible in the same instance of time:
yourfile -> ajax -> yourfile (here is the value, but you can't see this in your current webpage except that instead of ajax, send post form)
I hope this will help you...
dataType: "html",
data: {'selected': selectedValue},
and then u can get it via $_POST/$_REQUEST array since you have set your type to post.
$_REQUEST is null because it is not related to the ajax request you send. Try this for example:
<?php
if (isset($_POST["selected"])) {
echo $_POST["selected"];
} else {
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form id="extended-search">
<div class="input-container">
<select class="select" name="sex" id="sex">
<option value="0">All</option>
<option value="1">M</option>
<option value="2">F</option>
</select>
</div>
</form>
<script>
$(function() {
$("select[name='sex']").change(function () {
var selected = $(this).val();
$.ajax({
type: "POST",
data: {
selected: selected
},
url: "ajax.php",
success: function (data) {
alert(data);
}
});
});
});
</script>
</body>
</html>
<?php } ?>
EDIT:
I updated the script and tested it. You had some errors in your code. Hope this works for you.

jQuery ajax "data" field with mixed data

I have a form with some fields in it:
<form id="unit">
<input type="hidden" name="item_id" value="100" />
<input type="hidden" name="name" value="item one" />
<select name="option[1]">
<option value="1">1GB</option>
<option value="2">8GB</option>
</select>
<select name="option[2]">
<option value="3">Red</option>
<option value="4">Blue</option>
</select>
</form>
I want to pass that data over jQuery ajax so I'm using:
$.ajax({
type: 'post',
url: 'index.php?route=product/options_plus_redux/updateImage',
dataType: 'json',
data: $('form#unit :input'),
success: function (data) {
//do something here...
}
});
And that works fine. However, I want to add another bit of data along with the form fields. But I can't figure out the syntax for it. I know since the selectbox is named "option" there it will try to serialize that array. but basically I'm trying to do:
data: $('form#unit :input') +'x=test',
But it comes back very wrong
Any ideas?
try this:
data: $('form#unit').serialize() +'&x=test',
look up about jQuery form serialization
you can see it running here: http://jsfiddle.net/maniator/pfb2c/
var data = $('form#unit :input');
data.x = "test";
.......
url: 'index.php?route=product/options_plus_redux/updateImage',
dataType: 'json',
data: data,
.......

Categories