Made button form and in js file its not triggering - javascript

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");

Related

Problem in WordPress with a onclick event, showing an Uncaught Reference Error

I have a survey on a website (WordPress, zenith template) and I have a problem submitting the form. I get an error saying "Uncaught Reference Error". Can someone help me fix this problem?
Screenshot from the moment y click SEND button
The survey address is here
<?php
/*
Template Name: Cuestionario OQ ingles
*/
get_header();
global $PAGE_ID;
$options = get_option('infinite_options');
?>
<?php while ( have_posts() ) : the_post();
$featured_image_array = wp_get_attachment_image_src( get_post_thumbnail_id(), 'single-post-thumbnail' );
$featured_image = $featured_image_array[0];
$sidebar = get_post_meta(get_the_ID(), SYSTEM_VAR_PREFIX."select_sidebar", true);
if ($sidebar)
{
?>
<div id="inner-content">
<?php
}
else
{
?>
<div class="one">
<?php
}
if ($featured_image != "")
{
?>
<p><img src="<?php echo $featured_image; ?>" alt=""></p>
<?php
}
the_content();
?>
<!--Inicio todo el documento-->
<div id="contenedor">
<!--Inicio del Contenido-->
<div id="contenido">
<table border="0" align="center" cellpadding="0" cellspacing="0" id="textocontenido">
<tr>
<td > </td>
</tr>
<tr>
<td >
<center>
<?php
if (!$HTTP_POST_VARS){ }
?>
<form action="<?php bloginfo('template_url'); ?>/procesa_oq_ingles.php" method=post>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="7" colspan="6" align="center" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td colspan="6" align="center"> </td>
</tr>
<tr>
<td height="14" colspan="6" align="center">Outcomes Questionnaire (OQ-45.2)</td>
</tr>
<tr>
<td height="7" colspan="6"><hr /></td>
</tr>
<tr>
<td> </td>
<td colspan="4"> </td>
<td> </td>
</tr>
<tr>
<td align="right">Name:</td>
<td colspan="4"><label>
<input type="text" name="nombre" id="textfield">
</label></td>
<td> </td>
</tr>
<tr>
<td align="right">Age:</td>
<td colspan="4"><input type="text" name="edad" id="textfield2"></td>
<td> </td>
</tr>
<tr>
<td align="right">E-Mail:</td>
<td colspan="4"><input type="text" name="correo" id="textfield3"></td>
<td> </td>
</tr>
<tr>
<td align="right"> </td>
<td colspan="4"> </td>
<td> </td>
</tr>
<tr>
<td colspan="6">Instructions: Looking back over the last week, including today, help us understand how you have been feeling.</td>
</tr>
<tr>
<td align="right"> </td>
<td colspan="4"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td width="131" height="23" align="center">Never</td>
<td width="87" align="center">Rarely</td>
<td width="86" align="center">Sometimes</td>
<td width="97" align="center">Frequently</td>
<td width="121" align="center">Almost Always</td>
</tr>
<!-- FIRST QUESTION -->
<tr>
<td width="382">1. I get along well with others.</td>
<td colspan="5" align="center"><table width="430" height="25" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup1" value="4" id="RadioGroup1_0" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup1" value="3" id="RadioGroup1_1" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup1" value="2" id="RadioGroup1_2" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup1" value="1" id="RadioGroup1_3" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup1" value="0" id="RadioGroup1_4" />
</label></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="6"><hr /></td>
</tr>
<!-- LAST QUESTION -->
<tr>
<td height="12" valign="top" class="Estilo4">45. I have headaches.</td>
<td colspan="5" align="center"><table width="430" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup45" value="0" id="RadioGroup45_0" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup45" value="1" id="RadioGroup45_1" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup45" value="2" id="RadioGroup45_2" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup45" value="3" id="RadioGroup45_3" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup45" value="4" id="RadioGroup45_4" />
</label></td>
</tr>
</table></td>
</tr>
<tr>
<td height="2" colspan="6" valign="top" class="Estilo4"><hr /></td>
</tr>
<tr>
<td colspan="6" valign="top" class="Estilo4"> </td>
</tr>
<tr>
<td colspan="6" align="center"><input type=submit value="Send" onClick="ValidaMail(correo)"></td>
</tr>
<tr>
<td colspan="6" align="center"> </td>
</tr>
</table>
</form>
</center> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
<!--Fin del Contenido-->
</div>
<!--Fin todo el documento-->
</div><!--END ONE-->
<?php
if (get_post_meta(get_the_ID(), SYSTEM_VAR_PREFIX."add_class_title", true) != "no")
{
?>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".one :header, #inner-content :header").addClass("title");
$(".team-member-info :header, .no_title").removeClass("title");
$(".pricing-info :header, .no_title").removeClass("title");
})
</script>
<?php
}
if ($sidebar) get_sidebar();
?>
<?php endwhile; // end of the loop. ?>
<?php get_footer(); ?>
So this is my code. It is supposed to go to procesa_oq_ingles.php but this doesn´t happen due the error appearing in the console.
I tried clearing the onclick event, but there was no change after that. Maybe someone has an idea what I can do to correct this?
Thanks...

