How to create select box via jquery - javascript

Hello everyone i am using a webform where with 5 input box and a select box i am giving a button when anyone click on that button a new row appear with same 5 input fields and 1 select box. I am able to display input box but unable to display select box.
How to create select box via jquery.
HTML PHP CODE
<?php
$i=1;
while($roold = mysql_fetch_array($result_ss_bill_item))
{
?>
<div id="entry<?php echo $i;?>" class="clonedInput">
<div class="col-md-6"><input class="particulares" type="text" name="particulares_<?php echo $i;?>" id="particulares_<?php echo $i;?>" required="required" value="<?php echo $roold['particulares'];?>"></div>
<div class="col-md-1"><input class="challan" type="text" name="challan_<?php echo $i;?>" id="challan_<?php echo $i;?>" required="required" value="<?php echo $roold['challan'];?>"></div>
<div class="col-md-1"><input class="qty" type="text" name="qty_<?php echo $i;?>" id="qty_<?php echo $i;?>" required="required" value="<?php echo $roold['qty'];?>"></div>
<div class="col-md-1"><input class="rate" type="text" name="rate_<?php echo $i;?>" id="rate_<?php echo $i;?>" required="required" value="<?php echo $roold['rate'];?>"></div>
<div class="col-md-1"><input class="amount" type="text" name="amount_<?php echo $i;?>" id="amount_<?php echo $i;?>" required="required" value="<?php echo $roold['amount'];?>"></div>
<div class="col-md-2">
<select class="taxtype" name="tax_<?php echo $i;?>">
<option>Vat</option>
<option>Service Tax</option>
</select>
</div>
</div>
<?php
$i=$i+1;
}
?>
<div class="col-md-12">
<button class="submit btn btn-danger" type="button" id="btnAdd" value="add section">Add New </button>
</div>
JQUERY CODE
$('#btnAdd').click(function () {
var num = $('.clonedInput').length, // how many "duplicatable" input fields we currently have
newNum = new Number(num + 1), // the numeric ID of the new input field being added
newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('fast'); // create the new element via clone(), and manipulate it's ID using newNum value
document.getElementById("totalrecord").value=+newNum;
newElem.find('.particulares').attr('id', 'particulares_' + newNum).attr('placeholder', 'Particulares').attr('name', 'particulares_' + newNum).val('');
newElem.find('.challan').attr('id', 'challan_' + newNum).attr('placeholder', 'challan').attr('name', 'challan_' + newNum).val('');
newElem.find('.qty').attr('id', 'qty_' + newNum).attr('placeholder', 'Qty').attr('name', 'qty_' + newNum).val('');
newElem.find('.rate').attr('id', 'rate_' + newNum).attr('placeholder', 'Rate').attr('name', 'rate_' + newNum).val('');
newElem.find('.amount').attr('id', 'amount_' + newNum).attr('placeholder', 'Amount').attr('name', 'amount_' + newNum).val('');
});


