confirm user's input and show output then submit form - javascript

I would like to take a users form input,ask the user to confirm and show them their selection ,and then submit form to the server only after they have confirm.I am not really sure how to go about this?
Thanks,
Here is my code so far:
<form id="myform" action="form.php" method="post">
<?php
echo "<ul>";
foreach($dir as $item) {
$items = basename($item);
$str = str_replace("+", " ", $items);
if (strpos($str, 'test') === false) {
if (strlen($str) == 3) {
$strs = ucwords(strtoupper($str));
echo "<li><label><input type = 'checkbox' class='check-class' name='chk[]' id='strs[]' value=$items>$strs</label></li>";
} else {
$strs = ucwords($str);
echo "<li><label><input type='checkbox' class='check-class' name='chk[]' id='strs[]' value=$items>$strs</label></li>";
}
}
}
echo "</ul>";
?>
<div style="text-align:center">
<input type="submit" style="font-face:'Comic Sams MS';font-size:larger;color:red;background-color:#FAF0E6;border:3pt ridge lightgrey;" value="Click to Submit">
</div>
</form>
<div id="success"></div>
<script type="text/javascript">
$(function() {
$('#myform').submit(function() {
$.ajax({
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(data) {
$('#success').html(data);
}
});
return false;
});
});
</script>
Form.php
<html>
<table>
<?php
#$b = str_replace("+"," ",$_POST['chk']);
#echo "<script type='text/javascript'> test() </script>";
echo "You have selected these Folders";
foreach($_POST['chk'] as $val)
{ echo "<tr>";
echo "<td>";
echo str_replace("+"," ",$val);
echo "<tr>";
echo "</td>";
}
?>
</table>
</html>