To show error message on ajax error : function()

I want to show error message in directed page if error part is fire in my ajax.but when it goes to this directed page it not show error message if i refresh this page it shows error message.below is my code.
index.html
<form method="post" name="myForm" action="tracking.php">
<input type="text" name="number" id="number" placeholder="Enter LR Number" required>
<input type="submit" name="submit" value="Go">
</form>
tracking.php
<script>
$(document).ready(function () {
var from = "";
$('#loadings').show();
$.ajax({
type: "GET",
url: 'http://apis.abc.abc/api/Get_Loadsheet_Details/<?php echo $number; ?>',
dataType: 'json',
success: function (response) {
$('#loadings').hide();
console.log(response);
document.getElementById('lrid').innerHTML = "LR NO: " + response[0].LRSUFIX + response[0].LR_NO;
document.getElementById('consign').innerHTML = response[0].COMPANY_NAME;
document.getElementById('from').innerHTML = response[0].LOADFROMMST;
document.getElementById('dest').innerHTML = response[0].DESTINATION;
document.getElementById('case').innerHTML = response[0].NO_OF_PKT;
document.getElementById('lrsta').innerHTML = response[0].LR_STATUS;
document.getElementById('lr').innerHTML = response[0].lrLoadStatus;
document.getElementById('vecno').innerHTML = response[0].VEHICLE_NO;
document.getElementById('lrstatus').innerHTML = response[0].LOADIG_STATUS;
document.getElementById('ldate').innerHTML = response[0].DATE;
}, error: function (errors) {
console.log(errors);//alert('hi');
$('#loadings').hide();
$('#error').html("<h2><span style='color:red;'>No data found on this LR No.</span></h2>");
}
});
});
</script>
<section>
<div id="error"></div>
<div class="loader-div" style="position:relative;" ><img id="loadings" src="images/loading2.gif" style=" left: 40%;
position: absolute;
top:250px;
z-index:1111;"></div>
<div class="container" >
<div class="body_left" id="container">
<h1 class="heading_3">Tracking Details</h1>
<table width="100%" class="track">
<tr>
<th >Order Information</th>
<th id="lrid"></th>
</tr>
<tr>
<td>Consignee</td>
<td id="consign"> </td>
</tr>
<tr>
<td>From</td>
<td id="from"></td>
</tr>
<tr>
<td>Destination</td>
<td id="dest"> </td>
</tr>
<tr>
<td>Cases</td>
<td id="case"> </td>
</tr>
<tr>
<td>LR Status</td>
<td id="lrsta"></td>
</tr>
<tr>
<td>LR</td>
<td id="lr"></td>
</tr>
</table>
<br>
<br>
<table width="100%" class="track">
<tr>
<th colspan="2">Load Information</th>
</tr>
<tr>
<td>VEHICLE NUMBER: </td>
<td id="vecno"></td>
</tr>
<tr>
<td>LOAD STATUS </td>
<td id="lrstatus"> </td>
</tr>
<tr>
<td>LOAD DATE:</td>
<td id="ldate"> </td>
</tr>
</table>
</div>
</div>
</section>
Try to put your Script code underneath HTML codes. Because Jquery can't find the selector "#error" before html get loaded.
Just make a try.

Data Table search is giving error

