i am trying to build a customer list with using mysql,php and ajax. i currently have a list of customers displayed on the page and my end goal is to be able to create a new customer and edit the other customers on the same page.
i have a form for creating a new customer and then a form for each customer listed on the page its basically the same form as the new customer but with and id on the end of the name tags to make sure each name is different from the other and one updates and one creates see below
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form name='frm_details' id='frm_details' action=''>
<input type='text' class='form-control' name='box1' required>
<input type='text' class='form-control' name='box2' required>
<input type='submit' value='Save' >
</form>
<form name='frm_details' id='frm_details' action=''>
<input type='text' class='form-control' name='box1_2465' required>
<input type='text' class='form-control' name='box2_2465' required>
<input type='submit' value='Save' >
</form>
<script>
$(function() {
$('#frm_details').on('submit', function(event) {
event.preventDefault();
$.ajax({
url: '/limitless/functions2.php',
type: 'post',
dataType: 'json',
data: $(this).serialize(),
success: function(data) {
if(data.status == '1')
{
$('#info').addClass('alert alert-danger no-border').html(data.message);
}
if(data.status == '2')
{
$('#info').addClass('alert alert-danger no-border').html(data.message);
}
}
});
});
});
</script>
this works flawlessly for the creation of a new customer however when i submit the second form to edit the customer with the id in the name tag it fails to execute the ajax is there any chance someone could point out where i am going wrong if possible i would like to keep a single ajax request just with the form id changed $('#frm_details2465')
1st: id must be unique as I said
2nd: you can change Ids like so
in html
<form name='frm_details' id='frm_details1' action=''>
<form name='frm_details' id='frm_details2' action=''>
in js
$('form[id^=frm_details]')
or you can use classes
<form name='frm_details' class='frm_details' id='frm_details1' action=''>
<form name='frm_details' class='frm_details' id='frm_details2' action=''>
and in js
$('form.frm_details')
Related
how can I submit values from input fields echoed from an external file to the post or get array of my current file?
I have a php file that contains a form.
<html>
<body>
<button onclick="promoRep();">Select Dates</button>
<form name="myForm" id="myForm" method="get">
<div id="dateFields"></div>
<input type="text" id="lname" name="lname">
<input type="text" id="fname" name="fname">
<input type="submit" value="submit" >
</form>
</body>
</html>
Some of the input fields on the form are echoed from an external php file.
<?php
if (isset($_GET['promoRep'])){
$promoRep = $_GET['promoRep'];
}
for ($i = 0; $i < $promoRep; $i++) {
echo 'Enter Date: <input type="date" name="date[]" id="date['.$i.']" form="myForm" /><br><br>';
}
?>
they get displayed through a javascipt function called promoRep that is triggered when the button is pressed:
function promoRep() {
$("#dateForm").html("<span> doing the do...</span>");
$.ajax({
type: "GET",
url: "action/getPromoRep.php",
data: "promoRep=" + PROMO_REP,
async: false,
success: function (data) {
$("#dateFields").html(data);
},
});
}
the date fields sow up on the page however, the input isn't being submitted.
how do I get the input from the echoed date fields to be submitted the original "myForm"
This question already has answers here:
Submit a form using jQuery [closed]
(22 answers)
Closed 5 years ago.
Here is my code:
<form action='insert.php' method='post' id='myform' >
<input type='hidden' name='tmdb_id'/>
<button id='insert'>Insert</button>
<p id='result'></p>
<script src='insert.js'></script>
</form>
<form action='insert.php' method='post' id='myform' >
<input type='hidden' name='tmdb_id'/>
<button id='insert'>Insert</button>
<p id='result'></p>
<script src='insert.js'></script>
</form>
<form action='insert.php' method='post' id='myform' >
<input type='hidden' name='tmdb_id'/>
<button id='insert'>Insert</button>
<p id='result'></p>
<script src='insert.js'></script>
</form>
Here is: insert.js
$('#myform').submit(function(){
return false;
});
$('#insert').click(function(){
$.post(
$('#myform').attr('action'),
$('#myform :input').serializeArray(),
function(result){
$('#result').html(result);
}
);
});
The Problem:
Only the code inside first <form></form> tag works. If i click on submit button of other<form></form> tags, then I get re-directed to insert.php file.
What is the problem? If it is related to same id thing, then I would not like to add different id's. for each new form
You don't need multiple instances of insert.js
Use common classes for all the forms and elements instead of duplication of ID's.
We can also use the submit event to post the data
HTML
<form action='insert.php' method='post' class='myform'>
<input type='hidden' name='tmdb_id' />
<button class='insert'>Insert</button>
<p class='result'></p>
</form>
<form action='insert.php' method='post' class='myform'>
<input type='hidden' name='tmdb_id' />
<button class='insert'>Insert</button>
<p class='result'></p>
</form>
<!-- load once per page -->
<script src='insert.js'></script>
JS
$('.myform').submit(function(){
// `this` is the instance of myForm class the event occurred on
var $form = $(this),
url = $form.attr('action'),
data = $form.serializeArray(); // or use serialize() which is more common
$.post( url, data, function(result){
// look inside this form instance for element to populate
$form.find('.result').html(result);
});
return false;
});
ID's Must Be Unique, specifically because it will cause problems in JavaScript and CSS when you try to interact with those elements.
Assuming you load insert.js once into the page:
<form action='insert.php' method='post' class='myform' >
<input type='hidden' name='tmdb_id'/>
<button class='insert'>Insert</button>
<p class='result'></p>
</form>
<form action='insert.php' method='post' class='myform' >
<input type='hidden' name='tmdb_id'/>
<button class='insert'>Insert</button>
<p class='result'></p>
</form>
<form action='insert.php' method='post' class='myform' >
<input type='hidden' name='tmdb_id'/>
<button class='insert'>Insert</button>
<p class='result'></p>
</form>
Once you have that done you can use a single jQuery function to handle all of the forms:
$(function() {
$('.insert').click(function(e){
e.preventDefault();
$.post(
$(this).closest('.myform').attr('action'),
$(this).closest('.myform :input').serializeArray(),
function(result){
$(this).closest('.myform').find('.result').html(result);
}
);
});
});
You do have to do some DOM traversal to get the form elements related to the insert button.
$(this).closest('.myform') finds the parent of the insert button
$(this)closest(.myform').find('.result') finds the child element with the class of 'result' to add the results to.
Try something like below using jQuery Ajax:
$(".submit-button-class").click(function() {
var formData = $(this).closest('form').serialize();
$.ajax({
type: "POST",
url: "YOUR URL",
data: formData,
dataType: 'json',
beforeSend: function() {
//show loading image while processing
},
success: function(resp) {
// do something here
},
error: function(e) {
alert('error: ' + JSON.stringify(e));
}
});
});
Note: you should use class selector instead of id selector for submit button
Second image ,First image I have a set of links, which will open a pop-up form.
When the link is clicked,I want to send a parameter to the form and then use it on form submission.
I'm able to set the value to be passed as id of <a> tag. Can I send to further?
<div> <span>Chapter $i:</span>
<a href='$viewlink '>View</a><span class='status'>Status:$status </span>
<a href=$reqlink id=$i data-rel='popup' class='ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left'>Request Access</a></div><br/>";
<form method="post" action=" " id="myPopup" data-role="popup" style="padding:10px">
<h3>Enter your details</h3>
<input type="text" name="name" id="name" placeholder="Name" required>
<input type="email" name="email" id="email" placeholder="Email" required>
<input type="date" name="date" id="date" placeholder="Intended completion date" required>
<input type="submit" data-inline="true" value="Submit" name='submit'>
</form>
Is it possible to do in javascript? How to do it?
Option #1:
Set up hidden inputs, and send the values to them when clicking the link. You can then get these on the other end where the form is sent.
(Note: in my code examples I'm explicitly using PHP as that's where you seem to have copied your code snipped from)
echo "<a href='$viewlink' onclick='$(\'#viewlink\').val(1);'>View</a><span class='status'>Status:$status </span>
<!-- Do the following inside the form -->
<input type='hidden' name='viewlink' id='viewlink' value='0' />";
And on the PHP receiving end you can do this:
if ($_POST['viewlink'] == 1) {
// do stuff
}
Option #2:
Alternatively you could send the data to a javascript array, prevent posting on submit of the form, take care of adding the array to the form action as query string, then explicitly send the form.
echo "<a href='$viewlink' onclick='linkClicked('viewlink');'>View</a><span class='status'>Status:$status </span>
This is what you'd do in your javascript file:
var queryString = [];
function linkClicked (type) {
queryString[type] = 1;
}
$("#myPopup").submit(function(event) {
event.preventDefault();
$(this).attr('action', $(location).attr('host') + $.param(queryString));
$(this).submit();
});
And on the PHP receiving end you can do the following (note the $_POST from above has changed to $_GET):
if ($_GET['viewlink'] == 1) {
// do stuff
}
try this..
<a id = 'yourid' class = 'mybtn'>click me..</a>
<form id = 'myform'>
....
</form>
Jquery
$(document).ready(function(){
$('.mybtn').click(function(){
var id = $(this).attr('id');
var SubmitForm = $("#myform").serializeArray();
$.post("somepage.php",
{
SubmitForm:SubmitForm,
ID:id
},
function(res){
alert(res);//your result..
});
});
I'm just new to CodeIgniter framework and all the lessons have been jumbled on my mind now. I just want to ask, how to submit a form without using a form submit button in codeigniter. I did saw an example of javascript but I want to see it in codeigniter framework. Can anybody give me a simple mvc sample? Thank you in advance!
you can use AJAX as well
<script>
$(function(){
$( "#submit" ).click(function(event)
{
event.preventDefault();
var name= $("#name").val();
var phone= $("#phone").val();
var address= $("#address").val();
$.ajax(
{
type:"post",
url: "<?php echo base_url(); ?>index.php/Controller_name/Method name",
data:{ name:name, phone:phone,address:address,},
success:function(data)
{
}
error:function(data)
{
}
});
});
});
</script>
So in Form should be
<form action="#" method="post">
<input type="text" id="name" name="name">
<input type="text" id="phone" name="phone">
<input type="text" id="address" name="address">
<input type="submit" value="Submit Form" id="submit">
</form>
This is my form:
<!-- our form -->
<form id='userForm'>
<div><input type='text' name='firstname' placeholder='Firstname' /></div>
<div><input type='text' name='name' placeholder='Lastname' /></div>
<div><input type='text' name='email' placeholder='Email' /></div>
<div><input type='hidden' name='nl' vaule="1" /></div>
<div><input type='submit' value='Submit' /></div>
</form>
...and this is my current code:
$(document).ready(function(){
$('#userForm').submit(function(){
// show that something is loading
$('#response').html("<b>Loading response...</b>");
$.ajax({
type: 'POST',
url: 'https://www.otherdomain.com?param=XYZ',
data: $(this).serialize()
}).done(function(data){
// show the response
$('#response').html(data);
}).fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
When submitting this form via Ajax form my URL (which is NOT the goal-URL) I get a origin-error beacause of the cross-domain-policy. I can not edit anything in .htaccess.
So, is there an easy way to send the serialized data via JSONP to an PHP script which is submitting the data to avoid the origin-issue?
Hope that you had these problem too and help me with this.