We Keep Coding

Post multiple data using Jquery/Ajax

I have this script below that sends only 1 value to the requested URL, but now I need to adjust it to accept 2, I couldn't find a way to do that.
Each checkbox is accompanied by an input hidden named #note, I need to pass this #note value (that's my order ID) together.
$('#importaNF').click(function(){
var checkbox = $('.import_checkbox:checked');
if(checkbox.length > 0)
{
var checkbox_value = [];
$(checkbox).each(function(){
checkbox_value.push($(this).val());
});
$.ajax({
url:"<?php echo base_url(); ?>adm/pedidos/importaNF",
method:"POST",
data:{checkbox_value:checkbox_value},
success:function()
{
$('.removeRow').fadeOut(1500);
}
})
}
else
{
alert('Select atleast one records');
}
}
My HTML
<div class="btn-group">
<input type="checkbox" class="import_checkbox" name="import_checkbox" value="<?= $registro->NUMERO ?>">
<input type="input" id="note" class="import_input" name="import_input" value="<?= $registro->FATURA ?>" style="visibility:hidden">
</div>

I may be misinterpretting, but you can just extract it like you did the checkbox value and add a second property to the data object:
data:{checkbox_value:checkbox_value, note_value: note_value},
Unless you mean you're trying to pass a second url parameter?

How can I store a user's score in a variable on my website using PHP and/or JavaScript?

Right now I am displaying a question and its possible answers in a modal on my page (shown below). The "submit answer" button will post the form but I can't use it in my situation (I explain this at the bottom of this post) so please ignore it.
I use the HTML & PHP code below to do retrieve the question and answers from my database.
<!-- The Modals -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<!-- display question as heading -->
<?php
while ( $row = $result->fetch_assoc() ) {
echo "<h3>" . $row[ "question" ] . "</h3>";
}
?>
<button id="close1" class="close">×</button>
</div>
<div class="modal-body">
<form action="#" method="post" id="quiz">
<!-- display answers as radio -->
<div>
<?php
while ($id = $choice_idResult1->fetch_assoc()) {
echo '<input type= "radio" name="question1_answers" id="question1_answers_A" value= "' . $id["choice_id"] . '"';
}
?>
<label for="question1_answers_A">
<?php while($row = $result2->fetch_assoc()) {echo $row["choice_text"];}
$answer1 = $row;
?>
</label>
</div> .....
When the "Open Modal 2" button is clicked, the JavaScript code below closes the modal and opens the next.
btn2.onclick = function() {
checkRadio('question1_answers_B');
modal.style.display = "none";
modal2.style.display = "block";
}
As you can see, I've called a function called checkRadio and passes it the id of the radio input that is the correct answer.
checkRadio then uses an if statement to check whether that radio is checked and if it is it calls another function that increments a variable tally.
var tally = 0;
function checkRadio(id) {
if (document.getElementById(id).checked) {
addTally();
}
}
function addTally() {
tally++;
}
I then have a function called showTally that I want to display the tally in the header of the next modal (for testing purposes). However, nothing shows up in the next modal no matter what I select.
function showTally() {
document.getElementById("tally").innerHTML = tally;
}
And in the modal header:
<h3 id="tally"></h3>
In plain English, I need to be able to identify which radio input has been selected by the user so that I can check it is the correct answer and add to the tally which will be displayed after the last question.I can't actually post the form as it will close the modal.
If you need more screenshots or information please let me know.

You can use localStorage or sessionStorage, it can save info to the session, the info exists when you refresh or redirect html page (same domain).
Here is usage below:
var tally = localStorage.getItem('tally') || 0
function addTally() {
tally++;
localStorage.setItem('tally', tally)
}

I may be misunderstanding the question, but this may help you.
var myAnswers1 = document.querySelector("question1_answers");
for(var i=0;i<myAnswers1.length;i++)
{
console.log("Question 1, radio index " + i + " is " + myAnswers1[i].checked + ".");
}
Sample Output:
Question 1, radio index 0 is false.
Question 1, radio index 1 is true.
Question 1, radio index 2 is true.

Codeigniter Javascript dynamic inputs only submitting first item

I am trying to submit a form with dynamic inputs. I am able to add a several inputs via the javascript. However, when I submit, it only picks up the first added input value. I hope someone can take a look at this for me as I've tried to fix this for so long. Thank you
Controller
public function update(){
$this->form_validation->set_rules('first_name', 'Firstname', 'trim|required|xss_clean');
$this->form_validation->set_rules('last_name', 'Lastname', 'trim|required|xss_clean');
$this->form_validation->set_rules('phone_number', 'Phone', 'trim|required|xss_clean');
$this->form_validation->set_rules('date_of_birth', 'Date of Birth', 'trim|required|xss_clean');
$this->form_validation->set_rules('address', 'Address', 'trim|required|xss_clean');
$this->form_validation->set_rules('country', 'Country', 'trim|required|xss_clean');
$this->form_validation->set_rules('active', 'Is Active', 'trim|required|xss_clean');
$id = $this->input->post('id');
$person_id = $this->input->post('person_id');
$first_name = $this->input->post('first_name');
$last_name = $this->input->post('last_name');
$date_of_birth = $this->input->post('date_of_birth');
$phone_number = $this->input->post('phone_number');
$account_number = $this->input->post('account_number');
$address = $this->input->post('address');
$country = $this->input->post('country');
$active = $this->input->post('active');
if($this->form_validation->run()==false){
$this->edit();
}else{
$person = array(
'first_name'=>$first_name,
'last_name'=>$last_name,
'date_of_birth'=>$date_of_birth,
'phone_number'=>$phone_number,
'address'=>$address,
'country'=>$country,
);
$account = array(
'is_active'=>$active
);
print_r($account_number);
}
}
View
<script>
$(document).ready(function(){
var max_fields = 5;
var wrapper = $("#new_account_number_container");
var addInput = $("#addInput");
var i;
$(addInput).click(function(e){
i = $("#new_account_number_container input").length;
e.preventDefault();
if(i<max_fields){
i++;
$(wrapper).append('<div><input type="text" name="account_number[]" class="form-control" placeholder="Account Number" required autofocus>Remove<div>');
}
});
$(wrapper).on("click",".remove", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove();
i--;
});
});
</script>
<div id="new_account_number_container" class="form-group col-sm-8">
<input type="text" name="account_number[]" class="form-control" placeholder="Account Number" autofocus>
<br>
</div>
<div class="form-group col-sm-8">
<button class="pull-right btn btn-primary" id="addInput">Add</button>
</div>