$('#addSelectBtn').click(function(){
$('#container').append('<select><option>OPTION 1</option><option>OPTION 2</option></select>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='addSelectBtn'>Add Select</div>
<div id='container'></div>


newElem.find('.taxtype').attr('id', 'taxtype_' + newNum).attr('name', 'taxtype_' + newNum).val('');
Thanks everyone,


I think you have to add the new element to your dom. The function you should use is appendChild().
For example
document.getElementById("parent").appendChild(newElem).

Related

Only last value from JavaScript in while loop is displayed

I'm working on the code displaying in the while loop data received from the database. Within that code there is a form in which I added a hidden input (name="position"). I'd like to use that input to store number of pixels from the top of the window. Unfortunately, the javascript added by me, changes the value of the hidden input only in the last table in the loop. In the first tables the hidden input named "position" remains unchanged (remains empty). Could anyone please help me?
<?php
while ($row = $wynik->fetch_assoc()) {
?>
<form method="post" style="margin-bottom: 0px;" onsubmit="poz()">
<input type="hidden" name="edition" value="<?php echo $row["id"]; ?>">
<input type="hidden" id="<?php echo $row["id"]; ?>" name="position" value="">
<input type="submit" value="Edytuj" class="edytuj">
</form>
<script>
function poz() {
var position = window.pageYOffset;
document.getElementById(<?php echo $row["id"]; ?>).value = position;
}
</script>

You need to add an event listener to know what is clicked
window.addEventListener("load",function() {
[...document.querySelectorAll(".edytuj")].forEach(function(elem) {
elem.addEventListener("click",function (e) {
var tgt = e.target;
tgt.previousElementSibling.value=tgt.offsetTop;
})
});
})
<input type="hidden" name="edition" value="<?php echo $row["id"]; ?>">
<input type="hidden" id="<?php echo $row["id"]; ?>" name="position" value="">
<input type="button" value="Edytuj" class="edytuj">

multiple dynamic class ids with select-option using change function in jquery

I'm trying to get class id for a dynamic table rows, the first row is working perfectly when it's selected, but the other rows are being fetched from java-scripts and are not working.
i.e. I can't get the class ids from the rows that is fetching from the java-script table row.
//this is jquery function am using....
$('#course_code').click(function(){
var course_id = $('#course_code').val();
if(course_id != '')
{
$.ajax({
url:"<?php echo base_url('Undergraduate_pg/fetch_course_code'); ?>",
method:"POST",
data:{course_id:course_id},
success:function(data){
$('#course_cod').val(data);
}
})
}
})
//this is the javascript table rows that is loading dynamically using click button..
function addrows(){
var row = ($('.detail tr').length-0)+1;
var tr = '<tr>' +
'<th>'+row+'</th>' +
'<td><select class="form-control course_code" id="course_code" name="course_code[]" required><option value="" selected="selected">Select Course Code</option><?php if (isset($pos)) { ?><?php foreach ($pos as $row) { ?>
echo "<option> <?php echo $row->course_code; ?></option>";<?php } } ?></select></td>' +
'<td><select class="form-control course_title" id="Title" name="course_title[]" required><option value="" selected="selected">Select Course Title</option><?php if (isset($pos)) { ?><?php foreach ($pos as $row) { ?>
echo "<option> <?php echo $row->course_title; ?></option>";<?php } } ?></select></td>' +
'<td><input type="number" class="form-control unit_elect" id="course_units" name="course_unit[]" value="" required></td>' +
'<td><select class="form-control course_status" id="course_status" name="course_status[]" required><option value="" selected="selected">Select Course Status</option><?php if (isset($pos)) { ?><?php foreach ($pos as $row) { ?>
echo "<option> <?php echo $row->course_status; ?></option>";<?php } } ?></select></td>' +
'<td colspan="3"><a class="btn btn-danger remove" >X</a></td>'+
'</tr>';
$('.detail').append(tr);
}
</script>
//i expect both static row and the dynamic row should be working once selected..
<!--this is the html code.. note, only this is working....-->
<tbody class="detail">
<td>1</td>
<td><select class="form-control course_code" id="course_code" name="course_code" required>
<option value="">--Select Course Code--</option>
<?php if (isset($pos)) { ?>
<?php foreach ($pos as $row) { ?>
echo "<option value="<?php echo $row->course_id; ?>"> <?php echo $row->course_code; ?></option>";
<?php } } ?>
</select>
<input type="text" class="form-control course_cod" id="course_cod" name="course_code[]" required>
</td>
I expect both static row and the dynamic row should be working once selected.

how to select closest or next div in jquery

