I have some drop downs looks like this in my HTML form:
<form name="fee" method="POST" action="">
<p><span class="title">Number of artists:</span>
<select name="Number">
<option value="" rel="none" selected disabled>Please select an option..</option>
<option value="one" rel="one_art">One artist only</option>
<option value="more" rel="more_arts">More than one artists</option>
</p>
A table of summery will be generated after I click the submit button.
<input type="submit" value="Calculate">
My question is: Whenever I click the button, the previously selected option will be reset. And only the summery show up at the end of the page. Is there a way to output the summery on the same page without the previously selected option gets cleared?
Thanks in advance!!
I think your best option is to use AJAX POST to post the form data, and JQuery to keep the same option selected:
$(document).ready(function() {
$("#fee").on('submit',(function(e) {
e.preventDefault();
var selectedOption = $( "#Number option:selected" ).text();
$.ajax({
url: "here put the url to the php page handling your form data",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function ()
{
$("#Number").val(selectedOption);
}
});
}
});
Related
I have a select dropdown, from that I'm calling an ajax function onchange event. Posting the result in a text input. This much is working perfectly. But when I submit the form the text input value is not submitting.
This is the ajax code. teachername dowpdown and teachercode text input
$("#teachername").change(function(){
var name = $(this).val();
var dataString = "name="+name;
$.ajax({
type: "POST",
url: "get-teachercode.php",
data: dataString,
success: function(result){
$("#teachercode").val(result);
}
});
});
this is the form
<form action="insert-assign-classes.php" method="post">
<select class="form-control" name="teachername" id="teachername" required>
</select>
<input type="text" disabled style="background-color:#fff;" class="form-control" name="teachercode" id="teachercode" required>
getting the value in insert-assign-classes.php file.
$teachercode= $_POST['teachercode'];//not working
I have a jQuery Ajax problem.
I have a select tag with options of courses, the select holds div id="course". I have a button with id of "go" and an empty div with id of "courseInfo". I need to make it so that when a course number is selected, the teacher name in my php file that goes with it is displayed on the page. I have all my Ajax written, everything is linked, but it wont work and no error when I debug.
$(document).ready(function(){
findCourse = function(){
var file = "Course.php?course="+$("#course").val();
$.ajax({
type: "GET",
url: file,
datatype : "text",
success : function(response) {
$("#courseInfo").html(response);
}
});
}
clear = function(){
$("#courseInfo").html("");
};
$("#course").click(clear);
$("#go").click(findCourse);
});
Form:
<form action="" method="post">
<select name="course" id="course">
<option value="420-121">420-121</option>
<option value="420-122">420-122</option>
<option value="420-123">420-123</option>
<option value="420-221">420-221</option>
<option value="420-222">420-222</option>
<option value="420-223">420-223</option>
<option value="420-224">420-224</option>
</select>
Select a course to see the course name and teacher assigned<br><br>
<input type="button" id="go" value="go!">
</form>
<br><br>
<div id="courseInfo"></div>
Assuming that the PHP side is working properly, the code below should fix the issue.
$(document).ready(function(){
findCourse = function(){
var file = "Course.php?course="+$("#course").val();
console.log(file);
$.ajax({
type: "GET",
url: file,
datatype : "text",
success : function(response) {
$("#courseInfo").html(response);
}
});
}
clear = function(){
$("#courseInfo").html("");
};
$("#course").click(clear);
$("#go").click(findCourse);
});
You miss the = in var file.
Yours was
var file = "Course.php?course"+$("#course").val();
It should be
var file = "Course.php?course="+$("#course").val();
jquery change function on radio button is working properly when they are part of html body i.e when they have written in html body, but when they loaded through ajax request change function not works. My code is-
html code
<form>
<select id="sel" name="sel">
<option value="">Select Type</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="load"></div>
<label id="change">--</label>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('.radi').change(function(){
console.log( "radio clicked!" );
$('#change').html("Loaded2: ");
});
$("#sel").change(function(){
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax ({
type: "POST",
url: "faculty.ajax_load.php",
data: dataString,
cache: false,
success: function(html){
$("#load").html(html);
console.log( "radio loaded" );
}
});
});
});
</script>
ajax_load.php is:-
<?php
echo '<input class="radi" type="radio" name="sect" value="P" id="p"/>
<input type="radio" class="radi" name="sect" value="A" id="a" checked="checked"/>';
?>
Now the problem is radio buttons are appear but when I click them change is not shown on console and label. Please help, where I am doing mistake.
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the event binding call.
As you are loading using ajax call.
You need to use Event Delegation. You have to use .on() using delegated-events approach.
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.
General Syntax
$(document).on(event, selector, eventHandler);
Ideally you should replace document with closest static container.
As per your code
$("#load").on('change', '.radi', function(){
console.log( "radio clicked!" );
$('#change').html("Loaded2: ");
});
This question already has answers here:
jQuery AJAX submit form
(20 answers)
Closed 8 years ago.
Good day im am trying to send or get data from a form and then using jquery and then ajax to send the data into a php page that should save it in the database how can i do it in jquery and use ajax to do it, any help will do and thanks!
HTML page 1 that will use jquery ajax to send data into the php page
<form>
Name:<input type='text' name='name'>
E-mail:<input type='text' name='email'>
Gender:<select name='gender'>
<option value='male'>male</option>
<option value='female'>female</option>
</select>
Message:<textarea name='about'></textarea>
</form>
PHP page 2 that would recieve the data from the page 1 form
<?php
echo "
$_POST['name'];
$_POST['email'];
$_POST['gender'];
$_POST['about'];
";
?>
any help with this project would help us greatly and thanks!
(update)
This is the jquery that i tried to use but it went to the url and i think that is not very safe
$(document).ready(function(){
$("#chat").click(function(){
$("#content").load("a.php");
});
$("#send").ajaxSubmit({url: 'a2.php', type: 'post'})
});
you can use following code :
var form = new FormData($('#form_step4')[0]);
form.append('view_type','addtemplate');
$.ajax({
type: "POST",
url: "savedata.php",
data: form,
cache: false,
contentType: false,
processData: false,
success: function(data){
//alert("---"+data);
alert("Settings has been updated successfully.");
window.location.reload(true);
}
});
where savedata.php is the file name in which you can do the the DB things
Hi i would start by adding a id to the form. and then either go with a onclick on the button element, or just define a click-event-handler for the button.
<form id="my_form">
Name:<input type='text' name='name'>
E-mail:<input type='text' name='email'>
Gender:<select name='gender'>
<option value='male'>male</option>
<option value='female'>female</option>
</select>
Message:<textarea name='about'></textarea>
<input type="button" value="Send" onclick="sendForm()"/>
</form>
Then the jquery/ajax/js part.
function sendForm(){
$.ajax({
type: "POST",
url: "PAGE2.php",
data: jQuery("#my_form").serialize(),
cache: false,
success: function(data){
/* alert(data); if json obj. alert(JSON.stringify(data));*/
}
});
}
Try this one:
<form id="formId">
Name:<input type='text' name='name'>
E-mail:<input type='text' name='email'>
Gender:<select name='gender'>
<option value='male'>male</option>
<option value='female'>female</option>
</select>
Message:<textarea name='about'></textarea>
<input type="button" value="Send" onclick="save()"/>
</form>
<script type="javascript">
function save(){
var query = $('#formId').serialize();
var url = 'savedata.php';
$.post(url, query, function (response) {
alert (response);
});
}
</script>
assign Id to your form... for now in my code i have given ID formId.. you can change this one as per your form name.
I have a MySQL table which looks like this:
ID OPTION
1 First
2 Second
The user sees the following:
<div id="options">
<select>
<option value="1">First</option>
<option value="2">Second</option>
</select>
</div>
I would like the user to have the option to insert into the table, as follows:
<div id="add">
<input type="text" name="newOption" placeholder="Your own option">
<input type="button" value="Add">
</div>
It would then select their newly-added option:
<div id="options">
<select>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3" selected>Third</option>
</select>
</div>
As the above code is part of a page which contains other form elements the page can't be reloaded, otherwise the data they've already typed will disappear. So I'd like to use jQuery.
EDIT: I have tried the following but it adds rows twice, sometimes even four times, for reasons I cannot fathom!
$("#button").click(function(){
var test = $("#<?php echo $selectName; ?>").val();
var dataString = 'select=<?php echo $select; ?>&selectName='+ test;
$.ajax({
type: "POST",
url: "optionAdd.php",
data: dataString,
cache: false,
success: function(html){
$("#<?php echo $select; ?>List").load("optionList.php?select=<?php echo $select; if ($_GET[required] == "no") { echo "&required=no"; } ?>");
}
});
});
The reason for the PHP above is I want to use multiples of this code on the same form and so I'm using GET to select the options, as it were.
You would need to send an AJAX request to server with the new data and get an ID returned for this new option. Once the ID is received you can create the option with the new ID as value and the user defined text
$('#add button').click(function(){
/* get value from previous input*/
var newOpt=$(this).prev().val();
/* make AJAX "POST" request*/
$.post( 'path/to/server/file', { newOption: newOpt}, function( newId ){
/* ajax successfully completed, add new option*/
$('#options select').append('<option value="'+ newId +'">'+newOpt+'</option>');
});
return false; /* prevent browser default handling of button click*/
})
At server receive the data as you would a form field with name="newOption" ie $_POST['newOption'] and send back a new ID as text
Alternatively you could send back all the options as html in sort order you want and replace all the options in the select.
/* ajax to replace all options with html from server*/
$.post( 'path/to/server/file', { newOption: newOpt}, function( response ){
/* ajax successfully completed, add new option*/
$('#options select').html( response);
});
I would suggest using jQuery AJAX to call a PHP Script to store the new option to the database, that returns the new ID and the given option name on success and then add the new entry to the <select> using Javascript.