We Keep Coding

Made button form and in js file its not triggering

I completed this form inside bootstrap table earlier it was working but after I added just option. Its not even triggering JS file code with only alert also while other buttons of different forms are triggering all these are in same JS file.
Here is form code : (Ps since using PHP called this file in index.php file this is other php file)
<div id="sixth-part" class=tabcontent>
<h2 class="main-headings">Painting</h2>
<form action="Controller/painting.php" method="POST" id="painting-form">
<table data-toggle="table">
<thead>
<tr>
<th colspan=4>Checkpoints and Record</th>
<th>Check</th>
<th>Incharge</th>
</tr>
</thead>
<tbody>
<tr style="display: none">
<td>
<p id="pumpserialno7"><?php echo("$model");?></p>
</td>
</tr>
<tr>
<td>33</td>
<td colspan="3">
<div class="form-group" style="float:left">
<label for="application-record" >Application record sheet filled and maintained</label>
</div>
</td>
<td colspan=1>
<input type="checkbox" class="form-check-input" id="check-34">
</td>
<td><?php echo $login_session; ?></td>
</tr>
<tr>
<td>34</td>
<td colspan="3">
<div class="form-group" style="float:left">
<label for="blasting-record" >Blasting record sheet available</label>
</div>
</td>
<td colspan=1>
<input type="checkbox" class="form-check-input" id="check-35">
</td>
<td><?php echo $login_session; ?></td>
</tr>
<tr>
<td>35</td>
<td colspan="3">
<div class="form-group" style="float:left">
<label for="sample-plates" >Sample plates available with proper traceability to batch of painting</label>
</div>
</td>
<td colspan=1>
<input type="checkbox" class="form-check-input" id="check-36">
</td>
<td><?php echo $login_session; ?></td>
</tr>
<tr>
<td>36</td>
<td colspan="3">
<div class="form-group" style="float:left">
<label for="visual-inspection" >Visual Inspection & DFT</label>
</div>
</td>
<td colspan=1>
<input type="checkbox" class="form-check-input" id="check-37">
</td>
<td><?php echo $login_session; ?></td>
</tr>
<tr>
<td>37</td>
<td colspan="3">
<div class="form-group" style="float:left">
<label for="antirush-coating" >Antirust Coating</label>
<select name="antirush-coating" id="antirushcoating">
<option value="Phenolic Varnish">Phenolic Varnish</option>
<option value="Redoxide">Redoxide</option>
<option value="Others">Others</option>
</select>
</div>
</td>
<td colspan=1>
<input type="checkbox" class="form-check-input" id="check-37-a">
</td>
<td><?php echo $login_session; ?></td>
</tr>
<tr>
<td colspan=6 style="text-align:center">
<button style="width:700px" type="submit" id="painting" class="btn btn-primary painting-btn">Freeze</button></td>
</tr>
<tr style="display: none;">
<td><p id="eid6"><?php echo $login_session; ?></p></td>
</tr>
</tbody>
</table>
</form>
</div>
<div id='response6'></div>
Here is JS code :
$(document).ready(function() {
$('#painting-form').submit(function(event) {
alert("hi");
var formData = {
pumpserialno: $("#pumpserialno7").text(),
antirushcoating: $("#antirushcoating").val(),
eid:$("#eid6").text()
}
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'Controller/painting.php', // the url where we want to POST
data : formData, // our data object
dataType : 'text', // what type of data do we expect back from the server
encode : true,
success: function( data ) {
$("#response6").html(data);
},
error: function(xhr, status, error) {
// check status && error
},
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
$('#myModal').modal('show');
});
event.preventDefault();
// alert($("#visual-inspection").val());
});
});
Here is Index file code : (Called this file in this way)
include("Parts/Insert/part6.php");

Get data-id from url using javascript ajax