First thing, I can not see <form> in your code. Without this tag, you can not get desired behaviour:
After that,
To give you formatted code snippet I am posting that suggestion as an answer:
// this is the id of the form
$("#form_id").submit(function(e) {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#form_id").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});

We need to remember that, PHP serves as back-end application. So anything dynamic (like DOM input text in your case) may NOT be submitted simply because the <form> tag is not updated that you have new text-box input.
One of the thing you could do is to use ajax for form submitting. Because it is Client-Side Script, it could detect all DOM input text box on your page, and serialized it before send the request to the back-end.
First by adding a <form> tag between your input and button component. Example like <form id="frm" name="frm">.
Second, by adding a button which trigger a JavaScript function.
function update(){
if(confirm("Are you sure?")==true){
$.post(
"*absolute_project_root_path*/*controller*/update",
$('#frm').serialize(),
function(response){
//what to do with your response..
}
);
}
return false;
}
Then you can access the submitted form in the back-end like usual.

Clear text area on radio button click and get text instead of value jquery

Here i am able to clear data but when i push value from other radio button its load again previous data which i don't want.
I want textarea data should be clear permanently on radio button click and should not load with any other.
Here is my code
<div class="portlet-body">
#foreach($students as $student)
<div>
<input type="radio" value="{{$student->id}}" name="student_lists[]" onclick="getdata( {{ $student->id }} )"/>
{{$lists->name}}
<span></span>
</div>
<div id="students-data"></div>
#endforeach
</div>
script
<script>
function getdata(id)
{
$('#textbx').val(null);
$.ajax({
url: '/students/'+id,
type: "POST",
success: function (data) {
$('#students-data').html(data);
}
});
}
Controller method to get HTML
public function loadData($id)
{
$students = DB::table('students')->select('name' , 'id')->where('user_id' , $id)->get();
$data = '';
$data .= '<div class="form-group">
<label class="control-label col-md-1">
</label>
<div class="col-md-8">
<label class="">';
foreach ($students as $student) {
$data .= "<input type='checkbox' class='chkbx' name='custom' onclick='push()' value='{$student->name}'/> {$student->name}
<span></span>";
}
$data .='</label>
</div>
</div>';
return $data;
}
Script to push data in text area
<script>
function push()
{
$checks = $(".chkbx:checkbox");
$checks.on('change', function() {
var data = $checks.filter(":checked").map(function(i,v){
return this.value;
}).get().join("\n");
$('#textbx').val(data);
});
}
</script>
Textarea where i push values
<textarea name="fields" id="textbx" class="form-control" rows="8" ></textarea>
Please help how can i hard reset textarea value.

Remove the push function, keep the change event and delegate it so you can trigger the code on the dynamically added elements, select the checkboxes relative to your clicked checkobx
$(function(){
$('body').on('change',".chkbx:checkbox", function() {
var data = $(this).parent().find(':checkbox:checked').map(function(i,v){
return $(v).val();
}).get().join("\n");
$('#textbx').val(data);
});
});
if you have student->id as a value and want student->name to be apppended to the textarea then you need to alter your html as follows
add a custom attribute called data-name with the student name
$data .= "<input type='checkbox' class='chkbx' name='custom' data-name=' {$student->name}' value='{$student->name}'/> {$student->name}
<span></span>";
and the js map to return:
return $(v).attr('data-id');

At beginning before looping statement initialize your student-data variables to 0 or null.
All the variables you want to display should be initialized to 0 or NULL, so that every time function is called first the values will be set to null then for loop stores its values.

Comments only posting to most recent status update

The news feed on the sites dashboard I'm working on has multiple items from different users; and can also be commented on. However, whenever you write a comment under each post, it only posts to the post at the top of the feed (the most recent one). Comments are posted instantly by pressing the enter key, which then runs this JS code which is on the index.php page.
$(function(){
$('#comment_body').live( 'keypress' , function (e) {
var boxVal = $(this).val();
var sendTo = $('#to_id').val();
if ( e.keyCode == '13' ) {
e.preventDefault();
$.post( 'instantcom.php' , { 'comment_body' : boxVal , 'activity_id' : sendTo } , function () {
// reload data or just leave blank
} );
$('#comment_body').val('');
}
} );
});
Then, the HTML for the comment box on each post is as follows:
<p align="center" style="height:45px;">
<input type="text" name="comment_body" id="comment_body" style="margin-top:12px;border:1px solid blue !important;width:329px;height:21px;" />
<span class=" glyphicons-icon camera" style="position:relative;bottom:50px;left:155px;"></span></p>
<input name="type" type="hidden" value="a" />
<input name="activity_id" id="to_id" type="hidden" value="' . $act_item_id . '" />
The ' . $act_item_id . ' is just a PHP variable which contains the unique ID of the status update.
So then, any ideas as to why comments are only posting to the most recent posts instead of the ones they're meant to post to?

You're using an id to identify which post you're commenting against? to_id right? Well, that's an id on the page, id's should be unique to the page.