Develop Reference

Is there any way to insert multiple data in a field of table and one specific data has different value on its field? Codeigniter

I am making a quiz app and one question must be correct. I can already insert multiple data in my table, the problem that i have is, I have a one specific choice or answer that must be different from the others.
A screenshot of the app and what im trying to do
Here's what my table looks like
table answers
id | answer | correct
1 | Apple | 1
2 | Mango | 0
3 | Melon | 0
1, indicate for correct answer and 0 indicate for incorrect.
So here is my Model.
I tried to make an attempt to fetch the radio button value which is the 1 value and insert it to the database but the result was, IF I add another data or multiple data. Index 0 or the first data was the only data that can be inserted. I CANNOT choose what radio button i can check only the FIRST button I can check.
// Insert questions
$field_question = array(
'question'=>$this->input->post('question'),
);
$this->db->insert('questions', $field_question);
// Insert Answers
$data_answer = $this->input->post('choice[]');
$data_is_correct = $this->input->post('checkChoice[]');
$value = array();
for($i = 0; $i < count($data_answer); $i++) {
$value[$i] = array(
'answer' => $data_answer[$i],
'correct' => $data_is_correct[$i],
'question_id' => $this->db->insert_id(),
);
}
$this->db->insert_batch('answers', $value);
if($this->db->affected_rows() > 0){
return true;
}else{
return false;
}
Problem of my table if I add 3 new data
id | answer | correct
1 | Apple | 1
2 | Mango | 0
3 | Melon | 0
* New 3 Data Inserted
4 | Orange | 1
5 | Tomato | 0
6 | Grapes | 0
I cannot makeTomato or Grapes to be my answer or make it as value number 1 only Orange or the first added data.
VIEW
So here is my radio button
<div class="form-check">
<input class="form-check-input" type="radio" name="checkChoice[]" id="checkChoice" value="1" checked />
<label class="form-check-label" for="exampleRadios1">
Make this as an Answer
</label>
</div>
And my form.
<form method="post" id="myForm" action="<?php echo base_url(); ?>posts/addQuestion">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Question</span>
</div>
<input type="text" placeholder="Enter your Question" name="question" id="question" class="form-control" required />
</div>
<hr>
<h5>Create Choices: </h5>
<div class="input-group input-group-sm mb-3">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="hidden" name="choiceHid[]" value="0" /></td>
<td><input type="text" name="choice[]" id="choice" placeholder="Enter your Choice" class="form-control" /> </td>
<td><button type="button" name="add" id="add" class="btn btn-success"><span class="iconify" data-icon="ant-design:plus-circle-outlined" data-inline="false"></span> Add Response </button></td>
<td>
<div class="form-check">
<input class="form-check-input" type="radio" name="checkChoice[]" id="checkChoice" value="1" checked />
<label class="form-check-label" for="exampleRadios1">
Make this as an Answer
</label>
</div>
</td>
</tr>
</table>
</div>
</div>
<hr>
<input type="button" id="btnSave" class="btn btn-block btn-info" value="Submit" />
</form>
Script
<script>
$('#btnSave').click(function(){
var url = $('#myForm').attr('action');
var data = $('#myForm').serialize();
//validate form
$.ajax({
type: 'ajax',
method: 'post',
url: url,
data: data,
async: false,
dataType: 'json',
success: function(response){
if(response.success){
$('#myForm')[0].reset();
if(response.type=='add'){
var type = 'added'
}
swal("Success!", "You created a Question!", "success");
}else{
alert('Error');
}
},
error: function(){
alert('Could not add data');
}
});
});
</script>
Dynamic Field Script
<script>
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append(
'<tr id="row'+i+'">'+
'<td><input type="hidden" name="choiceHid[]" value="0" /></td>'+
'<td><input type="text" name="choice[]" placeholder="Enter your Choice" class="form-control" /></td>'+
'<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove"><span class="iconify" data-icon="dashicons:remove" data-inline="false"></span></button></td>'+
'<td>'+
'<div class="form-check">'+
'<input class="form-check-input" type="radio" name="checkChoice[]" id="checkChoice" value="1" />'+
'<label class="form-check-label" for="exampleRadios1">'+
'Make this as an Answer'+
'</label>'+
'</div>'+
'</td>'+
'</tr>'
);
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
</script>