i've got stuck to get the data-id value from url. After user click the edit link from the url, i want to show the data in the modal dialog. I use the ajax script, but it doesnt work clearly. The modal dialog show an error warning.
This is my class_view.php
<script>
$(document).ready(function(){
$(".edit").on('click', function(e){
var id = $(e.relatedTarget).data('id');
$.ajax({
type: 'post',
url: "class/edit_class_form.php",
data: 'id=' + id,
success: function(data){
$('.show_class').html(data);
}
});
});
});
</script>
<table width="40%">
<thead>
<tr>
<th>No.</th>
<th>Kode</th>
<th>Name</th>
<th>Capacity</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$query = $db->prepare("SELECT * FROM class ORDER BY name ASC");
$query->execute();
for($no=1; $data = $query->fetch();){
?>
<tr>
<td><?php echo $no++;?></td>
<td><?php echo $data['code'];?></td>
<td><?php echo $data['type']." ".$data['name'];?></td>
<td><?php echo number_format($data['capacity'], 2, '.', ',');?> Ton</td>
<td>edit
</td>
</tr>
<?php };?>
</tbody>
</table>
</div>
<?php
include 'setting/class/edit_class_form.php';
?>
I use pure css modal. This is the code of my edit_class_form.php
<div id="edit_form" class="modal">
<div class="md-medium">
X
<h2>Edit Class</h2>
<form method="post" action="setting/class/edit_class_update.php" id="form" autocomplete="off">
<div class="md-content">
<table class="show_class">
<?php
require '../../inc/koneksi.php';
if($_POST['id']){
$id=$_POST['id'];
$stmt = $db->prepare("SELECT * FROM class WHERE id=:id");
$stmt->execute(array(':id' => $id));
?>
<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC)){?>
<tr>
<td>Class Code</td>
<td><input type="text" name="code" size="5" maxlength="3" value="<?php echo $row['code'];?>" required></td>
</tr>
<tr>
<td>Class Type</td>
<td><input type="text" name="type" size="10" maxlength="5" value="<?php echo $row['type'];?>" required></td>
</tr>
<tr>
<td>Class Name</td>
<td><input type="text" name="name" size="40" maxlength="35" value="<?php echo $row['name'];?>" required></td>
</tr>
<tr>
<td>Capacity</td>
<td><input type="text" name="capacity" size="15" value="<?php echo $row['capacity];?>"maxlength="11" required> Persons</td>
</tr>
</table>
<?php }}?>
</div>
<div class="md-footer">
Cancel
<input type="submit" value="insert"">
</div>
</form>
</div>
</div>
Can you help me?

