With this code I can see each option value printed but the page is refreshed every time I select an option. The server get the post data correctly, so I just need to do it without refreshing.
Thanks. Regards.
<form action="" method="post">
<select name="day" onchange="this.form.submit();">
<option>Please select a date</option>
<option value="Mon">Monday</option>
<option value="Tue">Tuesday</option>
<option value="Wed">Wednesday</option>
<option value="Thu">Thursday</option>
<option value="Fri">Friday</option>
</select>
</form>
<script type="text/javascript">
$('#day').change(function()
{
$.ajax({
type: 'post',
url: "day.php",
data: $("form.day").serialize(),
});
return false;
});
</script>
<?php
include 'day.php'; ?>
day.php
<?php
$day = $_POST['day'];
echo $day;
?>
I think you need this:
e.preventDefault();
//add your id="day"
<select name="day" id="day" onchange="this.form.submit();">
$('#day').change(function(e)
{
e.preventDefault();
$.ajax({
type: 'post',
url: "day.php",
data: $("form.day").serialize(),
});
return false;
});
Update the onchange to call a Javascript function that copies the data to a hidden field in another form, and use Ajax to submit that one instead.
Optionally, you could also submit the data through Ajax directly, without the additional form, but for things that might be done with high frequency, I find it useful to minimize the bandwidth as much as possible.
I could see every option value printed by the <p id=..> without refreshing the page. But the post data is not passed to day.php..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<head>
<script>
function postSelection(selectObject) {
var day = window.dateForm.day.value = selectObject.options[selectObject.selectedIndex].value;
var dataString = "day=" + day;
$.ajax ({
type:"post",
url: "day.php",
data:dataString,
success: function (response) {
$("#list").html(response);
}
});
return false;
}
</script>
</head>
<body>
<form name="displayForm">
<select name="day" onchange="return postSelection(this)">
<option>Please select a date</option>
<option value="Mon">Monday</option>
<option value="Tue">Tuesday</option>
<option value="Wed">Wednesday</option>
<option value="Thu">Thursday</option>
<option value="Fri">Friday</option>
</select>
</form>
<form action="" method="post" name="dateForm">
<input type="hidden" name="day">
</form>
<?php include 'day.php'; ?>
</body>
</html>
Related
I need to submit the whole form when I change a select option and save it to mysql without reload page.
I have this code, but only POST the select option value and I need to POST the hidden values in the form too.
<form class="form-horizontal" method="POST" action='#' name="dateForm">
<input type='hidden' name='cond_acao' class='form-control' value="edit_seccao_formando">
<input type="hidden" name="id_formando" value="<?=$linha_formandos[id_formando];?>">
<select name="id_seccoes" class="form-control" onchange="return postSelection">
<option selected="selected" value="1">car</option>
<option value="2">boat</option>
<option value="3">plane</option>
</select>
<div id='response_seccoes'></div>
<script>
function postSelection(selectObject) {
var id_seccoes = window.dateForm.id_seccoes.value = selectObject.options[selectObject.selectedIndex].value;
var dataString = "id_seccoes=" + id_seccoes;
$.ajax({
type: "post",
url: "url.php",
data: dataString,
success: function(response) {
$('#response_seccoes').html("ok").fadeIn(100).delay(2000).fadeOut("slow");
//$("#list").html(response);
}
});
return false;
};
</script>
</form>
It's possible to serialize instead of especified the strings?
Can anyone help me please? Thank you
you are using Jquery, I suggest you monitor the select button for change using a jquery function like
$("id_seccoes").change(function(){
//call your post method here.
});
Replace your code with this.
<form class="form-horizontal" method="POST" action='#' name="dateForm">
<input type='hidden' name='cond_acao' class='form-control' value="edit_seccao_formando">
<input type="hidden" name="id_formando" value="<?=$linha_formandos[id_formando];?>">
<select name="id_seccoes" class="form-control">
<option value="1">car</option>
<option value="2">boat</option>
<option value="3">plane</option>
</select>
</form>
<div id='response_seccoes'></div>
<script>
$(document).ready(function(){
$('[name="id_seccoes"]').change(function(){
$.post('url.php',$('[name="dateForm"]').serialize(),function(response){
$('#response_seccoes').html("ok").fadeIn(100).delay(2000).fadeOut("slow");
});
});
});
</script>
In my project, I use jqpagination. And I want to define the records of each page, so I use select tag in my web page.
The problem is when I change select tag, the value returned from lstajax.php is not the same. sometimes it is xie1, but sometimes it is xie2.
I have tested, the returned value is random. For example, when i chosed 30 first, the value is xie1. When i chosed 30 next time, the value maybe xie1 or maybe xie2.
My js code:
<link rel="stylesheet" href="jsui/jqpagination.css" />
<script src="jsui/jquery-3.2.1.min.js"></script>
<script src="jsui/jquery.jqpagination.js"></script>
<script>
$(document).ready(function()
{
var rtnv = "<?php session_start();echo $_SESSION['rtNum']?>";
var pgrNum=$('#pgnId').val();
var mpn=Math.ceil(rtnv/pgrNum);
$('.pagination').jqPagination({
max_page:mpn,
page_string:'Page {current_page} of {max_page}',
paged:function(page){
$.ajax({
dataType:'html',
type:"POST",
url:"lstajax.php",
data:{pageNum:page,pgrNum:pgrNum},
success:function(data)
{
$('#div2').html(data);
}
});
}
});
$('#pgnId').change(function(){
var pages="1";
$('.pagination').jqPagination('option','current_page',pages);
var rtnvs = "<?php session_start();echo $_SESSION['rtNum']?>";
var pgrNums=$('#pgnId').val();
var mpns=Math.ceil(rtnvs/pgrNums);
$('.pagination').jqPagination('option','max_page',mpns);
$.ajax({
dataType:'html',
type:"POST",
url:"lstajax.php",
data:{pageNums:pages,pgrNums:pgrNums},
success:function(data)
{
$('#div2').html(data);
}
});
});
});
</script>
My lstajax.php code:
<?php
if(isset($_POST['pageNum']))
{
echo "xie1";
}
if(isset($_POST['pageNums']))
{
echo "xie2";
}
?>
My html code:
<div class="pagination" style="clear:both;display:block;margin-left:40%">
«
‹
<input type="text" readonly="readonly" data-max-page="80"/>
›
»
<label>eachpage:</label>
<select name="pgNum" id="pgnId">
<option value="10">10</option>
<option value="15">15</option>
<option value="20" selected="selected">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
</div>
var options={'trigger':false}
in the method:
base.cassMthod=function(method,key,value)
in the file:
jquery.jqPagination.js
<html>
<head>
</head>
<body>
<form action="area.php" method="get">
<select name="xyz">
<option value="1">option1</option>
<option value="2">option2</option>
</select>
</body>
</html>
I want to send data of value of option as a param to form action with out submit button.
I have seen ajax and jquery but submit button is required every time.
I'll use jQuery syntax for its brevity. You can easily do this in native Javascript also.
Here's an abbreviated version of your form:
<form action="area.php" method="get" id="myform">
<select id="myselect">
<!-- ... options ... -->
</select>
</form>
Have this Javascript run when the page is done loading (note the first line). It's important that the .change() be bound after the form has been rendered.
$(document).ready(function() {
$("#myselect").change(function() {
$("#myform").trigger("submit");
});
});
This will fire the default submit action on the form whenever the select element is changed.
You can use ajax for that as follows:
$(".selectElement").on('change',function(){
$.ajax({
url: "area.php",
method: "POST"
});
});
You can get some documentation on this http://api.jquery.com/jquery.ajax
HTML:
<form>
<select name="xyz" id="mySelect">
<option value="1">option1</option>
<option value="2">option2</option>
</select>
</form>
jQuery:
$(function(){
$("#mySelect").on("change", function(){
var getValue = $(this).val();
$.ajax({
url:'area.php',
type:'get',
data:{ selectValue:getValue },
// get this value #area.php using $_GET['selectValue'];
success:function(response){
// whatever you echoed in area.php, comes in response
}
});
});
});
<select name="xyz" onchange="this.form.submit()">
<option value="1">option1</option>
<option value="2">option2</option>
</select>
You can try using this :
<html>
<head>
<script type="text/javascript">
function call_ajax (str) {
alert(str);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("abc").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "a.php?value="+str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="a.php" method="get">
<select name="xyz" id="abc" onchange="return call_ajax(this.value)">
<option value="1">option1</option>
<option value="2">option2</option>
</select>
</body>
</html>
I want to retrieve districts and state from the database, and also to populate second dropdown list based on first dropdown list. In my code below the values are inserted directly:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="C:\Program Files\BitNami WAPPStack\apache2\htdocs \Prj\Online\jquery-1.9.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var options = $('#test2 option');
$('#test1').on('change', function(e) {
$('#test2').append(options);
if ($(this).val() != 'Select') {
$('#test2 option[value!=' + $(this).val() + ']').remove();
} else {
$('#test2').val('Select');
}
});
});
</script>
<form name="form1" method="post" action="fid1.html">
<select name="test1" id="test1">
<option value="Select">Select</option>
<option value="a">TamilNadu</option>
<option value="b">Kerala</option>
<option value="c">Andhra</option>
</select>
<select id="test2" name="test2">
<option value="Select">Select</option>
<option value="a">Chennai</option>
<option value="a">Trichy</option>
<option value="a">Madurai</option>
<option value="b">Trivandram</option>
<option value="b">Cochin</option>
<option value="b">Azhapuzha</option>
<option value="c">Hyderabad</option>
</select>
</form>
</head>
</html>
for that purpose you should use Ajax call on your first drop box .
Ajax is a server side tools to fetch data from database.
Create a ajax function, for example get_country()
$(function() {
$('#test1').change( function() {
var val = $(this).val();
$.ajax({
url: 'findState.php',
dataType: 'html',
data: { country : val },
success: function(data) {
$('#state').html( data );
}
});
}
else {
$('#state').val('').hide();
$('#othstate').show();
}
});
});
now do your database query on findstate.php and use state div to show particuler state list.
I have a problem to displaying some dynamically created data and showing the submitted data when ajax completed.
HTML - form.html
<form name="myForm" id="myForm">
<strong>Skills 1</strong>
<div>
<select name="Skills[]" id="Skills">
<optgroup label="Programming">
<option value="">-</option>
<option value="Javascript">Javascript</option>
<option value="C++">C++</option>
<option value="C#">C#</option>
</optgroup>
<optgroup label="Multimedia">
<option value="Adobe Flash MX">Adobe Flash MX</option>
<option value="Adobe Fireworks">Adobe Fireworks</option>
<option value="Adobe After Effects">Adobe After Effects</option>
</optgroup>
</select>
</div>
<div>
<input type="text" name="SkillsNumber[]" id="SkillsNumber" placeholder="Number of year using" />
</div>
<div>
<select name="SkillsGrade[]" id="SkillsGrade">
<option value="">Select your skills grade</option>
<option value="Noob">Noob</option>
<option value="Amateur">Amateur</option>
<option value="Professional">Professional</option>
</select>
</div>
</div>
</form>
<div id="result-set"></div>
* This select section can be dynamically added (maximum is 3)
jQuery
$(function(){
$("#myForm").submit(function(){
var formData = $(this).serializeArray();
console.log(formData);
$.ajax({
type: "POST",
data: {
theData: formData
},
url: "theresult.php",
success: function(result){
$("#result-set").ajaxComplete(function() {
$("#result-set").html(result);
});
}
});
return false;
});
PHP - theresult.php
<?php
$data = $_POST['theData'];
$enc = json_encode($data, true);
...
....
.....
?>
The question is what should I do, if I have 3 select (so I have 3 Skills, 3 SkillsNumber, and 3 SkillsGrade) and showing it on #result-set. Already cracking head here.
Sorry for bad English. Newb here... :)
add a button on form like
<input type="button" value="submit" id="myBtn">
change your code like this
$("#myBtn").submit(function(){
and write your success function like this
success: function(result){
$("#result-set").html(result);
}
if you want to use json data as a javascript object set your $.ajax method parameter like this dataType: 'json'
Use parse_str to get your data:
PHP - theresult.php
<?php
parse_str($_POST['theData'], $params);
$Skills = $params['Skills[]']; // I am not sure about [] part, test it
$SkillsGrade = $params['SkillsGrade[]'];
$SkillsNumber = $params['SkillsNumber[]'];
echo "Skills: $Skills<br />";
echo "SkillsGrade: $SkillsGrade<br />";
echo "SkillsNumber: $SkillsNumber<br />";
exit;
?>
and add dataType: "html" to your $.ajax() definition