i have a php while loop in which there are multiple outputs of posts in whcih people can comment now i want to hide the posts comments on which submit button is clicked
this is my code
<form method="POST" action="" >
<div class="commentdiv">
<input type="hidden" name="id" id="id" class="id" value="<?php echo $pixid;?>">
<input type="hidden" name="username" id="username" value="<?php echo $activeusername;?>">
<input type="hidden" name="uid" id="uid" value="<?php echo $id3;?>">
<textarea style="" name="comment" id="comment" class="comment" placeholder=" comment here"></textarea>
<button type="button" style="background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
color: #3897f0; font-weight:600;" class="submit" id="button_id">comment</button>
</div>
</form>
<div id="comments" class="comments">
<?php
$sql = "SELECT * FROM comment where post_id='$pixid' order by time2 desc limit 3";
$results = mysqli_query($con,$sql);
if (mysqli_num_rows($results)>0) {
while ($row = mysqli_fetch_assoc($results)) {
$commentid = $row['id'];
$comment = $row['comment'];
$string = covertHashtags($comment);
echo "<p class='written'>";
echo "<a href='users2?id=".$row['user_id']."' style='color:black !important;'><b>".$row['username']."</b></a>";
echo " ".$string;
$sql3 = "SELECT * FROM comment where id ='$commentid' and user_id='$id' order by comment desc limit 5 ";
$results3 = mysqli_query($con,$sql3);
if (mysqli_num_rows($results3)>0) {
echo "<div class='dropdown'>
<img src='ellipsis.png' class='dots'>
<div class='dropdown-content'>
<br><p class='delete' data-delete=".$commentid.">delete</p>
</div>
</div>";
}
else{
echo "";
}
echo "</p>";
}
}else{
echo "";
}
?>
</div>
</div>
<br><br>
<?php } ?>
this is all in a while loop so all output have same classes now if i click on submit button of first post so i want the comment section of that post to dissapear not of all the posts only that particular posts's comment div
ive tried
$(this).closest('.comments').next('.comments');
and
$(this).closest('.comments');
$(this).next('.comments');
but no luck nothing is happening in return plzz help me

The comments are in a div next to the form which contains the button.
So on click of that button, it would be:
$(this).closest("form").next(".comments").hide();

Get values from php loop and multiple those values on keyup

I have a PHP loop created dynamically with two text boxes and one result column.
What i need is , just multiple the values entering first two boxes and show result in its near Result box.
The PHP loop
<?php
$sql=$db->query("SELECT * FROM calc");
foreach($sql as $row)
{
?>
<div class="calc">
<input type="text" id="txt1id<?= $row['id'] ?>" onkeyup="multiple()">
<input type="text" id="txt2id<?= $row['id'] ?>" onkeyup="multiple()">
<input type="text" id="resultid<?= $row['id'] ?>" title="Result shows here automatically">
</div>
<?php } ?> // loop ends here.
And script is
<script>
function multiple()
{
// how to get two different variables like this with different id to multiple ?
var firstBox = parseInt(document.getElementById(firstid).value);
var secondBox = parseInt(document.getElementById(secondid).value);
}
</script>

Pass row id to the function like this
<div class="calc">
<input type="text" id="txt1id<?= $row['id'] ?>" onkeyup="multiple(<?= $row['id'] ?>)">
<input type="text" id="txt2id<?= $row['id'] ?>" onkeyup="multiple(<?= $row['id'] ?>)">
<input type="text" id="resultid<?= $row['id'] ?>" title="Result shows here automatically">
</div>
And change in JS like below
<script>
function multiple(rowid)
{
var firstBox = parseInt(document.getElementById("txt1id"+rowid).value);
var secondBox = parseInt(document.getElementById("txt2id"+rowid).value);
}
</script>

JavaScript Form Cloning