You can get the data-id of an element in this way then you can add the value to the url for your ajax call and your data should be an object
data: {id: id}
You can also var_dump($_POST) to check what are you receiving in PHP
$(document).ready(function() {
$(".edit").on('click', function(e) {
$this = $(this);
const id = $this.data("id")
$.ajax({
type: 'post',
url: "class/edit_class_form.php",
data: {
id: id
},
success: function(data) {
$('.show_class').html(data);
}
});
});
});
.edit {
cursor: pointer;
background: green;
width: 90px;
padding: 20px;
text-align: center;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="edit" data-id="5445454">Click me </div>

What to use instead of innerHTML in jQuery to get value?

<table border="0" cellpadding="10" cellspacing="1" id="edit">
<tr>
<div class="input-label">
<td>Name:</td>
</div>
<td><div class="input-tbox"><input type="text" name="Myname" id="names" contenteditable="true" onblur="saveToDatabse(this,'name','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $name; ?>"/></div></td>
</tr>
<tr>
<td>Username:</td>
<td><div class="input-tbox"><input type="text" name="myuser" id="user" contenteditable="true" onblur="saveToDatabse(this,'userName','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $username; ?>" /></div></td>
</tr>
<tr>
<td>Email:</td>
<td><div class="input-tbox"><input type="text" name="mail" id="email" contenteditable="true" onblur="saveToDatabse(this,'email','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $usermail; ?>" /></div></td>
</tr>
</table>
I have saveToDatabase() function at onblur event.
This is my function,
function saveToDatabse(editableObj,column,id){
$(editableObj).css("background","#FFF url('../images/loaderIcon.gif')no-repeat right");
$.ajax({
url:"update.php",
type:"POST",
data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
cache: false,
sucsess:function(data){
$(editableObj).css("background","#FDFDFD");
}
});
}
when I'm updating it set a blank value. I it's think because the use of innerHTML . I know innerHTML is not for jquery. So what can I use there for getting the value from this object of saveToDatabse() function?

$.ajax({
url:"update.php",
type:"POST",
data:({'column':column,'editval':editableObj.value,'id':id}),
cache: false,
sucsess:function(data){
$(editableObj).css("background","#FDFDFD");
},
error:function(data){
alert(data); /*this will help to to find the error*/
}
});

<table border="0" cellpadding="10" cellspacing="1" id="edit">
<tr>
<div class="input-label">
<td>Name:</td>
</div>
<td><div class="input-tbox"><input type="text" name="Myname" id="names" contenteditable="true" onblur="saveToDatabse(this,'name','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $name; ?>"/></div></td>
</tr>
<tr>
<td>Username:</td>
<td><div class="input-tbox"><input type="text" name="myuser" id="user" contenteditable="true" onblur="saveToDatabse(this,'userName','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $username; ?>" /></div></td>
</tr>
<tr>
<td>Email:</td>
<td><div class="input-tbox"><input type="text" name="mail" id="email" contenteditable="true" onblur="saveToDatabse(this,'email','<?php echo $id;?>')" onclick="showEdit(this);" value="<?php echo $usermail; ?>" /></div></td>
</tr>
</table>
Jquery code
If you want the value from textbox you should use value instead of innerHTML
function saveToDatabse(editableObj,column,id){
$(editableObj).css("background","#FFF url('../images/loaderIcon.gif')no-repeat right");
$.ajax({
url:"update.php",
type:"POST",
data:'column='+column+'&editval='+editableObj.value+'&id='+id,
cache: false,
sucsess:function(data){
$(editableObj).css("background","#FDFDFD");
}
});
}

retrieving radio button value if name is from database(lopped)

i am making a simple quiz
the code below is my code for echoing the questions in the database
i used while loop to output the values in the database
i used the q_question for the name of each radio button, because if i put (sample : name="question" which is fixed, when it loop i am only available to pick 1 radio button even if theres 2 or more questions )
<?php
$tbl_name2="a_quiz"; // Switch to table "forum_answer"
$sql2="SELECT * FROM $tbl_name2 WHERE q_id='$id'";
$result2=mysql_query($sql2);
while($rows=mysql_fetch_array($result2)){
?>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td><table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr style='overflow:hidden; word-wrap:break-word;'>
<td bgcolor="lightgreen"><strong>Question:</strong></td>
<td bgcolor="lightgreen">:</td>
<td bgcolor="lightgreen" style="max-width: 1000px;"><?php echo $rows['q_question'] ?></td>
</tr>
<tr>
<td bgcolor="lightgreen"><strong>A</strong></td>
<td bgcolor="lightgreen">:</td>
<td bgcolor="lightgreen"><input type="radio" name="<?php echo $rows['q_question'] ?>" value="a"><?php echo $rows['a'] ?></td>
</tr>
<tr>
<td width="18%" bgcolor="lightgreen"><strong>B</strong></td>
<td width="5%" bgcolor="lightgreen">:</td>
<td width="77%" bgcolor="lightgreen"><input type="radio" name="<?php echo $rows['q_question'] ?>" value="b"><?php echo $rows['b'] ?></td>
</tr>
<tr>
<td width="18%" bgcolor="lightgreen"><strong>C</strong></td>
<td width="5%" bgcolor="lightgreen">:</td>
<td width="77%" bgcolor="lightgreen"><input type="radio" name="<?php echo $rows['q_question'] ?>" value="c"><?php echo $rows['c'] ?></td>
</tr>
<tr>
<td bgcolor="lightgreen"><strong>D</strong></td>
<td bgcolor="lightgreen">:</td>
<td bgcolor="lightgreen"><input type="radio" name="<?php echo $rows['q_question'] ?>" value="d"><?php echo $rows['d'] ?></td>
</tr>
</table></td>
</tr>
<hr>
</table><br>
<?php
}
?>
my problem is i cannot get the values of the radio button
im trying $my_answer=$_POST['$q_question'];(and i think this is so wrong) + submit button
help me get the values of the radio button, using php
but if you got idea using javascript etc.. im happy to see it

form posting on return value of javascript confirm box

i have form with few fields and what i want the when someone clicks on submit button then his his submition of form must be confirmed by javascript confirm box and when he clicks on OK then the form should be submitted other wise not.
my form structure is
<form method="post" style="margin: 10px;" id="rForm">
<table style="margin-left:20px;">
<tbody>
<tr>
<td class="f_title_sm label">First Name</td>
<td class="f_value_sm"><input type="text" name="user_first_name" class="validate[required] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_first_name']) ? $_POST['user_first_name'] : ''); ?>" /> *</td>
</tr>
<tr>
<td class="f_title_sm label">Middle Name</td>
<td class="f_value_sm"><input type="text" name="user_middle_name" class="inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_middle_name']) ? $_POST['user_middle_name'] : ''); ?>" /></td>
</tr>
<tr>
<td class="f_title_sm label">Last Name</td>
<td class="f_value_sm"><input type="text" name="user_last_name" class="validate[required] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_last_name']) ? $_POST['user_last_name'] : ''); ?>" /> *</td>
</tr>
<tr>
<td class="f_title_sm label">Email ID</td>
<td class="f_value_sm"><input type="text" name="user_email" class="validate[required,custom[email]] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_email']) ? $_POST['user_email'] : ''); ?>" /> * </td>
</tr>
<tr>
<td class="f_title_sm label">City</td>
<td class="f_value_sm"><input type="text" name="user_city" class="validate[required] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_city']) ? $_POST['user_city'] : ''); ?>" /></td>
</tr>
<tr>
<td class="f_title_sm label">State</td>
<td class="f_value_sm"><input type="text" name="user_state" class="validate[required] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_state']) ? $_POST['user_state'] : ''); ?>" /></td>
</tr>
<tr>
<td class="f_title_sm label">Country</td>
<td class="f_value_sm"><input type="text" name="user_country" class="validate[required] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_country']) ? $_POST['user_country'] : ''); ?>" /></td>
</tr>
<tr>
<td class="f_title_sm label">Postal Code</td>
<td class="f_value_sm"><input type="text" name="user_postal_code" class="validate[required] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_postal_code']) ? $_POST['user_postal_code'] : ''); ?>" /></td>
</tr>
<tr>
<td class="f_title_sm label">Username</td>
<td class="f_value_sm"><input type="text" name="user_id" class="validate[required] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_id']) ? $_POST['user_id'] : ''); ?>" /> * <span>[?]</span></td>
</tr>
<tr>
<td class="f_title_sm label">Password</td>
<td class="f_value_sm"><input type="password" name="user_key" class="validate[required] text-input inputbox box_100" style="width: 190px;" /> * </td>
</tr>
<tr>
<td class="f_title_sm label">Confirm-Password</td>
<td class="f_value_sm"><input type="password" name="user_key1" class="validate[required] text-input inputbox box_100" style="width: 190px;" /> * </td>
</tr>
<tr>
<td class="f_title_sm label">User Type</td>
<td class="f_value_sm">
<input type="radio" name="user_type" value="<?php echo USER_ROLES::USER_BUYER; ?>" checked="checked" id="buyer" /> <lable style="font-size:12px;" for="buyer">Buyer</lable>
<input type="radio" name="user_type" value="<?php echo USER_ROLES::USER_SELLER; ?>" id="seller"/> <lable style="font-size:12px;" for="seller">Seller</lable>
</td>
</tr>
<tr>
<td></td>
<td class="f_value_sm value"><input type="submit" name="user_reg" class="go backcolr" value="Register" /></td>
</tr>
</tbody>
</table>
</form>
so kindly suggest me appropriate solution

You can intercept the form submission using jQuery and show the dialog to confim it or cancel.
$("form").submit(function(e){
if(!confirm('Continue?'))
e.preventDefault();
});
e.preventDefault()will prevent the submission of the form.

try this : onsubmit="return validation();"
<form method="post" style="margin: 10px;" id="rForm" onsubmit="return validation();">
script here :
function validation(){
var conf = confirm("are your sure!");
if(conf==false){
return false;
}
}
hope it will help

var form = document.getElementById('rForm');
if (document.addEventListener) {
form.addEventListener('submit', confirmForm, false);
} else {
form.attachEvent('onsubmit', confirmForm);
}
function confirmForm(e) {
e = e || window.event;
var answer = confirm('Are you sure ?');
if (!answer) {
if(e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false
}
}
}

$("form").submit(function() {
var res = confirm("Are you shure go");
if(!res){
return false;
}
return true
});