This question already has answers here:
Using JQuery - preventing form from submitting
(15 answers)
Closed 5 years ago.
I have a form with ajax calls:
<form method="post" action="?slt=Sbmt" onsubmit="return validateForm()" id="reportform" enctype="multipart/form-data">
<div id="evaluation1">
<h2>Rate Technical Skills</h2>
<table class="quartz-table" id="techskills_table">
<thead>
<tr>
<th>Driver</th>
<th>Sub-Driver</th>
<th class="sorter-false">Skill</th>
<th class="sorter-false">Marks</th>
</tr>
</thead>
<?php
foreach( $subdriver as $sbdriver => $sbd )
{
$skillsResult = getTechSkills($yes, $role, $sbd);
$countTech = 0;
while($row = mysqli_fetch_array($skillsResult))
{
$id = $row['id'];
$driver = $row['driver'];
$subdriver = $row['subdriver'];
$dep = $row['department'];
$skill = $row['skills'];
$vrgood = $row['4'];
$good = $row['3'];
$middle = $row['2'];
$low = $row['1'];
?>
<tbody>
<tr class="full_qst">
<td><?php echo $driver; ?></td>
<td><?php echo $subdriver; ?></td>
<td><?php echo $skill; ?></td>
<td> <img alt="" src="imagesAssessment/check.png" class="check">
<div class="mrk">
<label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $low ?>"/>1</label>
<label class="choice" for="q1_b" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $middle ?>"/>2</label>
<label class="choice" for="q1_c" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $good ?>"/>3</label>
<label class="choice" for="q1_d" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $vrgood ?>"/>4</label>
</div>
<input id="q" name="q[]" type="hidden" value="<?php echo $id; ?>" />
<input name="dep[]" type="hidden" value="<?php echo $dep; ?>" />
</td>
</tr>
</tbody>
<?php
$countTech++;
}
}
?>
</table>
<button type='button' class='ev_quest2' data-id3="<?php echo $yes.'|'.$role.'|'.$quarter.'|'.$username.'|'.$staffid; ?>">Performance Skills</button>
</div>
<div id="evaluation3"></div>
<br/><br/><br/>
</form>
I call ajax to display in evaluation3 . Here is code to display data:
$(document).on('click', '.ev_quest3', function(){
var row_number2 = "<?php echo $countPerf; ?>";
var checked_number2 = $("#evaluation2 :checkbox:checked").length;
if(row_number2 == checked_number2){
var evaluation3 = $(this).data("id3");
$.ajax({
url: "comAssessment/scoreboard_evaluation_closed.php",
method: "POST",
data: {evaluation3: evaluation3},
dataType:"text",
success: function (data) {
$('.quest3').hide();
$("#evaluation3").hide().html(data).show("slide", { direction: "up" }, 1500);
}
});
}else{ alert('Please Rate all Performance Skills first!'); }
});
So I check sum of checked checkboxes and sum of checkboxes from the database. If its not equal then system wont upload data. In the end I want to check if all checkboxes of id evaluation3 are checked. If yes then submit the form if not just give alert and stay on the page.
And here is scoreboard_evaluation_closed.php:
<table id="closedquest_table" class="quartz-table">
<thead>
<tr>
<th class="sorter-false">Skill</th>
<th class="sorter-false">Marks</th>
</tr>
</thead>
<?php
while($row = mysqli_fetch_array($closedResult))
{
$id = $row['id'];
$dep = $row['department'];
$skill = $row['question'];
$vrgood = $row['4'];
$good = $row['3'];
$middle = $row['2'];
$low = $row['1'];
?>
<tbody>
<tr class="full_qst">
<td><?php echo $skill; ?></td>
<td> <img alt="" src="imagesAssessment/check.png" class="check">
<div class="mrk">
<label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $low ?>"/>1</label>
<label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $middle ?>"/>2</label>
<label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $good ?>"/>3</label>
<label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $vrgood ?>"/>4</label>
</div>
<input id="q" name="q[]" type="hidden" value="<?php echo $id; ?>" />
<input name="dep[]" type="hidden" value="<?php echo $dep; ?>" />
</td>
</tr>
</tbody>
<?php
$countClosed++;
}
?>
</table>
And function to prevent submission if not all checkboxes are checked:
$(function () {
$('form').on('submit', function (e) {
var row_number3 = "<?php echo $countClosed; ?>";
var checked_number3 = $("#evaluation3 :checkbox:checked").length;
if(row_number3 != checked_number3){
e.preventDefault();
alert(/*'Please Rate all Closed Questions'*/ row_number3+' a / b '+checked_number3);
}
});
});
So the problem is it gets me alert message but it also submit the form after giving first alert message. How can I prevent form from submission if not all checkboxes are checked?
I think this should work.
$("#reportform").submit(function(e){
e.preventDefault();
// your code here
});
Related
pict of My Project
I have this file, i want when i choose the answer,And , then the value of radio button not change when i click back. please help me..
while( $row = mysqli_fetch_array($sql)){
?>
<tr>
<td><?php echo $no;?></td>
<td><?php echo $row['soal']; ?></td>
<td><input type="radio" name="jawabana" value="<?php echo $row['a']; ?>" <?php if(isset($_POST['jawabana']) && ($_POST['jawabana'] == $row['a'])) echo 'checked="checked" ';?>><?php echo $row['a']; ?></td>
<td><input type="radio" name="jawabanb" value="<?php echo $row['b']; ?>" <?php if(isset($_POST['jawabanb']) && ($_POST['jawabanb'] == $row['b'])) echo 'checked="checked" ';?>><?php echo $row['b']; ?></td>
<td><input type="radio" name="jawabanc" value="<?php echo $row['c']; ?>" <?php if(isset($_POST['jawabanc']) && ($_POST['jawabanc'] == $row['c'])) echo 'checked="checked" ';?>><?php echo $row['c']; ?></td>
<td><input type="radio" name="jawaband" value="<?php echo $row['d']; ?>" <?php if(isset($_POST['jawaband']) && ($_POST['jawaband'] == $row['d'])) echo 'checked="checked" ';?>><?php echo $row['d']; ?></td>
</tr>
<?php
$no++;
}
full script here https://pastebin.com/RJ2XxJrn
Thanks!
Once a radio button is checked it cannot be be unchecked by clicking it again, u must use checkbox instead of radio, and then style it to look as a radio button, here is the code which use jquery to make check boxes act as both check box and radio
$('input[name="test_input"]').click(function(){
var valueNow = $('input[name="test_input"]').prop('checked');
$('input[name="test_input"]').not(this).prop('checked',false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="value1" name="test_input">
<input type="checkbox" value="value2" name="test_input">
<input type="checkbox" value="value3" name="test_input">
<input type="checkbox" value="value4" name="test_input">
Use autocomplete feature of HTML, like below :
<form .... autocomplete="on">
<input type="radio" name="jawabanb" value="1">
<input type="radio" name="jawabanb" value="2">
<input type="radio" name="jawabanb" value="3">
</form>
I think your problem is the variable settings, Save the answers in the Session variable, and check it there in the echo statements, so when you hit back, the post variable is not lost.
I have two forms the first one has a autocomplete field(laborer names//from mysql table),and input field for manually entering date. Another is a form below containing fields to be filled by the user.
<form class="well form-search">
Date of Payment:
<?php if($sf_user->hasCredential('PAYMENT')): ?>
<input type="text" class="field2 required" size="15" name="date_of_payment_<?php echo $l['id'] ?>" value="<?php echo $sf_params->get('date_of_payment_'.$l['id'], date('Y-m-d')) ?>" placeholder="payment date"/>
<?php endif; ?>
Laborer: <input type="hidden" class="laborers" id="laborer_id_<?php echo $l['id'] ?>" name="collector_id_<?php echo $l['id'] ?>" value="<?php echo $sf_params->get('collector_id_'.$l['id']) ?>" />
<input rel="<?php echo $l['id'] ?>" type="text" class="field2 required laborer_autocomplete" size="15" name="laborer_<?php echo $l['id'] ?>" value="<?php echo $sf_params->get('laborer_'.$l['id'])?>" id="laborer_<?php echo $l['id'] ?>" placeholder="laborerr"/>
<?php if(isset($fieldErrors['laborer_id_'.$l['id']])): ?>
<div class="error">
<?php echo $fieldErrors['laborer_id_'.$l['id']] ?>
</div>
<?php endif; ?>
<button type="submit" class="btn">Go</button>
</form>
The second form
<form action="<?php echo //?>" method="post" onsubmit="return confirm('Are you sure? This cannot be undone!')">
<table class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th class="personid" style="width:5px;">#</th>
<th>Days</th>
<th>Term</th>
<th>Date of Payment</th>//I want this to hide
<th>Laborer</th>//I want this to hide
<th>Amount Received</th>
</tr>
</thead>
<tbody>
<?php foreach($works as $i=>$l): ?>
<tr class="<?php echo ($i%2==0)?'even':'odd' ?>">
<td class="personid"></td>
<td>PHP<?php echo number_format($l['days'], 2) ?></td>
<td><?php echo $l['term'] ?> days</td>
<td>
Date of Payment (YYYY-MM-DD)<br />
<input type="text" class="field2 required" size="15" name="date_of_payment_<?php //echo $l['id'] ?>" value="<?php// echo $sf_params->get('date_of_payment_'.$l['id'], date('Y-m-d')) ?>" placeholder="payment date"/>
</td>
<td>
<input type="hidden" class="laborers" id="laborer_id_<?php //echo $l['id'] ?>" name="laborer_id_<?php echo $l['id'] ?>" value="<?php echo $sf_params->get('laborer_id_'.$l['id']) ?>" />
<input rel="<?php// echo $l['id'] ?>" type="text" class="field2 required collectors_autocomplete" size="15" name="laborer_<?php echo $l['id'] ?>" value="<?php echo $sf_params->get('laborer_'.$l['id'])?>" id="laborer_<?php echo $l['id'] ?>" placeholder="laborerr"/>
<?php if(isset($fieldErrors['laborer_id_'.$l['id']])): ?>
<div class="error">
<?php echo $fieldErrors['laborer_id_'.$l['id']] ?>
</div>
<?php //endif; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table> <!--end table-->
Instead of manual input for laborer and date of payment fields in the second form, is it possible to automatically populate these fields by filling the first form?
Using the javascript "blur" event, we can copy the data from one field to any other element on the page. The "blur" event means the field no longer has focus. That is, the user tabbed to the next field or clicked some other element on the page.
Not sure what your browser requirements are, so I'm going to suggest jQuery. Here is a simple example:
html:
<!-- form snippet -->
<input type="text" name="field1" id="field1" value="">
<!-- destination -->
<input type="hidden" name="field1b" class="show-field1">
<input type="hidden" name="field1c" class="show-field1">
<p class="show-field1"></p>
javascript:
$("#field1").blur(function(event) {
// jquery sets "this" to the element handling the event; i.e. "field1"
// "value" is a standard property on <input> elements
var value = this.value;
// next, select your targets
var copyTo = $(".show-field1");
// if copying to a form element
copyTo.val(value);
// if copying to a DOM element
copyTo.text(value);
});
I hope that helps. I created a jsfiddle too: http://jsfiddle.net/jbarreiros/o5cuv2nt/.
I wish can pass the value of getvenueurl to another php named map.php .
I use input type hidden to to echo in current page:
<input type="hidden" name="getvenueurl" value="<?php echo $show_venue['url']; ?>"/>
and I wish when i click the button <a href="map.php" target="_blank"><input type="button" class="button" value="MAP" style="width:100px;"> in map.php show the correct value of getvenueurl.
In current page:
<?php
$read_venue = mysql_query("select * from venue where theme_name = '$title'");
while($show_venue = mysql_fetch_array($read_venue))
{
?>
<form method="post" action="#tab5">
<center><table border="1" class="venuetb">
<tr>
<input type="hidden" name="getvenue" value="<?php echo $show_venue['venue']; ?>"/>
<input type="hidden" name="getvenueprice" value="<?php echo $show_venue['price']; ?>"/>
<input type="hidden" name="getvenueurl" value="<?php echo $show_venue['url']; ?>"/>
<td style="width:20%;"><center><div class="imgvenue"><img src="<?php echo 'venueimg/'.$show_venue['venueimg']; ?>" /></div></center></td>
<td ><center><div class="bine"><?php echo $show_venue['venue']; ?> - RM <?php echo $show_venue['price']; ?></div></center></br>
<div class="dv"><p> <b>Address : </b><?php echo $show_venue['address']; ?></p>
<p> <b>Detail : </b><?php echo $show_venue['detail']; ?></p>
<b> Contact No: </b><?php echo $show_venue['contact']; ?></div>
</td>
<td style="width:20%;">
<center><input type="button" class="button" value="MAP" style="width:100px;">
<input type="submit" class="button" style="width:100px;" value="CHOOSE" name="choose_venue"></center>
</td>
</tr>
</table></center><br>
</form>
<?php
$_SESSION['theurl'] = $show_venue['url'];
}
?>
<?php
if(isset($_POST['choose_venue']))
{
$getvenue = $_POST['getvenue'];
$getvenueprice = $_POST['getvenueprice'];
$savevenue = mysql_query("insert into selectvenue(user,title,venuename,venueprice) values('$username','$title','$getvenue','$getvenueprice')");
if($savevenue)
{
echo"<center>$getvenue save.</center>";
}
else
{
echo "Failed.";
}
}
?>
</div>
I have try to use session to pass the value of getvenueurl but seen it is failed, because it will only show the last column value for all output that in while loop.
In map.php:
<table class="mapping">
<tr>
<td>
<?php
$theurl = $_SESSION['theurl'];
echo $theurl;?>
</td>
</tr>
</table>
How can I get the correct value to my map.php ?
u can pass value through anchor tag this way..i hope this will help u.
<input type="button" class="button" value="MAP" style="width:100px;">
Instead of
<input type="button" class="button" value="MAP" style="width:100px;">
write this code
<input type="button" class="button" onclick="submit_to_map()" value="MAP" style="width:100px;">
Then place this javascript code on the page.
<script type="text/javascript">
function submit_to_map() {
var form = document.getElementById("form-id");
form.action = "map.php";
form.submit();
}
</script>
Then you can get the value of all elements with $_POST[] inside the form from map.php. Hope this will help you
Confirm you have <?php session_start(); ?> on beginning of each page !
I have button click event in html page where I am calling a PHP file. inside the php I have two div where I want to show hide according to the check box I have ...
now it shows two check box and the show div. but i want load the show div only if user checks the first check box how can i achieve this? pls help.here the PHP Code
<div id="dialog_title">
<input type="checkbox" name="First" value="First">
First List<br>
<input type="checkbox" name="Second" value="Second">Second
</div>
<div id="Show div">
<table>
<tr>
<th> Name </th>
<th> Address </th>
</tr>
<?php
foreach ( $deviceArr as $device) {
$id = $device['id'];
$name = $device ['name'];
$Address = $device['address'];
?>
<tr class="font1">
<td> <input type="text" class="g_input_text" name="name[]" value="<?php echo $name; ?>" /> </td>
<td>
<input type="text" class="g_input_text" name="address[]" value="<?php echo $Address; ?>" />
<input type="hidden" name="id[]" value="<?php echo $id; ?>" />
</td>
</tr>
<?php
}
?>
</table>
</div>
When the page is loaded hide the show div i named first_list_bx and give an id as first_chk_bx to first check box like:
<input type="checkbox" name="First" value="First" id="first_chk_bx">
<div id="first_list_bx" style="display:none;">
//code
</div>
Then use jquery for detecting checkin of checkbox and show the first_list_bx like:
$('#first_chk_bx').click(function() {
if($(this).is(":checked")){
$("#first_list_bx").show();
}
else{
$("#first_list_bx").hide();
}
});
This is what you expecting?
$(document).ready(function() {
$('#Show').hide();
$("input[name=First]").click(function () {
$('#Show').toggle();
});
});
It's done in JQuery. Find Demo
Note: Change <div id="Show div"> to <div id="Show">
as you tagged your question with javascript try this js function in your html like this
HTML
<div id="dialog_title">
<input type="checkbox" name="First" value="First" onclick="javascript:show_hide(this, 'Show_div')">
First List<br>
<input type="checkbox" name="Second" value="Second">Second
</div>
<div id="Show_div" style="display:none">
<table>
<tr>
<th> Name </th>
<th> Address </th>
</tr>
<?php
foreach ( $deviceArr as $device) {
$id = $device['id'];
$name = $device ['name'];
$Address = $device['address'];
?>
<tr class="font1">
<td> <input type="text" class="g_input_text" name="name[]" value="<?php echo $name; ?>" /> </td>
<td>
<input type="text" class="g_input_text" name="address[]" value="<?php echo $Address; ?>" />
<input type="hidden" name="id[]" value="<?php echo $id; ?>" />
</td>
</tr>
<?php
}
?>
</table>
</div>
JAVASCRIPT
<script>
function show_hide(my_obj, id)
{
var chk = my_obj.checked;
if(chk===true)
{
document.getElementById(id).style.display="block";
}
else
{
document.getElementById(id).style.display="none";
}
}
</script>
My ajax success function doesn't execute the script after it has sent the data to my database, the data saves fine on my database but after that everything stops there. What might be wrong?
Javascript Code:
$(document).ready(function() {
$(".wall_update").click(function() {
var element = $(this);
var boxval = $("#content").val();
var dataString = 'content=' + boxval;
$("#form1").validationEngine({
type: "POST",
ajaxSubmit: true,
ajaxSubmitFile: "update_ajax.php",
cache: false,
success: function(html) {
alert('success');
$("ol#update").prepend(html);
$("ol#update li:first").slideDown("slow");
document.getElementById('content').value = '';
$('#content').value = '';
$('#content').focus();
$("#flash").hide();
}
});
});
});
update_ajax.php
<?php
include("db.php");
include("tolink.php");
if(isSet($_POST['content']))
{
$id=time();//Demo Use
$msg=$_POST['content'];
$date=date("M j, Y ");
$sql=mysql_query("insert into appointments(message,date_sent)values('$msg','$date')");
$result=mysql_query("select * from appointments order by msg_id desc");
$row=mysql_fetch_array($result);
$id=$row['msg_id'];
$msg=$row['message'];
$date=$row['date_sent'];
$msg= nl2br($msg);
$msg="<br>{$msg}<br>{$date}";
}
?>
<li class="bar<?php echo $id; ?>">
<div align="left" class="post_box">
<span style="padding:10px"><?php echo $msg; ?> </span>
<span class="delete_button">X</span>
<span class='feed_link'>comment</span>
</div>
<div id='expand_box'>
<div id='expand_url'></div>
</div>
<div id="fullbox" class="fullbox<?php echo $id; ?>">
<div id="commentload<?php echo $id; ?>" >
</div>
<div class="comment_box" id="c<?php echo $id; ?>">
<form method="post" action="" name="<?php echo $id; ?>">
<textarea class="text_area" name="comment_value" id="textarea<?php echo $id; ?>">
</textarea><br />
<input type="submit" value=" Comment " class="comment_submit" id="<?php echo $id; ?>"/>
</form>
</div>
</div>
</li>
HTML script
<div align="left">
<form method="post" name="form" action="" id="form1">
<table cellpadding="0" cellspacing="0" width="500px">
<tr><td align="left"><div align="left"><h3>What are you doing?</h3></div></td></tr>
<tr>
<td style="padding:4px; padding-left:10px;" class="update_box">
<textarea class="validate[custom[last]] text-input" cols="30" rows="10" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" ></textarea><br />
<input type="submit" value="Update" name="submit" class="wall_update"/>
</td>
</tr>
</table>
</form>
</div>
<ol id="update" class="timeline">
// Display here after sending data to the database
</ol>
$('#content').value = '';
jQuery doesn't have a value property, you should use val:
$('#content').val('');
value is a property of the DOM Input object.