I am trying to clone simple "directors / members" form. When I hit "add member button" it clones everything the form, but it does not erases zip code field. Also, when I submit the form it does not submit the first two fields of the cloned forms. It takes values of first name and last name and assigns it to address and city and so on... So, to summarize it does not send two fields, and I think it's state and zip fields of cloned forms that give me troubles, but I can't see why.
$y=0; $clone=1; do{ ?>
<div id="<?php echo "clonedSection$clone"; ?>" class="clonedSection" >
<p style="margin-left:350px; font-size: 14px;"><label id="<?php echo "member_label$clone"; ?>" > <?php echo "Director / Member $clone"; ?></label> </p><br><br>
<p style="margin-left:370px;">First name<input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_firstname$clone"; ?>" id="<?php echo "member_firstname$clone"; ?>" value="<?php echo $split_members[$y][0];?>"> <span class="error"> <?php echo $member_errors[$y]["member_first_name"];?></span> </p>
<p style="margin-left:373px; ">Last name<input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_lastname$clone"; ?>" id="<?php echo "member_lastname$clone"; ?>" value="<?php echo $split_members[$y][1];?>"> <span class="error"> <?php echo $member_errors[$y]["member_last_name"];?></span> </p>
<p style="margin-left:350px; ">Street address<input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_address$clone"; ?>" id="<?php echo "member_address$clone"; ?>" value="<?php echo $split_members[$y][2];?>"> <span class="error"> <?php echo $member_errors[$y]["member_address"];?></span> </p>
<p style="margin-left:405px; ">City <input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_city$clone"; ?>" id="<?php echo "member_city$clone"; ?>" value="<?php echo $split_members[$y][3];?>"> <span class="error"> <?php echo $member_errors[$y]["member_city"];?></span> </p>
<p style="margin-left:402px;">State<select style="margin: 2px; margin-left: 5px; margin-right: 5px;" name="<?php echo "member_state$clone"; ?>" id ="<?php echo "member_state$clone"; ?>">
<?php //$states = listStates(statesList());
foreach($states as $value){
echo '<option >'.$value.'</option>';
} echo '<option selected>'.$split_members[$y][4].'</option>'; ?>
</select> <span class="error"> <?php echo $member_errors[$y]["member_state"];?></span> </p>
<p style="margin-left:384px;">ZIP code<input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_zip$clone"; ?>" id="<?php echo "member_zip$clone"; ?>" value="<?php echo $split_members[$y][5];?>"> <span class="error"> <?php echo $member_errors[$y]["member_zip"];?></span> </p>
</div>
<?php $y++; $clone++; } while ($y < count($split_members)); ?>
And I use the following javascript:
$(document).ready(function() {
$("#btnAdd").click(function() {
$("#btnDel").prop("disabled",false);
var num = $(".clonedSection").length;
var newNum = new Number(num + 1);
var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
newSection.children(":nth-child(1)").children(":first").attr("id", "member_label" + newNum);
newSection.children(":nth-child(2)").children(":first").attr("name", "member_firstname" + newNum).attr("id", "member_firstname" + newNum).attr("value", "");
newSection.children(":nth-child(3)").children(":first").attr("name", "member_lastname" + newNum).attr("id", "member_lastname" + newNum).attr("value", "");
newSection.children(":nth-child(4)").children(":first").attr("name", "member_address" + newNum).attr("id", "member_address" + newNum).attr("value", "");
newSection.children(":nth-child(5)").children(":first").attr("name", "member_city" + newNum).attr("id", "member_city" + newNum).attr("value", "");
newSection.children(":nth-child(6)").children(":first").attr("name", "member_state" + newNum).attr("id", "member_state" + newNum).attr("value", "");
newSection.children(":nth-child(7)").children(":first").attr("name", "member_zip" + newNum).attr("id", "member_zip" + newNum).attr("value", "");
$(".clonedSection").last().append(newSection);
elem = document.getElementById('member_label' + newNum);
elem.innerHTML = "Director / Member " + newNum;
if (newNum == 12)
$("#btnAdd").prop("disabled",true);
});
$("#btnDel").click(function() {
var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have
$("#clonedSection" + num).remove(); // remove the last element
// enable the "add" button
$("#btnAdd").prop("disabled",false);
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$("#btnDel").prop("disabled",true);
});
//$("#btnDel").attr("disabled","disabled");
$("#btnDel").prop("disabled",true);
var count = $(".clonedSection").length;
if (count > 1)
$("#btnDel").prop("disabled",false);
//$("#btnDel").disabled = false;
});

You're making it way more complex than needed.
If you have an input <input name="example[0]" /> and clone that, and try to make it <input name="example[1]" /> with weird increments and such, just use the array version:
<input name="example[]" value="My key will be 0" />
<input name="example[]" value="My key will be 1" />
<input name="example[]" value="My key will be 2" />
To use this again in php:
foreach($_POST['example'] as $key =>$value){
echo $key.': '.$value.'<br />';
echo $key.': '.$_POST['anotherName'][$key]; // (example for another variable)
}
As you can see, a lot less complicated and much easier to read and maintain. This way you can clone your form without having to worry about which number it is, you can easily loop through them.
If you aren't used to this, I still recommend to try this, maybe only in a small test setup. Controlling arrayed forms is a skill with a lot of value.

Categories