Auto increment code using jquery on dynamic form
0
I am making a dynamic form, where user clicks add more and the form will be duplicated 1 times and there is a textbox inside the form. When user clicks add more button it will increment the text inside that textbox
example:
The first code is ss1, the user clicks add more button, the form will be duplicated 1 time and the code will incremented to ss2.
The problem is the dynamic form is already made and it was successfull and the auto increment is a success too, but the position of the autoincremented text is wrong, I want it beside the kode_produk text box. and when I click the remove button it will remove the clicked form group, when I click the remove button, it does remove the clicked form group but the ss1 won't deleted.
Here is my code :
<?php
include 'config/db_connect.php';
if(isset($_POST['submit']))
$kode = $_GET['kode_cu'];
$kode_produk = $_POST['kode_produk'];
$produk = $_POST['produk'];
$bunga = $_POST['bunga'];
$keterangan = $_POST['ket'];
if($query)
header('location: home_cu.php');
else
echo "data gagal dimasukan" . mysqli_error($con) . mysqli_errno($con);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Add More Input Form</title>
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php
include 'config/db_connect.php';
$kode_cu = $_GET['kode_cu'];
$query_mysql = mysqli_query($con,"SELECT * FROM t_cu WHERE kode_cu='$kode_cu'")or die(mysqli_error());
$nomor = 1;
while($data = mysqli_fetch_array($query_mysql))
?>
<div class="container">
<h1 class="text-center">Tambah Data Kebijakan</h1>
<form action="add_kebijakan.php" method="post">
<input type="hidden" value="<?php echo $data['kode_cu']?>" name="meja" class="form-control"/>
</div>
<h1 class="text-center">Produk Simpanan Saham</h1>
<div class="form-content">
<div class="row">
<div class="col-md-12">
<p><button type="button" id="btnAdd" class="btn btn-primary">Add More</button></p>
<br/>
</div>
</div>
<div id="inputtext"></div>
<div class="row group">
<div class="col-md-3">
<div class="form-group">
<label>Kode Produk :</label>
<input type="text" name="kode_produk" class="form-control">
</div>
</div>
<?php ?>
<div class="col-md-3">
<div class="form-group">
<label>Produk</label>
<input type="text" name="produk" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Bunga</label>
<input type="text" name="bunga" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Keterangan</label>
<textarea name="ket" class="form-control" rows="3"></textarea>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<button type="button" class="btn btn-danger btnRemove">Remove</button>
</div>
</div>
</div>
</div>
<p>
<button type="submit" class="btn btn-success" name="submit">Simpan</button>
</p><br/>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="assets/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="jquery.multifield.min.js"></script>
<script>
$('.form-content').multifield(
section: '.group',
btnAdd:'#btnAdd',
btnRemove:'.btnRemove',
);
$(document).ready(function()
var count = 1;
$("#btnAdd").click(function()
$("#inputtext").append("<input type='text' value='ss" + count + "' name='photo_" + (count++) +"'/><br />");
);
)
</script>
</body>
</html>
php jquery
edited Nov 14 '18 at 4:25
DarkSuniuM
7881019
asked Nov 14 '18 at 3:19
InFocusInFocus
136
add a comment |
0
I am making a dynamic form, where user clicks add more and the form will be duplicated 1 times and there is a textbox inside the form. When user clicks add more button it will increment the text inside that textbox
example:
The first code is ss1, the user clicks add more button, the form will be duplicated 1 time and the code will incremented to ss2.
The problem is the dynamic form is already made and it was successfull and the auto increment is a success too, but the position of the autoincremented text is wrong, I want it beside the kode_produk text box. and when I click the remove button it will remove the clicked form group, when I click the remove button, it does remove the clicked form group but the ss1 won't deleted.
Here is my code :
<?php
include 'config/db_connect.php';
if(isset($_POST['submit']))
$kode = $_GET['kode_cu'];
$kode_produk = $_POST['kode_produk'];
$produk = $_POST['produk'];
$bunga = $_POST['bunga'];
$keterangan = $_POST['ket'];
if($query)
header('location: home_cu.php');
else
echo "data gagal dimasukan" . mysqli_error($con) . mysqli_errno($con);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Add More Input Form</title>
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php
include 'config/db_connect.php';
$kode_cu = $_GET['kode_cu'];
$query_mysql = mysqli_query($con,"SELECT * FROM t_cu WHERE kode_cu='$kode_cu'")or die(mysqli_error());
$nomor = 1;
while($data = mysqli_fetch_array($query_mysql))
?>
<div class="container">
<h1 class="text-center">Tambah Data Kebijakan</h1>
<form action="add_kebijakan.php" method="post">
<input type="hidden" value="<?php echo $data['kode_cu']?>" name="meja" class="form-control"/>
</div>
<h1 class="text-center">Produk Simpanan Saham</h1>
<div class="form-content">
<div class="row">
<div class="col-md-12">
<p><button type="button" id="btnAdd" class="btn btn-primary">Add More</button></p>
<br/>
</div>
</div>
<div id="inputtext"></div>
<div class="row group">
<div class="col-md-3">
<div class="form-group">
<label>Kode Produk :</label>
<input type="text" name="kode_produk" class="form-control">
</div>
</div>
<?php ?>
<div class="col-md-3">
<div class="form-group">
<label>Produk</label>
<input type="text" name="produk" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Bunga</label>
<input type="text" name="bunga" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Keterangan</label>
<textarea name="ket" class="form-control" rows="3"></textarea>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<button type="button" class="btn btn-danger btnRemove">Remove</button>
</div>
</div>
</div>
</div>
<p>
<button type="submit" class="btn btn-success" name="submit">Simpan</button>
</p><br/>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="assets/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="jquery.multifield.min.js"></script>
<script>
$('.form-content').multifield(
section: '.group',
btnAdd:'#btnAdd',
btnRemove:'.btnRemove',
);
$(document).ready(function()
var count = 1;
$("#btnAdd").click(function()
$("#inputtext").append("<input type='text' value='ss" + count + "' name='photo_" + (count++) +"'/><br />");
);
)
</script>
</body>
</html>
php jquery
edited Nov 14 '18 at 4:25
DarkSuniuM
7881019
asked Nov 14 '18 at 3:19
InFocusInFocus
136
Check all html start and end tags.
– Delwar Sumon
Nov 14 '18 at 4:03
add a comment |
0
0
0
I am making a dynamic form, where user clicks add more and the form will be duplicated 1 times and there is a textbox inside the form. When user clicks add more button it will increment the text inside that textbox
example:
The first code is ss1, the user clicks add more button, the form will be duplicated 1 time and the code will incremented to ss2.
The problem is the dynamic form is already made and it was successfull and the auto increment is a success too, but the position of the autoincremented text is wrong, I want it beside the kode_produk text box. and when I click the remove button it will remove the clicked form group, when I click the remove button, it does remove the clicked form group but the ss1 won't deleted.
Here is my code :
<?php
include 'config/db_connect.php';
if(isset($_POST['submit']))
$kode = $_GET['kode_cu'];
$kode_produk = $_POST['kode_produk'];
$produk = $_POST['produk'];
$bunga = $_POST['bunga'];
$keterangan = $_POST['ket'];
if($query)
header('location: home_cu.php');
else
echo "data gagal dimasukan" . mysqli_error($con) . mysqli_errno($con);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Add More Input Form</title>
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php
include 'config/db_connect.php';
$kode_cu = $_GET['kode_cu'];
$query_mysql = mysqli_query($con,"SELECT * FROM t_cu WHERE kode_cu='$kode_cu'")or die(mysqli_error());
$nomor = 1;
while($data = mysqli_fetch_array($query_mysql))
?>
<div class="container">
<h1 class="text-center">Tambah Data Kebijakan</h1>
<form action="add_kebijakan.php" method="post">
<input type="hidden" value="<?php echo $data['kode_cu']?>" name="meja" class="form-control"/>
</div>
<h1 class="text-center">Produk Simpanan Saham</h1>
<div class="form-content">
<div class="row">
<div class="col-md-12">
<p><button type="button" id="btnAdd" class="btn btn-primary">Add More</button></p>
<br/>
</div>
</div>
<div id="inputtext"></div>
<div class="row group">
<div class="col-md-3">
<div class="form-group">
<label>Kode Produk :</label>
<input type="text" name="kode_produk" class="form-control">
</div>
</div>
<?php ?>
<div class="col-md-3">
<div class="form-group">
<label>Produk</label>
<input type="text" name="produk" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Bunga</label>
<input type="text" name="bunga" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Keterangan</label>
<textarea name="ket" class="form-control" rows="3"></textarea>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<button type="button" class="btn btn-danger btnRemove">Remove</button>
</div>
</div>
</div>
</div>
<p>
<button type="submit" class="btn btn-success" name="submit">Simpan</button>
</p><br/>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="assets/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="jquery.multifield.min.js"></script>
<script>
$('.form-content').multifield(
section: '.group',
btnAdd:'#btnAdd',
btnRemove:'.btnRemove',
);
$(document).ready(function()
var count = 1;
$("#btnAdd").click(function()
$("#inputtext").append("<input type='text' value='ss" + count + "' name='photo_" + (count++) +"'/><br />");
);
)
</script>
</body>
</html>
php jquery
edited Nov 14 '18 at 4:25
DarkSuniuM
7881019
asked Nov 14 '18 at 3:19
InFocusInFocus
136
I am making a dynamic form, where user clicks add more and the form will be duplicated 1 times and there is a textbox inside the form. When user clicks add more button it will increment the text inside that textbox
example:
The first code is ss1, the user clicks add more button, the form will be duplicated 1 time and the code will incremented to ss2.
The problem is the dynamic form is already made and it was successfull and the auto increment is a success too, but the position of the autoincremented text is wrong, I want it beside the kode_produk text box. and when I click the remove button it will remove the clicked form group, when I click the remove button, it does remove the clicked form group but the ss1 won't deleted.
Here is my code :
<?php
include 'config/db_connect.php';
if(isset($_POST['submit']))
$kode = $_GET['kode_cu'];
$kode_produk = $_POST['kode_produk'];
$produk = $_POST['produk'];
$bunga = $_POST['bunga'];
$keterangan = $_POST['ket'];
if($query)
header('location: home_cu.php');
else
echo "data gagal dimasukan" . mysqli_error($con) . mysqli_errno($con);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Add More Input Form</title>
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php
include 'config/db_connect.php';
$kode_cu = $_GET['kode_cu'];
$query_mysql = mysqli_query($con,"SELECT * FROM t_cu WHERE kode_cu='$kode_cu'")or die(mysqli_error());
$nomor = 1;
while($data = mysqli_fetch_array($query_mysql))
?>
<div class="container">
<h1 class="text-center">Tambah Data Kebijakan</h1>
<form action="add_kebijakan.php" method="post">
<input type="hidden" value="<?php echo $data['kode_cu']?>" name="meja" class="form-control"/>
</div>
<h1 class="text-center">Produk Simpanan Saham</h1>
<div class="form-content">
<div class="row">
<div class="col-md-12">
<p><button type="button" id="btnAdd" class="btn btn-primary">Add More</button></p>
<br/>
</div>
</div>
<div id="inputtext"></div>
<div class="row group">
<div class="col-md-3">
<div class="form-group">
<label>Kode Produk :</label>
<input type="text" name="kode_produk" class="form-control">
</div>
</div>
<?php ?>
<div class="col-md-3">
<div class="form-group">
<label>Produk</label>
<input type="text" name="produk" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Bunga</label>
<input type="text" name="bunga" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Keterangan</label>
<textarea name="ket" class="form-control" rows="3"></textarea>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<button type="button" class="btn btn-danger btnRemove">Remove</button>
</div>
</div>
</div>
</div>
<p>
<button type="submit" class="btn btn-success" name="submit">Simpan</button>
</p><br/>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="assets/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="jquery.multifield.min.js"></script>
<script>
$('.form-content').multifield(
section: '.group',
btnAdd:'#btnAdd',
btnRemove:'.btnRemove',
);
$(document).ready(function()
var count = 1;
$("#btnAdd").click(function()
$("#inputtext").append("<input type='text' value='ss" + count + "' name='photo_" + (count++) +"'/><br />");
);
)
</script>
</body>
</html>
php jquery
php jquery
edited Nov 14 '18 at 4:25
DarkSuniuM
7881019
asked Nov 14 '18 at 3:19
InFocusInFocus
136
edited Nov 14 '18 at 4:25
DarkSuniuM
7881019
asked Nov 14 '18 at 3:19
InFocusInFocus
136
edited Nov 14 '18 at 4:25
DarkSuniuM
7881019
edited Nov 14 '18 at 4:25
DarkSuniuM
7881019
edited Nov 14 '18 at 4:25
DarkSuniuM
7881019
7881019
asked Nov 14 '18 at 3:19
InFocusInFocus
136
asked Nov 14 '18 at 3:19
InFocusInFocus
136
asked Nov 14 '18 at 3:19
InFocusInFocus
136
136
Check all html start and end tags.
– Delwar Sumon
Nov 14 '18 at 4:03
add a comment |
Check all html start and end tags.
– Delwar Sumon
Nov 14 '18 at 4:03
Check all html start and end tags.
– Delwar Sumon
Nov 14 '18 at 4:03
Check all html start and end tags.
– Delwar Sumon
Nov 14 '18 at 4:03
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53292713%2fauto-increment-code-using-jquery-on-dynamic-form%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53292713%2fauto-increment-code-using-jquery-on-dynamic-form%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Check all html start and end tags.
– Delwar Sumon
Nov 14 '18 at 4:03