I want to be able to dynamically add text fields whenever the button
is clicked
I want to be able to get the data from the text fields and insert it
into the database.
As of now everything else works and I just need this, maybe I can
also add a remove button to remove the last text field dynamically
also
the reason why I need this to be dynamic is because I don't want to
refresh the page cause all the data will be lost
I have found a code that would help me dynamically add text fields
but I don't know how to make it so that I would need to go to another
page just to access data
<html>
<form action="checklist3.php" method="post">
<button type='submit' name='submit' id='buttonParent'>Submit</button>
<button type="submit" name="back">Back</button>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<?php
session_start();
require_once('../mysql_connect.php');
$rowarray = $_SESSION['rowarray'];
$dishname = $_SESSION['dishname'];
echo '<br>';
echo "Add Procedures";
echo ' <form name="addproc" id="addproc">
<table class="proctable" id="proctable">
<tr>
<td><input type="text" name="procedure[]" placeholder="Enter your Name" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
</form>';
echo "<input type='button' value='Remove Button' id='removeButton'>";
echo "<body>";
echo "</body>";
if (isset($_POST['home'])) {
header("Location: http://" . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/chefmenu.php");
}
if (isset($_POST['back'])) {
header("Location: http://" . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/checklist2.php");
}
?>
</form>
<script>
$(document).ready(function () {
var i = 1;
$('#add').click(function () {
i++;
$('#proctable').append('<tr id="row' + i + '"><td><input type="text" name="name[]" placeholder="Enter Procedure" class="form-control name_list" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function () {
var button_id = $(this).attr('id');
$('#row' + button_id + '').remove();
});
$('#submit').click(function () {
$.ajax({
url: 'name.php',
method: 'POST',
data: $('#addproc').serialize(),
success: function (data) {
alert(data);
$('#addproc')[0].reset();
}
});
});
});
</script>
</html>
It's easy to do with a little of jquery and AJAX :
Create and append a field to your form using jquery, something like
Capture your form sumission with jquery event listeners : $("form").live("submit", function (e){e.preventDefault()...}
Serialize all your form (with the newly added fields) and send them via AJAX
An example of code :
$("form").live("submit", function (event) {
event.preventDefault();
var form = $(this);
$.ajax({
url: form.attr('action'), // Get the action URL to send AJAX to
type: "POST",
data: form.serialize(), // get all form variables
success: function(result){
// ... do your AJAX post result
}
});
});
Related
When I use ajax to add to cart in details page it works fine but as a button in the products page where there is multiple ones it doesn't work.
I tried limiting the products to 1 and it worked .
So I guess the problem is that I'm using the same form id in multiple forms.
<form method="POST" id="add_to_cartt">
<input type="hidden" name="cart_id" value="<?php echo $final['id'];?>" id="cart_id">
<input type="hidden" name="cart_quantity" value="<?php echo "1" ?>">
<button class="btn js-prd-addtocart" >Add To Cart</button>
</form>
$(document).ready(function(){
$('#add_to_cartt').on('submit', function(e){
//Stop the form from submitting itself to the server.
e.preventDefault();
var cart_id = $('#cart_id').val();
var cart_quantity = $('#cart_quantity').val();
$.ajax({
type: "POST",
url: 'carthandler.php',
data: {cart_id : cart_id, cart_quantity : cart_quantity,},
success: function(data){}
});
});
});
I am trying to hide row from while loop. I want to hide full row when delete query success. Delete query is working fine need help to hide row. Thanks in advance.
While loop Code :
While Loop is working fine. Should i add any class to row for deleting. $chcrsid is unique.
while ($rowslctd=mysql_fetch_array($resultslctd))
{
$chcrs=$rowslctd['chcrs'];
$chcrsid=$rowslctd['chcrsid'];
echo"<tbody><tr>
<td>$chcrs</td>
<td>$chcrsid</td>
<td><form name='cancel_selection' class='cancel_selection' action=''>
<input type='hidden' name='crs' class='user_id' value='$chcrs'>
<input type='hidden' name='crsid' class='crsid' value='$chcrsid'>
<input type='hidden' name='insertid' class='insertid' value='$insertid'>
<button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button>
</form></td>
</tr><tbody>
Delete Function Code:
Function is running fine but it do not hide row which is deleted from database.
<script>
$(function(){
$('.btn.btn-cancel').click(function(e) {
e.preventDefault();
var $form = $(this).closest(".cancel_selection");
var formData = $form.serializeArray();
var userId = $form.find(".user_id").val();
var URL = "cancelselection.php";
$.post(URL, formData).done(function(data) {
});
fail(function(jqXHR, textStatus, errorThrown) {
});
});
});
</script>
Give unique id to row that you want to delete or hide. And using jQuery you can achieve that with that unique id.
Something like below:
HTML code
<table id="listData">
<tbody>
<?php while ($rowslctd=mysql_fetch_array($resultslctd)) {
$chcrs=$rowslctd['chcrs'];
$chcrsid=$rowslctd['chcrsid'];
echo"<tr id='row_selection_" .$chcrs. "'>
<td>". $chcrs ."</td>
<td>". $chcrsid ."</td>
<td><form name='cancel_selection_" .$chcrs. "'
id = 'cancel_selection_" .$chcrs. "'
class='cancel_selection' action=''>
<input type='hidden' name='crs' class='user_id' value='$chcrs'>
<input type='hidden' name='crsid' class='crsid' value='$chcrsid'>
<input type='hidden' name='insertid' class='insertid' value='$insertid'>
<button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button>
</form></td>
</tr>";
<?php } ?>
<tbody>
</table>
On AJAX success
$(function(){
$('.btn.btn-cancel').click(function(e) {
e.preventDefault();
var $form = $(this).closest(".cancel_selection");
var formData = $form.serializeArray();
var userId = $form.find(".user_id").val();
var URL = "cancelselection.php";
$.post(URL, formData).done(function(data) {
var hideId = 'table#listData tr#row_selection_' + userId;
$(hideId).remove(); // delete
$(hideId).hide(); // hide
});
fail(function(jqXHR, textStatus, errorThrown) {
});
});
});
TRY THIS
<tbody>
<?php while ($rowslctd=mysql_fetch_array($resultslctd)):?>
<tr id="row_to_hide">
<td><?php echo $rowslctd['chcrs'];?></td>
<td><?php echo $rowslctd['chcrsid'];?></td>
<td>
<form>
<input name="id" type="hidden" value="<?php echo $rowslctd['chcrsid'];?>">
<button onclick="process_form($(this).closest('form'))">Cancel</button>
</form>
</td>
</tr>
<?php endwhile;?>
</tbody>
<script>
function process_form(form) {
form.on('submit', function(e) {
e.preventDefault();
$.ajax('cancelselection.php',{
data: $(form).serialize(),
type: 'POST',
success: function (data) {
$(form).closest('#row_to_hide').remove();
}
});
});
}
</script>
The programming is being done in Phonegap. I am trying to submit a form with JQuery. I am getting data from two separate PHP files and loading them into different ID's in the form. I am not having an issue getting the data, but the form is not posting. Upon some debugging, it appears to be it is because of the second php file which includes checkboxes.
The HTML code is below:
<div id = "result"></div>
<form method="post" name = "inviteform" id = "inviteform">
<p>
<select name="groupstrip" id = "groupstrip" class="formdrop" /><br />
</p>
<input type='hidden' name='user_name1' id='user_name1' value=''>
<p><input type = "button" id="grpsubmit" name= "grpsubmit" class="formsubmit" value = "Invite"></p>
<nav id="primary_nav">
<ul>
<div id = "friendsinv"></div>
</ul>
</nav>
</form>
The Javascript is below:
var invgrpurl = "http://www.website.com/app/invgrps.php?userid=" + items;
var invfrndurl = "http://www.website.com/app/invfrnds.php?userid=" + items;
$.ajax({
url: invgrpurl,
dataType: "text",
type: "GET",
success: function (data){
//manually insert the page
$("#groupstrip").html(data);
}
});
$.ajax({
url: invfrndurl,
dataType: "text",
type: "GET",
success: function (data){
//manually insert the page
$("#friendsinv").html(data);
}
});
$("#grpsubmit").click(function(event){
event.preventDefault();
$.post( 'http://www.website.com/app/invitemany.php', $("#inviteform").serialize(), function(data){
$("#result").html(data);
$('#inviteform')[0].reset();
});
});
The main data from the PHP file that is causing the issue is:
<li><div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<?php
echo '<input type= "hidden" name = "id[]" id = "id[]" value="' . $rowid . '"></input>';
echo '<input type="checkbox" aria-label="..." name = "friends[]" id="friends[]" value="' . $y2aac . '">';
echo '</span>';
echo '<input readonly="readonly" type="text" class="form-control" aria-label="' . $fullname . '" placeholder="' . $fullname . '">';
?>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
</li>
Any help on getting this to submit would be greatly appreciated
Up to this point, I've been using a textarea as the main input for a form. I've changed it to use a contenteditable div because I wanted to allow some formatting.
Previously, when I had the textarea, the form submitted fine with Ajax and PHP. Now that I've changed it to use a contenteditable div, it doesn't work anymore and I can't tell why.
HTML:
<form>
<div name="post_field" class="new-post post-field" placeholder="Make a comment..." contenteditable="true"></div>
<input name="user_id" type="hidden" <?php echo 'value="' . $user_info[0] . '"' ?>>
<input name="display_name" type="hidden" <?php echo 'value="' . $user_info[2] . '"' ?>>
<ul class="btn-toggle format-post">
<button onclick="bold()"><i class="fa-icon-bold"></i></button>
<button onclick="italic()"><i class="fa-icon-italic"></i></button>
</ul>
<div class="post-buttons btn-toggle">
<button class="btn-new pull-right" type="submit">Submit</button>
</div>
</form>
JQuery Ajax:
$(document).ready(function() {
$(document).on("submit", "form", function(event) {
event.preventDefault();
$.ajax({
url: 'php/post.php',
type: 'POST',
dataType: 'json',
data: $(this).serialize(),
success: function(data) {
alert(data.message);
}
});
});
});
PHP (post.php): Just your typical checks and echo a message back. This is just a snippet of the code.
<?php
$user_id = $_POST["user_id"];
$display_name = $_POST["display_name"];
$post_content = $_POST["post_field"];
$array = array('message' => $post_content);
echo json_encode($array);
?>
For some reason, it's not sending back the post content anymore ever since I added the contenteditable div.
Please help!
The contents of the div are not serialized. You would have to add them on your own.
var data = $(this).serialize();
data += "post_field=" + encodeURIComponent($("[name=post_field]").html());
I am using a while loop to create a table and I am trying to pass a unique value stored in a php variable called $i to a jquery ajax call but all I get returned it 'undefined'.
The portion of the html table (whole table is wrapped in a div called audit_content which is not part of the while loop)
<tr>
<td colspan="3">
<input type="button" class="delete_submit delete_from_audit" name="image_delete" value=""
onClick="delete_image('<? echo $image_id; ?>','<? echo $audit_id; ?>')" />
<input type="button" class="reset_grade control_submit ie7_reset"
onclick="reset_image('<? echo $image_id; ?>','<? echo $audit_id; ?>')" value="" >
<input type="hidden" class="form_id" value="<? echo $i; ?>" >
<input type="button" name="audit_submit"
class="audit_submit audit_submit_btn ie7_submit" value=""; />
</td>
</tr>
the Jquery
<script>
$(document).ready(function(){
$('#audit_content').on("click", ".audit_submit", function(){
var form_id = $(this).next('.form_id').val();
alert(form_id);
//$.ajax({
//type: "POST",
//url: "ajax/image_audit.php",
//data: $('#audit_form').serialize()
//});
});
});
</script>
The .form_id element is before the .audit_submit button... Try prev() instead of next():
var form_id = $(this).prev('.form_id').val();
You could also use siblings():
var form_id = $(this).siblings('.form_id').val();
<script>
$(document).ready(function(){
$(document).on("click", ".audit_submit", function(){
var form_id = $(this).next('.form_id').val();
alert(form_id);
//$.ajax({
//type: "POST",
//url: "ajax/image_audit.php",
//data: $('#audit_form').serialize()
//});
});
});
</script>
<input type="button" name="audit_submit"
class="audit_submit audit_submit_btn ie7_submit" value=""**---> ; <----** />
Why is there a semi colon ??
Php will consider it as the end of the statement.