I'm getting a warning saying requested unknown parameter, and after I press ok the search is not working correctly.
any solution for this
DataTable warning .......... Requested unknown parameter
Please find how i created the table
<table class="dataTable border bordered striped" data-role="datatable" data-auto-width="false" id="brandTable">
<thead>
<tr>
<td style="width: 20px">
</td>
<td class="sortable-column sort-asc">ID</td>
<td class="sortable-column">Brand Name</td>
<td class="sortable-column">Account Manager</td>
<td class="sortable-column">Date Updated</td>
</tr>
</thead>
<tbody>
<?php foreach ($fw->customer($_SESSION['USERID'])->getAllBrands() as $v) { ?>
<tr>
<td>
<label class="input-control checkbox small-check no-margin">
<input type="checkbox">
<span class="check"></span>
</label>
</td>
<td>
<?php echo $v['id']; ?>
</td>
<td>
<a href="updateBrands.html?id=<?php echo $v['id']; ?>">
<?php echo $v['brandName']; ?>
</a>
</td>
<td>
<?php echo $fw->customer($_SESSION['USERID'])->getAccountManagerbyId($v['accountManager_id']); ?></td>
<td>
<?php echo $v['dateCreated']; ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
You have an undefined or null value at 3 column of 35 row. You should pass some value at that place .

Jquery Filter table rows by multiple checkboxes

I am trying to get a filter working for a table. What I would like is checkboxes to filter (hide) rows based on whether they're checked or not and if the value is present in the table cell. I have it somewhat working, but it will only sort one of the checkboxes. Also, if there are multiple values in the table cell being filtered, that row is hidden. Thoughts? Thank you in advance for any help. I'm really struggling with this for some reason!
Here is the code I have been using:
$("input:checkbox").click(function () {
var showAll = true;
$('tr').not('.first').hide();
$('input[type=checkbox]').each(function () {
if ($(this)[0].checked) {
showAll = false;
var status = $(this).attr('rel');
var value = $(this).val();
$('td.' + 'status' + '[rel="' + value + '"]').parent('tr').show();
}
});
if(showAll){
$('tr').show();
}
});
The markup is as follows (please excuse some messiness, its Wordpress)
<div class="grants-filter">
<h3 class="filter-title">Filter Scholarships</h3><br/>
<h3>Year of Study:</h3>
<input type="checkbox" name="chx" rel="status" value="Freshman">Freshman
<input type="checkbox" name="chx" rel="status" value="Sophmore">Sophmore
<input type="checkbox" name="chx" rel="status" value="Junior">Junior
<input type="checkbox" name="chx" rel="status" value="Senior">Senior
<br/><br/><h3>Duration:</h3>
<input type="checkbox" rel="duration" value="Summer">Summer
<input type="checkbox" rel="duration" value="Semester">Semester
<input type="checkbox" rel="duration" value="Full Year or More">Full Year or More
</div>
<div class="grants-listing">
<table border="1" id="table" class="grants-table">
<thead>
<tr class="first">
<th>Title</th>
<th>Description</th>
<th>Field</th>
<th>Duration</th>
<th>Year of Study</th>
<th>Other</th>
<th>Procedure</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<?php
$grargs = array ( 'post_type' => 'scholarship');
$grant_query = new WP_Query( $grargs );
while ( $grant_query -> have_posts() ):
$grant_query -> the_post(); ?>
<tr class="grant-detail">
<td>
<?php the_title(); ?>
</td>
<td><?php echo wp_trim_words(get_the_content(), 25 ); ?></td>
<td class="fields" rel="<?php echo get_field('fields'); ?>"><?php echo the_field('fields'); ?></td>
<td class="duration" rel="<?php echo the_field('desired_duration'); ?>"><?php echo the_field('desired_duration'); ?></td>
<td class="status" rel="<?php echo the_field('year-of-study'); ?>"><?php echo the_field('year-of-study'); ?></td>
<td class="other" rel="<?php echo the_field('other'); ?>"><?php echo the_field('other'); ?></td>
<td class="procedure" rel="<?php echo the_field('procedure'); ?>"><?php echo the_field('procedure'); ?></td>
<td class="url"><?php echo get_field('url'); ?></td>
</tr>
<?php endwhile;
wp_reset_postdata(); //reset the first query
?>
</tbody>
</table>
As I think you just are calling the first checkbox [0]
if ($(this)[0].checked) {
call all by inserting someting like
$('input[type=checkbox]').each(function () {
if (this.checked) {
console.log($(this).val());
}
});
Your code works fine, here is a simplified version
$("input:checkbox").click(function() {
var showAll = true;
$('tr').not('.first').hide();
$('input:checkbox:checked').each(function() {
showAll = false;
var status = $(this).attr('rel');
var value = $(this).val();
$('td.' + 'status' + '[rel="' + value + '"]').parent('tr').show();
});
if (showAll) {
$('tr').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grants-filter">
<h3 class="filter-title">Filter Scholarships</h3>
<br/>
<h3>Year of Study:</h3>
<input type="checkbox" name="chx" rel="status" value="Freshman">Freshman
<input type="checkbox" name="chx" rel="status" value="Sophmore">Sophmore
<input type="checkbox" name="chx" rel="status" value="Junior">Junior
<input type="checkbox" name="chx" rel="status" value="Senior">Senior
</div>
<div class="grants-listing">
<table border="1" id="table" class="grants-table">
<thead>
<tr class="first">
<th>Title</th>
<th>Description</th>
<th>Fields</th>
<th>Status</th>
<th>Procedure</th>
</tr>
</thead>
<tbody>
<tr class="grant-detail">
<td>
Name
</td>
<td>Description</td>
<td class="fields" rel="Freshman">Freshman</td>
<td class="status" rel="Freshman">Freshman</td>
<td class="procedure" rel="Freshman">Freshman</td>
</tr>
<tr class="grant-detail">
<td>
Name
</td>
<td>Description</td>
<td class="fields" rel="Sophmore">Sopho</td>
<td class="status" rel="Sophmore">Sopho</td>
<td class="procedure" rel="Sophmore">Sopho</td>
</tr>
<tr class="grant-detail">
<td>
Name
</td>
<td>Description</td>
<td class="fields" rel="Junior">Junior</td>
<td class="status" rel="Junior">Junior</td>
<td class="procedure" rel="Junior">Junior</td>
</tr>
</tbody>
</table>

ajax not returning value

Here is a problem i am having.
Ajax is not willing to return me any values and display it in a message box
Here is my register.php
<?php
//register.php
$username = $_POST['txtusername'];
$response= array();
$response[]= $_POST['txtusername'];
$response[]= $_POST['txtusername'];
echo json_encode($response);
?>
My form is as follows
<div id="divregister">
<div id="display"></div>
<table>
<tr>
<td colspan="3" style='text-align: center;font-weight: bold;'>Register</td>
</tr>
<tr>
<td style='text-align: right;'>First Name</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtfirstname'])) {echo $_POST['txtfirstname'];} ?>" type="text" name="txtfirstname" id ="txtfirstname" ></td>
<td class="registererrordisplay" id="registererrorfirstname"></td>
</tr>
<tr>
<td style='text-align: right;'>Last Name</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtlastname'])) echo $_POST['txtlastname']; ?>" type="text" name="txtlastname" id="txtlastname"></td>
<td class="registererrordisplay" id="registererrorlastname"></td>
</tr>
<tr>
<td style='text-align: right;'>E-Mail Address</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtemail'])) echo $_POST['txtemail']; ?>" type="text" name="txtemail" id="txtemail"></td>
<td class="registererrordisplay" id="registererroremail"></td>
</tr>
<tr>
<td style='text-align: right;'>Username</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtusername'])) echo $_POST['txtusername']; ?>" type="text" name="txtusername" id ="txtusername"></td>
<td class="registererrordisplay" id="registererrorusername"></td>
</tr>
<tr>
<td style='text-align: right;'>Password</td>
<td class="registererrordisplay"><input type="password" name="txtpassword" id="txtpassword"></td>
<td id="registererrorpassword"></td>
</tr>
<tr>
<td style='text-align: right;'>Confirm</td>
<td class="registerinputfieldscolumn">
<input type="password" name="txtconfirmpassword" id="txtconfirmpassword"></td>
<td></td>
</tr>
<tr>
<td id ="registerdisplay" style='text-align: right;font-size: 12px;color:red;'>dfghjkl</td>
<td style='text-align: right;'>
<input type='button' id ="btnregister" style='width: 60px;height:25px;margin-right:75px;' value="Register"></td>
<td></td>
</tr>
</table>
</div>
Here is the ajax script is as follows.
Am not getting any response in the alert box.
Any help from you guy is greatly appreciated.
<script>
$(document).ready(function(){
$("#btnregister").click(function(){
$.ajax({
type: 'POST',
url: 'register.php',
dataType: 'text',
success: function(data) {alert(data);},
data: {"txtusername": $("#txtusername").val()}
});
});
});
</script>
data: {txtusername: sample}
Where did you define that 'sample' variable? It seems that it doesn't exist so you actually send no value. Then nothing is returned, because there's no data to create response.

Categories