I have a piece of code below where it determines which assessment the user is in and the assessment number the user is currently on:
<?php echo $sessionMinus ?> OF <?php echo $_SESSION['initial_count'] ?>
So on the browser this could read for example:
1 OF 4
Now below I have a submit button:
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
Now if the user clicks on the button, it will show a confirmation box and if the user clicks OK, for the confirmation, then it will submit the page and what is suppose to happen is that it adds a number to the assessment to indicate that the user is on the next assessment.
SO FOR EXAMPLE:
If it says this on the page:
1 OF 4
If the user submits the page and confirms, then it should now say this:
2 OF 4
This is because the user is on the next assessment now.
But the problem is that it is not adding the number at all when the user submits the page. It just stays at '1' and doesn't add up. So instead of doing the above it is doing the below:
If it says this on the page:
1 OF 4
If the user submits the page and confirms, then it still says:
1 OF 4
This is obviously incorrect.
I have tested my code and what I have found is that if there is that the jquery validation() is causing the number to not add up and stay at '1'. But my question is that how come this jquery function is causing this to happen?
Below is the jquery validation() function:
function validation() {
var _qid = "";
var _msg = "";
var alertValidation = "";
// Note, this is just so it's declared...
$("tr.optionAndAnswer").each(function() {
});
if (alertValidation != "") {
alert(_msg + alertValidation);
return false;
}
return true;
}
Below is relevant code so you know what the code is:
<?php
session_start();
if(isset($_POST['sessionNum'])){
//Declare my counter for the first time
$_SESSION['initial_count'] = $_POST['sessionNum'];
$_SESSION['sessionNum'] = intval($_POST['sessionNum']);
$_SESSION['sessionCount'] = 1;
}
elseif (isset($_POST['submitDetails']) && $_SESSION['sessionCount'] < $_SESSION['sessionNum']) {
$_SESSION['sessionCount']++;
}
$sessionMinus = $_SESSION['sessionCount'];
if ($sessionMinus == $_SESSION['initial_count']){
$action = 'create_session2.php';
}elseif($sessionMinus != $_SESSION['initial_count']){
$action = $_SERVER['PHP_SELF'];
}
?>
<script type="text/javascript">
function validation() {
var _qid = "";
var _msg = "";
var alertValidation = "";
// Note, this is just so it's declared...
$("tr.optionAndAnswer").each(function() {
});
if (alertValidation != "") {
alert(_msg + alertValidation);
return false;
}
return true;
}
function showConfirm(){
var confirmMsg=confirm("Make sure that your details are correct, once you proceed after this stage you would not be able to go back and change any details towards Questions, Options and Answers for your Session." + "\n" + "\n" + "Are you sure you want to Proceed?" + "\n" );
if (confirmMsg==true)
{
submitform();
}
}
function submitform()
{
var fieldvalue = $("#QandA").val();
$.post("insertQuestion.php", $("#QandA").serialize() ,function(data){
var QandAO = document.getElementById("QandA");
QandAO.submit();
});
alert("Your Details for this Session has been submitted");
}
</script>
</head>
<body>
<form id="QandA" action="<?php echo htmlentities($action); ?>" method="post">
<h1><?php echo $sessionMinus ?> OF <?php echo $_SESSION['initial_count'] ?></h1>
<div id="detailsBlock">
<table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>
</div>
<hr/>
<div id="details">
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="question">Question</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<p><input id="submitBtn" name="submitDetails" type="submit" value="Submit Details" onClick="myClickHandler(); return false;" /></p>
</form>
<script type="text/javascript">
function myClickHandler(){
if(validation()){
showConfirm();
}
}
</script>
UPDATE:
Below is the code of in the insertQuestion() function:
function insertQuestion(form) {
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $image = $("<td class='image'></td>");
var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" +
"<p class='imagef1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p class='imagef1_upload_form' align='center'><br/><label>" +
"Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" +
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" +
"<iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe></form>");
$image.append($fileImage);
$tr.append($image);
$tbody.append($tr);
}
I think you want to check if sessionCount is NOT set (!isset). Try adjusting your code like this:
if(!isset($_POST['sessionCount'])){
//Declare my counter for the first time
$_SESSION['initial_count'] = $_POST['sessionNum'];
$_SESSION['sessionNum'] = intval($_POST['sessionNum']);
$_SESSION['sessionCount'] = 1;
}
elseif (isset($_POST['submitDetails']) && $_SESSION['sessionCount'] < $_SESSION['sessionNum']) {
$_SESSION['sessionCount']++;
}
Related
<input type="button" value="addkid " onClick="show()" />
<div>
<div id="myTableData" style="display:none; width:800px; height:500px; background-color:yellow; margin:0 auto;">
<form action="javascript:insert()" method="get">
<table>
<tr>
<td width="175">NAME</td>
<td width="245"> Gender</td>
<td width="245">Date of Birth</td>
</tr>
<tr>
<td width="175">
<input type="text" name="kid_name" id="kid_name" />
</td>
<td width="245">FEMALE
<input type="radio" name="gender" value="female" id="gender" />MALE
<input type="radio" name="gender" id="gender" value="male" />
</td>
<td width="245">
<?php for ( $i=1; $i<13; $i++ ) { $month=d ate( 'm', mktime(0,0,0,$i,2,2000)); $sel=( $i==d ate( 'n') ? ' selected="selected"' : ''); $options1[]="<option value=\" {$month}\ " {$sel}>{$month}</option>"; } $options_list1=j oin( "", $options1); echo "<select name=\"month\ " id='month' >{$options_list1}</select>"; for ( $j=1; $j<32; $j++ ) { $theday=d ate( 'd', mktime(0,0,0,0,$j,2000)); $sel=( $j==d ate( 'd') ? ' selected="selected"' : ''); $options2[]="<option value=\" {$theday}\ " {$sel}>{$theday}</option>"; } $options_list2=j oin( "\r\n", $options2); echo "<select name=\"day\ " id='day' >{$options_list2}</select>"; for ( $k=1960; $k<2016; $k++ ) { $theyear=d ate( 'Y', mktime(0,0,0,1,1,$k)); $sel1=( $k==d ate( "Y") ? ' selected="selected"' : ''); $options3[]="<option value=\" {$theyear}\ " {$sel1}>{$theyear}</option>"; } $options_list3=j oin( "\r\n", $options3); echo "<select name=\"year\ " id='year' >{$options_list3}</select>"; ?>
</td>
</tr>
</table>
<input type="submit" name="sub" value="add" />
</form>
</div>
</div>
<script>
function show() {
document.getElementById("myTableData").style.display = "block";
}
function createObject() {
var request_type;
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") {
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
//value solve an Internet Explorer cache issue
var nocache = 0;
function insert() {
// Optional: Show a waiting message in the layer with ID login_response
document.getElementById('content02').innerHTML = "Just a second..."
// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
var kid_name = encodeURI(document.getElementById('kid_name').value);
var gender = encodeURI(document.getElementById('gender').value);
var month = encodeURI(document.getElementById('month').value);
var day = encodeURI(document.getElementById('day').value);
var year = encodeURI(document.getElementById('year').value);
// Set te random number to add to URL request
nocache = Math.random();
// Pass the login variables like URL variable
http.open('get', '4.php?kid_name=' + kid_name + '&gender=' + gender + '&month=' + month + '& day=' + day + '&year=' + year + '&nocache = ' + nocache);
http.onreadystatechange = insertReply;
http.send(null);
}
function insertReply() {
if (http.readyState == 4) {
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
document.getElementById('content02').innerHTML = 'Your contact was successfully added!' + response;
}
}
</script>
4.php
<?php
if(isset($_GET['kid_name']) && isset($_GET['gender']) && isset($_GET['year']) && isset($_GET['day']) && isset($_GET['month']) )
{
echo $newFname = $_GET["kid_name"] ;
echo $newLname = $_GET["gender"] ;
echo $newPhone = $_GET["year"] ;
echo $newEmail = $_GET["day"] ;
echo $newAddress = $_GET["month"] ;
//$insertContact_sql = "INSERT INTO `test`.`contacts` (`newFname`, `newLname`, `newPhone`, `newEmail`, `newAddress`, `group`) VALUES ('{$newFname}' , '{$newLname}' , '{$newPhone}' , '{$newEmail}' , '{$newAddress}' , '{$group}')";
//$insertContact= mysql_query($insertContact_sql) or die(mysql_error());
} else
{
echo 'Error! Please fill all fileds!';
}
?>
I am working with php language. There is a addkid button, which, when the user clicks on the button a pop type window shows the form which has NAME , GENDER AND DOB. In the form action javascript:insert(). I am using ajax for the 1st time so I am not able to understand why it's not working. I guess it should redirect me to 4.php and in 4.php it will echo the values?
I have tested your code and seems it works, I just added a div to show the results there...
You can try to add this div you are not already added it...
<div id="content02">
</div>
Here you write the response, like "Your contact was successfully added"....
I have a form with some php to validate and insert in the database on submit and the form opens in colorbox.
So far so good. What I'm trying to do is to close colorbox and refresh a div on success.
I guess I need to pass a response to ajax from php if everything OK, close the colorbox with something like setTimeout($.fn.colorbox.close,1000); and refresh the div, but I'm stuck because I'm new in ajax.
I'll appreciate any help here.
Here is my ajax:
jQuery(function(){
jQuery('.cbox-form').colorbox({maxWidth: '75%', onComplete: function(){
cbox_submit();
}});
});
function cbox_submit()
{
jQuery("#pre-process").submit(function(){
jQuery.post(
jQuery(this).attr('action'),
jQuery(this).serialize(),
function(data){
jQuery().colorbox({html: data, onComplete: function(){
cbox_submit();
}});
}
);
return false;
});
}
form php code:
<?php
error_reporting(-1);
include "conf/config.php";
if(isset($_REQUEST['rid'])){$rid=safe($_REQUEST['rid']);}
if(isset($_REQUEST['pid'])){$pid=safe($_REQUEST['pid']);}
$msg = '';
if (!$_SESSION['rest_id']) $_SESSION['rest_id']=$rid; //change to redirect
$session_id=session_id();
if(isset($_REQUEST['submit'])){
if(isset($_POST['opta'])){
$opta=safe($_POST['opta']);
$extraso = implode(',',array_values( array_filter($_POST['opta']) ));
}
if (array_search("", $_POST['opt']) !== false)
{
$msg = "Please select all accessories!";
}else{
$extrasm = implode(',',array_values( array_filter($_POST['opt']) ));
if ($_POST['opt'] && isset($_POST['opta'])) {$extras= $extrasm .",". $extraso;}
if ($_POST['opt'] && !isset($_POST['opta'])) {$extras= $extrasm;}
if (!$_POST['opt'] && isset($_POST['opta'])) {$extras= $extraso;}
$sql['session_id'] = $session_id;
$sql['rest_id'] = $_POST['rid'];
$sql['prod_id'] = $_POST['pid'];
$sql['extras'] = $extras;
$sql['added_date'] = Date("Y-m-d H:i:s");
$newId=insert_sql("cart",$sql);
}
}
?>
<form id="pre-process" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<div style="background-color:#FFF; padding:20px;">
<?=$msg;?>
<?php
$name = getSqlField("SELECT name FROM products WHERE resid=".$_SESSION['rest_id']." and id=".$pid."","name");
echo "<div style='color:#fff; background-color:#F00;padding:10px;' align='center'><h2>".$name."</h2></div><div style='background-color:#FFF; padding: 20px 70px 30px 70px; '>Please select accessories.<br><br>";
$getRss = mysql_query("SELECT * FROM optional_groups_product where prodid=".$pid." order by id asc");
while ($rsrw = #mysql_fetch_array($getRss)) {
$goptionals = getSqlField("SELECT goptionals FROM optionals_groups WHERE resid=".$_SESSION['rest_id']." and id=".$rsrw['goptid']."","goptionals");
$goptionals=explode(', ',($goptionals));
echo "<select name='opt[]' id='opt[]' style='width:220px;'>";
echo "<option value='' >Select Options</option>";
foreach($goptionals as $v)
{
$vname = mysql_query("SELECT * FROM optionals where id=".$v." LIMIT 0,1");
while ($rsgb = #mysql_fetch_array($vname)) {
$aa=$rsgb['optional'];
}
echo "<option value=".$v." >".$aa."</option>";
}
echo "</select>(required)<br>";
//}
}
$getRss = mysql_query("SELECT * FROM optional_product where prodid=".$pid."");
?>
<br><br>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td bgcolor="#EAFFEC">
<div style="width:440px; ">
<?php
while ($rssp = #mysql_fetch_array($getRss)) {
$optional=getSqlField("SELECT optional FROM optionals WHERE id=".$rssp['optid']."","optional");
$price=getSqlField("SELECT price FROM optionals WHERE id=".$rssp['optid']."","price");
?>
<div style="width:180px;background-color:#EAFFEC; float:left;padding:10px;""><input type="checkbox" name="opta[]" id="opta[]" value="<?=$rssp['optid']?>" /> <i><?=$optional?> [<?=CURRENCY?><?=$price?> ]</i> </div>
<?php } ?>
</div>
</td>
</tr></table>
<input type="hidden" name="rid" value="<?=$rid?>" />
<input type="hidden" name="pid" value="<?=$pid?>"/>
</div><input type="hidden" name="submit" /><input id='submit' class="CSSButton" style="width:120px; float:right;" name='submit' type='submit' value=' Continue ' /><br />
<br /><br />
</div>
</form>
I don't know colobox, but if I understand well what you are trying to do,
I would say your javascript should more look like this
function cbox_submit()
{
jQuery("#pre-process").submit(function(e) {
e.preventDefault(); // prevents the form to reload the page
jQuery.post(
jQuery(this).attr('action')
, jQuery(this).serialize()
, function(data) {
if (data['ok']) { // ok variable received in json
jQuery('#my_colorbox').colorbox.close(); // close the box
}
}
);
return false;
});
}
jQuery(function() {
jQuery('#my_colorbox').colorbox({
maxWidth: '75%'
, onComplete: cbox_submit // Bind the submit event when colorbox is loaded
});
});
You should separate at least your php script that does the post part.
And this php (called with jQuery(this).attr('action')) should return a json ok variable if successfull. Example:
<?php
# ... post part ...
# if success
ob_clean();
header('Content-type: application/json');
echo json_encode(array('ok' => true));
?>
For some reasons my javascript form validation does not go through every row in the table.
I created the table with the codes below:
The $usr variable is just a result of another process:
<form name="myForm" action="addAccessories.php" method="post" onsubmit="return validateForm(this);">
<table border="1" id="IT">
<tr>
<th>Barcode<em>*</em></th>
<th>Current stock</th>
</tr>
<?php
for($id=1; $id<=$usr; $id++){
?>
<tr>
<td><input type="hidden" name="id[]" value="<?php echo $id; ?>" />
<input type="text" name="bar_code<?php echo $id; ?>" id="bar_code<?php echo $id; ?>" value="" /></td>
<td><input type="text" name="num_stock<?php echo $id; ?>" value="0" id="num_stock<?php echo $id; ?>"/></td>
<?php
}
?>
<tr>
<td> </td>
<td> <button data-theme="b" input type="submit" name="Submit" value="Submit">Add accessories</button></td>
</tr>
</table>
</form>
The number of rows from this table is: rows = $usr + 1
My validation form codes:
<script type="text/javascript">
function validateForm(){
var errors = [];
for(i = 1; i < document.getElementById("IT").rows.length; i++){
var barcode = document.getElementById('bar_code'+i).value;
var des = document.getElementById('description'+i).value;
var num_stock = document.getElementById('num_stock'+i).value;
if(barcode == null || barcode == ""){
errors[errors.length] = "You must enter barcode.";
}
if(isNaN(num_stock)){
errors[errors.length] = "Current stock must be an integer";
}
if(num_stock < 0){
errors[errors.length] = "Current stock must be a positive number";
}
if (errors.length > 0) {
reportErrors(errors);
return false;
}
return true;
}
}
function reportErrors(errors){
var msg = "There were some problems...\n";
for (var i = 0; i<errors.length; i++) {
var numError = i + 1;
msg += "\n" + numError + ". " + errors[i];
}
alert(msg);
}
</script>
This process only validates the 1st row in the table then stop. Can anyone show me what went wrong and how to fix it?
Thank you very much for your help
Your code is making life way more complex than it needs to be. A simpler approach is to just deal with the form controls, e.g. since you are already passing a reference to the form from the submit listener:
function validateForm(form) {
var errors = [];
var c, cs = form.elements;
var reB = /^bar_code/;
var reN = /^num_stock/;
var reD = /^[0-9]+$/;
for (var i=0, iLen=cs.length; i<iLen; i++) {
c = cs[i];
if (reB.test(c.name) && c.value == '') {
errors.push('You must enter barcode.'];
} else if (reN.test(c.name) && !reD.test(c.value)) {
errors.push('Stock number must be a positive integer.'];
}
}
// deal with errors...
}
Note that in the test:
> barcode == null || barcode == ""
barcode is a string, so the first test will never return true and the second is sufficient if you want to see if it's empty.
I want to insert values from another form field in one text area. There are multiple fields, each placed in different forms with different submit buttons. Whenever the button is clicked, the values in that form should be inserted into the text area.
The fields are generated in an array. I have assigned the same id name for every field. This is to make every field's values belong to that textarea. My problem is, only the first field insert its value into the textarea when I click its button.Other fields not working. How could I fix this?
Here is the code:
<script type="text/javascript">
window.onload = function() {
btn1 = document.getElementById("btnInsertText1");
myText1 = document.getElementById("myTextArea1");
text1 = document.getElementById("textToInsert1");
btn1.onclick = function(){
insertAtCursor(myText1, text1.value);
}
}
function insertAtCursor(myField, myValue) {
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
}
else {
myField.value += myValue;
}
}
</script>
<textarea id="myTextArea1" name="update" cols="85" rows="22">
Testing. Values from another field will be inserted here.
</textarea>
<?php
$ref = "
SELECT *
FROM reftext1_objective
WHERE projectid='$id'";
$refresult = mysql_query($ref);
while($row = mysql_fetch_array($refresult))
{?>
<form>
<input id="textToInsert1" type="text" value="<?php echo $row[$text];?>" readonly="true">
<input type="button" id="btnInsertText1" value="<<" />
</form><br><?php
}
As stated in my comment on the question, the problem is due to the duplicated element ids in the loop in your PHP code. To fix it, try this:
<script type="text/javascript">
$(function() {
var textarea = document.getElementById("myTextArea1");
$(".button").click(function() {
var $parentForm = $(this).closest("form");
var text = $(".insert-text", $parentForm).val();
insertAtCursor(textarea, text);
});
});
function insertAtCursor(myField, myValue) {
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
}
else {
myField.value += myValue;
}
}
</script>
<textarea id="myTextArea1" name="update" cols="85" rows="22">
Testing. Values from another field will be inserted here.
</textarea>
<?php
$ref = "SELECT * FROM reftext1_objective WHERE projectid = '$id'";
$refresult = mysql_query($ref);
while ($row = mysql_fetch_array($refresult))
{ ?>
<form>
<input class="insert-text" type="text" value="<?php echo $row[$text];?>" readonly="true">
<input type="button" class="button" value="<<" />
</form><br>
<?php }
?>
Example fiddle
I have a code in which i am sending the values from a form to php page where the query lies and for sending the values i am using $.post of jquery everything is going good. I am resulting a table and a button now i want that button will work and 1 of the table column has the radio button list so i want that button will take the radio id of that perticular row on click but my button is not working so please guide me how i can do this my code is here
my javascript function
function searchDetail(searchName) {
var textName = searchName + "Text";
var inputText = $('#' + textName).val();
var formName = searchName + "Form";
if (inputText === "") {
$('#' + textName).css("border", "2px solid red").fadeIn(4000);
}
else {
$('#' + textName).css("border", "1px solid #8dd7f6").show(2000);
$('#searchBox').fadeIn(1000);
$.post('../search/delete' + searchName + '.php', $('#' + formName).serialize(), function(result) {
$('#searchBox').html(result);
})
}
}
my php code
if ($count == "0") {
echo "There is no data with $search = ".$searchKeyword;
} else {
$color = 2;
echo "<table cellspacing='0px' cellpadding='7px'><thead><tr><th>#</th><th>book Id</th><th>book Name</th><th>book Writer</th><th>book Price</th><th>Availability</th></tr></thead><tbody>";
while ($row = mysqli_fetch_array($result)) {
$checkBook = $row['booktotal'] - $row['bookremain'];
if ($checkBook == 1) {
$status = "Yes";
} else {
$status = "No";
}
if ($color % 2 == 0) {
echo "<tr class='even'><td><input type=radio name=group1 value=".$row['bookId']."></td><td>".$row['bookId']."</td><td>".$row['bookName']."</td><td>".$row['bookWriter']."</td><td>".$row['bookPrice']."</td><td>".$status."</td></tr>";
$color = $color + 1;
} else {
echo "<tr class='odd'><td><input type=radio name=group1 value=".$row['bookId']."></td><td>".$row['bookId']."</td><td>".$row['bookName']."</td><td>".$row['bookWriter']."</td><td>".$row['bookPrice']."</td><td>".$status."</td></tr>";
$color = 2;
}
}
echo "</tbody></table><br><input type=button value=Delete id=deleteButton onclick='check()'> <script type=text/javascript> function check(){alert(Hello);}</script>";
mysqli_close($con);
}
?>
my html code
<body>
<div id="deleteFormTable">
<span id="headerFont">Enter Information to Delete Book</span><br><br>
<form id="bookSearchForm" name="bookSearchForm"><label>Search Book:</label> <input type="text" id="bookSearchText" name="bookSearchText"/> <select id="bookSearchOption" name="bookSearchOption"><option id="bookSearchId">Id</option><option id="studentSearchName">Name</option></select> <input type="button" value="Search" id="bookSearch" name="bookSearch" onclick="searchDetail(this.id)"></form>
</div>
<div id="searchBox">
<center><div id="searchLoadBox"><img src="../images/loadings.gif" alt="..."></div></center>
</div>
</body>
OK, I think I know what you are asking.
You have a list of items with radio boxes next to them, once the user clicks one and then clicks the button, you want the "value" tied to that radio button.
If that is the case, you can use this to find the value of the "Checked" radio group.
$("#deleteButton").click(function()
{
var bookId = $("input[#name='group1']:checked").val();
}