Dynamic Field Script
make variable val as a value of checkChoice like following...
<script>
$(document).ready(function(){
var i=1;
$('#add').click(function(){
var val =i;
i++;
$('#dynamic_field').append(
'<tr id="row'+i+'">'+
'<td><input type="hidden" name="choiceHid[]" value="0" /></td>'+
'<td><input type="text" name="choice[]" placeholder="Enter your Choice" class="form-control" /></td>'+
'<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove"><span class="iconify" data-icon="dashicons:remove" data-inline="false"></span></button></td>'+
'<td>'+
'<div class="form-check">'+
'<input class="form-check-input" type="radio" name="checkChoice" id="checkChoice" value="'+val+'" />'+
'<label class="form-check-label" for="exampleRadios1">'+
'Make this as an Answer'+
'</label>'+
'</div>'+
'</td>'+
'</tr>'
);
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
</script>
View
asign initial value of checkChoice as 0 like following
<div class="form-check">
<input class="form-check-input" type="radio" name="checkChoice" id="checkChoice" value="0" checked />
<label class="form-check-label" for="exampleRadios1">
Make this as an Answer
</label>
</div>
// Insert Answers
$data_answer = $this->input->post('choice[]');
$data_is_correct = $this->input->post('checkChoice');
$value = array();
for($i = 0; $i < count($data_answer); $i++) {
if($data_is_correct == $i) {
$correct = 1;
} else {
$correct = 0;
}
$value[$i] = array(
'answer' => $data_answer[$i],
'correct' => $correct,
'question_id' => $this->db->insert_id(),
);
}

Javascript Wrong tr info creating dynamic tables

I have a form that a user can fill out.
What i want to be able to do is allow to user to add more feilds if needed.
All works wells expect for one small part i cannot seem to get around. I have spent the last couple days trying to figure it out and its driving me crazy.
Javascript Code
<script>
var ed = 1;
function new_education()
{
ed++;
var div1 = document.createElement('div');
div1.id = ed;
var delLink = '<a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:deled('+ ed +')" > Delete Education ' + ed + ' </a>';
document.getElementById('educationtr').innerHTML = '<th colspan="4" style="background-color:#b0c4de;">Education ' + ed + '</th>';
div1.innerHTML = document.getElementById('educationtpl').innerHTML + delLink;
document.getElementById('education').appendChild(div1);
}
function deled(eleId)
{
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('education');
parentEle.removeChild(ele);
ed--;
}
</script>
HTML Code
<legend>Education</legend>
<div id="education">
<table border=3>
<tr><th colspan="4" style="background-color:#b0c4de;">Education 1</th></tr>
<tr><td><label>School Name</label><input type="text" name="schoolname[]" maxlength="30" size="30"><br></td>
<td><label>Degree Type</label><input type="text" name="degreetye[]" maxlength="30" size="30"><br></td>
<td><label>Degree Field</label><input type="text" name="degreefield[]" maxlength="30" size="30"><br></td>
</tr></table>
</div>
<a class="btn btn-info" href="javascript:new_education()" > Add New Education </a>
<div id="educationtpl" style="display:none">
<table border=3>
<tr id="educationtr"></tr>
<tr><td><label>School Name</label><input type="text" name="schoolname[]" maxlength="30" size="30"><br></td>
<td><label>Degree Type</label><input type="text" name="degreetype[]" maxlength="30" size="30"><br></td>
<td><label>Degree Field</label><input type="text" name="degreefield[]" maxlength="30" size="30"><br></td>
</tr></table>
</div>
jsfiddle example not working however http://jsfiddle.net/811yohpn/
Working Example: http://thenerdservice.com/addtest.php
What I would like to happen is each new table added will get a new heading "Education 2", "Education 3" etc but that does not happen.
What happens is when the button is hit to add new table the tr data will appear correct.
If you hit it once more it will increment the tr data however the delete buttons stay
correct.
If you hit the button more times the top tr data will continue to increment however the reat of the added tr data stays "Education 2"
Thank you

What I suggest is to rewrite new_education function using jQuery (I have tried to save most part of original code, but it wasn't so easy) fixing this problem with multiple same IDs.
Updated fiddle.
function new_education() {
ed++;
var newDiv = $('#education div:first').clone();
newDiv.attr('id', ed);
var delLink = '<a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:deled(' + ed + ')" > Delete Education ' + ed + ' </a>';
newDiv.find('tr:first th').text('Education ' + ed);
newDiv.append(delLink);
$('#education').append(newDiv);
}
Note: I also changed HTML, removing unnecessary extra table and wrapping first one with <div id="1"></div>:
<legend>Education</legend>
<div id="education">
<div id="1">
<table border=3>
<tr>
<th colspan="4" style="background-color:#b0c4de;">Education 1</th>
</tr>
<tr>
<td>
<label>School Name</label>
<input type="text" name="schoolname[]" maxlength="30" size="30"/>
</td>
<td>
<label>Degree Type</label>
<input type="text" name="degreetye[]" maxlength="30" size="30"/>
</td>
<td>
<label>Degree Field</label>
<input type="text" name="degreefield[]" maxlength="30" size="30"/>
</td>
</tr>
</table>
</div>
</div>
<br/>
<a class="js-addNew btn btn-info" href="javascript:new_education()"> Add New Education </a>

read input text value when button click in table

I have a table which is showing some title, and I want to take two values in input textboxs. Each input has id of record primarykey+MA or ..+MP. Additionally I have a confirm and cancel button.
Now what I want when user chooses one input value in text and when he/she click on confirm button, jQuery/JavaScript pick record id + both input text value and alert result...
many thanks
Razor/ HTML
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Multipart_Title)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Multipart_Title)
</td>
<td>
#Html.Label("Marks Available")
#Html.TextBox("Input_Marks_Available", null, new { id = #item.MultiPartID + "_MA", #class = "MultiPart_Marks_Available" })
#Html.TextBox("Input_Passing_Marks", null, new { id = #item.MultiPartID + "_MP", #class = "MultiPart_Passing_Marks" })
</td>
<td>
<input type="button" value="Confirm" name="button" class="k-button k-button-icontext multiPart_confirm" />
<input type="button" value="Cancel" name="button" class="k-button k-button-icontext multipart_cancel" />
</td>
</tr>
}
</table>
jQuery
$(document).ready(function () {
$(".multiPart_confirm").click(function () {
??????????
});
});

change your html as
<td>
<input type="button" value="Confirm" name="button" data-itemid="#item.MultiPartID" class='k-button k-button-icontext multiPart_confirm' />
<input type="button" value="Cancel" name="button" data-itemid="#item.MultiPartID" class="k-button k-button-icontext multipart_cancel" />
</td>
then modify code as
$(".multiPart_confirm").on('click', function(){
var parent = $(this).parent();
var itemId = $(this).attr('data-itemid');
var marksAv = parent.find("#" + itemId + '_MA');
var marksMp = parent.find("#" + itemId + '_MP');
// perform required action
alert("Marks Available: " + marksAv.val() + " Passing Marks: " + marksMp.val());
});

On your button click you can get the textbox value
var textbox = $(this).closest('tr').find('td:eq(1) input');
Now you can use the each function.
$(textbox).each(function(){
alert($(this).val());
});
Remember,eq is 0 based.You are trying to get value of second td textbox.So here it is 1.

You'l need to change buttons as:
<td>
<input type="button" value="Confirm" name="button" data-id="#item.MultiPartID" class="k-button k-button-icontext multiPart_confirm" />
<input type="button" value="Cancel" name="button" data-id="#item.MultiPartID" class="k-button k-button-icontext multipart_cancel" />
</td>
To be able to get record id on button click;
And your script should be kind of:
$(".multiPart_confirm").click(function () {
var recordId = $(this).data("id");
var marksAvailable = $("#" + recordId + "_MA").val();
var passingMarks = $("#" + recordId + "MP").val();
//do whatever you want
});

USE Some thing Like this
$(document).ready(function () {
$(".multiPart_confirm").click(function () {
$(".table").find('input[typr=text]').each(function(){
var value = $(this).val();
var txtID = $(this).attr('id');
alert(txtID + " = "+ value)
})
});
});

Knowing what button is pressed in Javascript

I was wondering if there was a way I could ask if a certain button was pushed so that it would do a certain thing in the function. I know I could split this up into two separate functions, but I want to know how to do this this way.
I'll put my code below.
function displaySort(form) {
var list = form.values.value.replace(/\s+/g, '')
list = list.split(/,/)
if (document.getElementById("fSort").form.input.id) {
list.sort()
var listAsString = list.join(", ")
form.sortedDisplay.value = listAsString
} else if (document.getElementById("rSort").form.input.id) {
list.sort(reverseCompare)
var listAsString = list.join(", ")
form.reverseSortedDisplay.value = listAsString
}
window.alert("Messed Up");
}
function reverseCompare(s1, s2) {
if (s1 < s2) {
return +1
} else if ( s1 == s2 ){
return 0
} else {
return -1
}
}
the form:
<form>
<table>
<tr>
<td>
<input type="text" name="values" value=" Bob, Ted, Carol,
Bette, Alice, Peter "
onclick="if (this.value == this.defaultValue) this.value=''"
size="80"
/>
<input type="button"
onclick="displaySort(this.form)"
value="Sort"
id="fSort"
/>
<input type="button"
onclick="displaySort(this.form)"
value="Reverse Sort"
id="rSort"
/>
<input type="reset"
value="Reset Form"
/>
</td>
</tr>
<tr>
<td>
<input type="text" name="sortedDisplay" value="Sorted list will show here"
size="35"
readonly
style="font-size:24pt;font-weight:normal;"
/>
</td>
</tr>
<tr>
<td>
<input type="text" name="reverseSortedDisplay"
value="Reverse sorted list will show here"
size="35"
readonly
style="font-size:24pt;font-weight:normal;"
/>
</td>
</tr>
</table>
</form>

Add another parameter to the function button:
function displaySort(form, button)
{ ...
And pass the button reference to it when clicked:
<input type="button"
onclick="displaySort(this.form, this)"
value="Reverse Sort"
id="rSort"
/>

printing out a list of orders from a form using JS

I've been searching all over and can't seem to find an answer to my simple question. Basically I have created this form and a textarea below, I want to have my orders(you can make multiple orders using the same form) show up in the textarea below with the order number beside it.
I can't figure out how to do it. My problem is that I just keep over riding the first post, and I cant get my number to increment. Any help would be great!
Here is my form...
<div id="wrapper">
<h2>EMARKS REQUEST FORM</h2>
<table border="1">
<form id="requestForm">
<tr>
<td>ID</td>
<td><input type="text" class="inputText" id="id"/></td>
</tr>
<tr>
<td>Course Number</td>
<td><input type="text" class="inputText" id="courseNum" /></td>
</tr>
<tr>
<td>Description</td>
<td><input type="text" class="inputText" id="des" /></td>
</tr>
<tr>
<td>Distance Education</td>
<td id="checkBox"><input type="checkbox" id="distance"/></td>
</tr>
<tr>
<td>Additional Marks</td>
<td><input type="text" class="inputText" id="marks" /></td>
</tr>
</table> <br/>
Number of Courses <input type="text" value="0" /> Total Cost <input type="text" value="0" id="totalCost" /> <br/> <br/>
<h2 style="display:inline">Reasons:</h2>
<input type="radio" value="Doctor Note" />Doctor Note <input type="radio" value="Lack of Work" />Lack of Work <input type="radio" value="Some Compassion" />Some Compassion <br/><br/>
<input type="button" value="Go for It" onclick="getPrice()" /> <input type="button" value="Clear and Reset" />
<select>
<option value="First Time User">First Time User</option>
<option value="Frequent Flier">Frequent Flier</option>
<option value="Buying a Degree">Buying a Degree</option>
</select>
<h2>Summary of Your Request(s)</h2>
<textarea rows="10" cols="63" id="summary">
test
</textarea> <br/>
<h2>Danger Range</h2>
<textarea rows="10" cols="63">
test
</textarea>
</form>
</div>
And my Javascript
var itemNum = 0;
itemNum++;
var textBoxes = itemNum + " " + document.getElementById("id").value + " " + document.getElementById("courseNum").value + " " + document.getElementById("des").value + " " + document.getElementById("marks").value +" " + totalCost.value;
var summaryInfo = textBoxes;
summary.text = summaryInfo;

Use += to APPEND a string to an existing string.
summary.value += summaryInfo
Also, you are initializing itemNum to 0, then incrementing it by 1, EVERY time you execute. You need to initialize it ONCE, then increment it EVERY time, to get the effect you want.
var itemNum = 0;
function MyButtonClickHandler()
{
itemNum++;
var textBoxes = itemNum + " " + document.getElementById("id").value + " " + document.getElementById("courseNum").value + " " + document.getElementById("des").value + " " + document.getElementById("marks").value +" " + totalCost.value;
var summaryInfo = textBoxes;
summary.value += summaryInfo;
}

The problem’s here:
summary.text = summaryInfo;
The property is value, not text.

Here three things, you have problem:-
form tag is not opened/closed on the correct place
summary variable is not declared.
As minitech said, there is no property called text. It is value.
Do this way
document.getElementById("summary").value = textBoxes;

If(itemnum==""){
Itemnum=1;
}
Else
{
Itemnum=Itemnum+1;
}
Check the syntax please