The simplest method is to use window.confirm.
$('#myform').submit(function() {
var selectedItemsText = '';
$(this).find('input[type="checkbox"]:checked').each(function(){
selectedItemsText += $(this).val() +'\r';
});
if(confirm('Are you sure? You've selected:\r'+selectedItemsText)){
$.ajax({
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(data) {
$('#success').html(data);
}
});
}
return false;
});
Check out this Fiddle. I've omitted the AJAX for obvious reasons.
There are nicer ways of doing this. You could use a jQuery UI Dialog (or equivalent) for example. But for a quick, dirty, easy solutions - just use confirm.

Related

change event not triggered from dynamic selection

Let me put this as simple as possible. I have a ajax call which loads the dropdown dynamically. I have another ajax call which is used to display details when any item is clicked.
Problem: I cant trigger the event of second ajax call.
If second ajax call is working it has to atleast display triggered when the change event happens. But the change event not even triggers.
Code:
First ajax call
<select id="name">
<option selected disabled>Please select</option>
</select>
<?php if (isset($_GET['place']) && $_GET['place'] != '') { ?>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$.ajax({
type: "POST",
data: {place: '<?= $_GET["place"] ?>'},
url: 'listplace.php',
dataType: 'json',
success: function (json) {
if (json.option.length) {
var $el = $("#name");
$el.empty(); // remove old options
for (var i = 0; i < json.option.length; i++) {
$el.append($('<option>',
{
value: json.option[i],
text: json.option[i]
}));
}
}else {
alert('No data found!');
}
}
});
</script>
Continued 2nd ajax call with closing php..
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$("#name").on('change',function (e) {
var name1 = this.value;
$.ajax ({
data:{name1: name1},
type: 'POST',
url: 'dataprod.php',
success: function (response) {
console.log(response);
$('.products-wrp').html('');
$('.products-wrp').hide();
$('.products-wrp').html(response);
$('.products-wrp').show();
},
});
});
</script>
<?php } ?>
output from dataprod.php
dataprod.php for reference
<?php
session_start(); //start session
include("config.inc.php"); //include config file
?>
<?php
$name1 = $_POST['name1'];
echo $name1;
$results = $mysqli_conn->query("SELECT product_name, product_desc, product_code,
product_image, product_price FROM products_list where product_name='$name1'");
$products_list = '<ul id ="products_list" class="products-wrp">';
while($row = $results->fetch_assoc()) {
$products_list .= <<<EOT
<li>
<form class="form-item">
<h4>{$row["product_name"]}</h4>
<div>
<img src="images/{$row["product_image"]}" height="62" width="62">
</div>
</form>
</li>
EOT;
}
$products_list .= '</ul></div>';
echo $products_list;
echo 'triggered';
?>

How to prevent submit script from textarea input

how can I prevent submitting only script to the database, but all HTML tags should be allowed using the following script I'm using. Please help.
<form name="exthtmlForm" style="height: 100%;">
<fieldset>
<legend>Source Editor</legend>
<div id="editor" name="editor" style="height: 100%;">
<textarea id="iExthtml" style="max-width: 100%; width: 100%; height: 50px; box-sizing: border-box;">
<?php if($exthtml_content!=""){ echo htmlentities($exthtml_content, ENT_QUOTES, 'UTF-8'); } ?>
</textarea>
</div>
</fieldset>
</form>
$(document).on('click','#abtSubmit',function(){
var data = $('#iExthtml').val().replace(/'/g, "\\'");
dataString=$('form[name=exthtmlForm]').serialize();
$.ajax({
type: 'POST',
url: "<?php echo $GLOBALS['base_url'];?>ajax/cpanel/cpanel-ajax.php?mode=UpdateExthtml",
cache: false,
data: { content : data , dpid : <?php echo $dpid; ?> , menuID : <?php echo $MPage; ?> },
dataType: "json",
success: function(data){
if(data.success == "yes"){
if($("#states").length!==1){
$(".error_2525").remove();
$('#abtSubmit').before("<div class='error_2525' id='success_message' style='margin-top: 10px;'>Content updated successfully</div>");
$('#success_message').delay(5000).fadeOut(300, function(){
$('#success_message').remove();
});
}
}
}
});
});
There are two steps to accomplish this. First, you need to pull the default value for the textarea and store it in a javascript variable
jQuery(document.ready(function(){
window.form_exthtmlForm_default = '<?php echo (($exthtml_content!="") ? htmlentities($exthtml_content, ENT_QUOTES, 'UTF-8') : ""); ?>';
}));
Then you need to use this variable (window.form_exthtmlForm_default) on submit to insure that the form is not passing the default value.
Revised submit function:
$(document).on('click','#abtSubmit',function(){
var data = $('#iExthtml').val().replace(/'/g, "\\'");
//Here we will return false if the form has the default textarea value.
if ($('#iExthtml').val() == window.form_exthtmlForm_default) {
//You would want to also provide some sort of frontend
//user message to alert the user to populate the text
return false;
}
dataString=$('form[name=exthtmlForm]').serialize();
$.ajax({
type: 'POST',
url: "<?php echo $GLOBALS['base_url'];?>ajax/cpanel/cpanel-ajax.php?mode=UpdateExthtml",
cache: false,
data: { content : data , dpid : <?php echo $dpid; ?> , menuID : <?php echo $MPage; ?> },
dataType: "json",
success: function(data){
if(data.success == "yes"){
if($("#states").length!==1){
$(".error_2525").remove();
$('#abtSubmit').before("<div class='error_2525' id='success_message' style='margin-top: 10px;'>Content updated successfully</div>");
$('#success_message').delay(5000).fadeOut(300, function(){
$('#success_message').remove();
});
}
}
}
});
});

How to submit a form via jQuery if url-parameter is given?

I am trying to make a form be submitted if there is a trigger-parameter in the url. I so far added a code-snippet so automatically insert the parameter into the input field.
This is my current code, working perfectly when using the submit-button or Enter.
e.g => website.com/?lookup=value
<form method="post" name="formid" id="formid">
<?php $paraid = $_GET['lookup']; ?>
<input class="form-control" id="steamid" name="s" value="<?php echo $paraid; ?>" >
<input type="submit" id="invbtn" value="submit" />
</form>
<script>
$('#formid').submit(function() {
var id = $("#steamid").val().replace(/(?:https?\:)?\/\//i, '');
$.ajax({
type: "GET",
data: "s="+id,
url: 'steam.php',
beforeSend:function() {
$("#outputinfo").html("<center><img src='./assets/img/load.gif'></br></br>Wait...</center>");
},success: function(html) {
$("#outputinfo").html(html);
}
});
return false;
});
$(document).ready(function() {
var id = '<?php echo $_GET['s']; ?>';
if (id != null) {
$.ajax({
type: "GET",
data: "s="+id,
url: 'steam.php',
beforeSend:function() {
$("#outputinfo").html("<center><img src='./assets/img/load.gif'></br></br>Wait...</center>");
},success: function(html) {
$("#outputinfo").html(html);
}
});
}
return false;
});
</script>
Thanks in advance.. i hope you guys can help me out..
To submit a form if it has a certain word in the url use:
<?php if(isset($_GET['lookup'}) == 'value') :?> //whatever website.com/?lookup=value is
<script>
$(document).ready(function(){
$('#formid').submit();
});
</script>
<?php endif ?>

ajax on update data in database using codeigniter

<button id="survey_act" method="post" class="tiny ui blue button" type="button" value="<?php echo $surv['id']; ?>" >Activate Survey</button>
This is my button on click -
<script>
$(document).ready(function(){
$(document).on("click","#survey_act", function(){
alert(this.value);
idx = this.value;
$.ajax({
type: "POST",
url: "<?php echo base_url('index.php/admin/survey/act_surveyby_id/')?>/"+idx,
}).done(function(msg){
if(msg=="success"){
alert('You Successfully Activated the Survey!');
}
});
});
});
</script>
This is my javascript -
public function act_surveyby_id($id){
$this->load->model('survey_m');
if($this->survey_m->insert_activate($id)){
echo "success";
}else{
echo "invalid";
}
}
This is my controller -
public function insert_activate($id){
$date = date('m-d-Y',now());
$stat = 'Active';
$data = array(
'issued_date' => $date ,
'status' => $stat
);
$this->db->update('survey', $data)->where('survey_id', $id);
if($this->db->affected_rows()>0){
return true;
}else{
return false;
}
}
}
This is my model -
Problem: when i click the activate survey it wont change/update the details of the survey. I really badly need a help regarding with this. Thanks . . .
change $.ajax function like below
$.ajax({
url: '<?php echo base_url(); ?>index.php/admin/survey/act_surveyby_id',
type: "POST",
data: {
idx : idx;
},
and controller like below
public function act_surveyby_id(){
$id=$_POST['idx'];
$this->load->model('survey_m');
if($this->survey_m->insert_activate($id))
{
echo "success";
}else{
echo "invalid";
}
}

Ajax call with javascript not working

I want to try to get some value from page cart.php from and ajax call, but its not working.
Ajax code is below:
function temp_sell(id) {
//var p_id=document.getElementById('temp').value;
alert(p_id);
$.ajax({
type: "POST",
url: "temp_sell.php",
data: "value=" + p_id,
success: function (message) {
alert(message);
$("#your_cart").html(message);
}
});
}
temp_sell.php is below where I want to show some products details
<?php
include("connection.php");
echo $p_id = $_POST['value'];
$qty=1;
$query="SELECT * FROM product WHERE id='$p_id'";
$result=mysql_query($query);
while($data=mysql_fetch_array($result))
{
?>
<form>
<table>
<tr>
<img src="<?php echo "img/".$data['image'];?>"/>
<strong><?php echo $data['pro_name'];?></strong>
<strong><?php echo $data['price'];?></strong>
<input type="text" value="<?php echo $qty;?>"/>
</tr>
</table>
</form>
<?php
}
?>
p_id is undefined, you have commented the p_id value or change temp_sell(p_id).
function temp_sell(p_id)
instead of
function temp_sell(id)
Reference comments : Ajax call with javascript not working
Do this :
function temp_sell(id){
var p_id=document.getElementById('temp').value; // <--- uncomment this line
alert(p_id);
$.ajax({
type: "POST",
url: "temp_sell.php",
data: {value:p_id}, // <--- change this
success: function(message){
alert(message);
$("#your_cart").html(message);
}
});
}

Categories