whenever i clicked a SEND BUTTON a dropdown menu will popup. How can I do it? That's my code right now. What's wrong with this snippet?
<?php if(isset($_POST["driver_number"]))?>
<form action="#" method="post">
<select name="driver_number">
<option value="Driver Number">Driver Number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="submit" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="if(!confirm('+ document.getElementById('driver_number').value')){return false;}" >Send</button> </form>
UPDATE: Thank you guys! All your answer help me.
You have to do following changes:
1) You are selecting element by id so need to give id to your select box
2) Your escaping for click event in incorrect change your code as below
<form action="#" method="post">
<select name="driver_number" id="driver_number">
<option value="Driver Number">Driver Number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="submit" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="if(!confirm(document.getElementById('driver_number').value)){return false;}" >Send</button> </form>
Please see my complete runable code . I hope it will help you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="container">
<?php if(isset($_POST["driver_number"]))
print_r($_POST);
?>
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary" data-toggle="modal" data-target="#myDropdown">Send dropdown value</button>
<!-- Modal -->
<div class="modal fade" id="myDropdown" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<form action="#" method="post">
<select name="driver_number">
<option value="Driver Number">Driver Number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="submit" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="if(!confirm('+ document.getElementById('driver_number').value')){return false;}" >Send</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
First of all, you have to change the button type="submit" to type="button", otherwise the form is submitted without evaluating the onclick event.
Secondly, to use document.getElementById('driver_'number') you must have an id on the select element.
Thirdly (this is mainly for elegance) the {return false;} in the if condition for the confirm could be unnecessary, and you could implement the submission in a function as suggest in the code below:
<?php if(isset($_POST["driver_number"])) { print_r($_POST); }// to test what has been posted?>
<form id="myform" action="#" method="post">
<select id="driver_number" name="driver_number">
<option value="Driver Number">Driver Number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="button" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="send();" >Send</button> </form>
<script>
function send(){ if(confirm(document.getElementById('driver_number').value)){ document.getElementById('myform').submit(); }
}
</script>
Finally, there are two typos '+ and ' in your if(!confirm('+ document.getElementById('driver_number').value')) condition, it should read if(!confirm(document.getElementById('driver_number').value))
Related
I found a way how to pop up a new text box after click on "Others" from the dropdown. But the problem here is database capture "Other" instead of the new data that I key in. For example I key in "Policeman" but it captured "Other" in my database.
<head>
<script type="text/javascript">
function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text"
name="other" />';
else document.getElementById('div1').innerHTML='';
}
</script>
</head>
<form action="https://apps3.xendsys.com/emv3/index.php/lists/xl080bdvq5cc8/subscribe" method="post">
<div class="box box-primary borderless">
<div class="box-header">
<h3 class="box-title">Website Subscribers</h3>
</div>
<select name="OCCUPATION" id="OCCUPATION"
onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="Student">Student</option>
<option value="Educator">Educator</option>
<option value="Designer">Designer</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>
<div class="box-footer">
<div class="pull-right"><input type="submit" class="btn btn-primary btn-flat" name="yt0" value="Subscribe"/></div>
<div class="clearfix"> </div>
</div>
</div>
</form>
What should I change ya?
I have some working jQuery that grabs the value from an input from which the user enters, and then also grabs a value from a hidden field, the jQuery then performs the necessary calculations and displays the result.
The issue I am having is when I put the fields into a modal, it doesn't work, even when I try and state the modal ID before the input ID.
Can someone help me get this working as needed?
$(function() {
$(document).ready(function() {
$("#demoModal #qty").keyup(function() {
totalTP = $("#demoModal #qty").val() * $("#demoModal #price").val() / 100;
$("#demoModal #totalTP").val(totalTP);
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<label>Enter your taxable monthly profit</label>
<input name="qty" id="qty" type="text" />
<input hidden name="price" id="price" type="hidden" value="19" /><br />
<label>Deducitble Tax Available</label>
<input name="totalTP" id="totalTP" type="text" />
<br>
<br>
<form id='fm'>
<label>HR:</label>
<select class="first">
<option disabled selected value="0">Select Plan</option>
<option value="0">No Plan</option>
<option value="50">HR Plan</option>
<option value="100">HR Pro</option>
<option value="200">HR Pro+</option>
<option value="400">HR Pro Plan</option>
</select>
<label>Accounting:</label>
<select class="second">
<option disabled selected value="0">Select Plan</option>
<option value="0">No Plan</option>
<option value="50">Accounting Plan</option>
<option value="100">Accounting Pro</option>
<option value="200">Accounting Pro+</option>
<option value="400">Accounting Pro Plan</option>
</select>
<label>Graphic Design & Marketing:</label>
<select class="third">
<option disabled selected value="0">Select Plan</option>
<option value="0">No Plan</option>
<option value="50">Graphic Design Plan</option>
<option value="100">Graphic Design Pro</option>
<option value="200">Graphic Design Pro+</option>
<option value="400">Graphic Design Pro Plan</option>
</select>
<input hidden type="text" class="form-control" id="temp" name="temp">
<input hidden type="text" class="form-control" id="bc" name="bc">
<input hidden type="text" class="form-control" id="de" name="de">
</form>
<br>
<label>Plan Costs:<div id="total"></div> </label>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
View on jsFiddle
I have a screenshot as shown below:
The screenshot above belongs to the following code:
<h3 style="text-align:center;margin-top:45px;">Sitting Days</h3>
<div class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<!-- Date START -->
<div class="select-date" style="margin-right:30px;">
<h4 style="text-align:center;">Select Date</h4>
<input type="date" id="house-sitting-date" name="house_sitting_date" value="<?php if($data->{" house_sitting_date "}<>''){echo $data->{"house_sitting_date "};}?>">
</div>
<!-- Date END -->
<!-- Yes/No Dropdown START -->
<div class="yes-no">
<h4 style="text-align:center;">Yes/No</h4>
<select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
<option value="nada" <?php if($data->{"house_sitting_date_yes_no"}=="nada"){echo 'selected';} ?>>Please choose an option</option>
<option value="yes" <?php if($data->{"house_sitting_date_yes_no"}=="yes"){echo 'selected';} ?>>Yes</option>
<option value="no" <?php if($data->{"house_sitting_date_yes_no"}=="no"){echo 'selected';} ?>>No</option>
</select>
</div>
<!-- Yes/No Dropdown END -->
<!-- Add new row button START -->
<div class="add-new-row-button">
<input type="button" id="addRow" value="Add New Row" onclick="rowAdd()"/>
</div>
<!-- Add new row button END -->
</div>
<!-- Javascript Code START -->
<script>
function rowAdd() {
}
</script>
<!-- Javascript Code END -->
On hitting save button, the above form (as shown in the screenshot) gets saved in the following JSON file:
$output['house_sitting_date']=$_POST['house_sitting_date'];
$output['house_sitting_date_yes_no']=$_POST['house_sitting_date_yes_no'];
if(file_exists('../feeds/ptp-ess_landing_house.json')){
$data = json_decode(file_get_contents('../feeds/ptp-ess_landing_house.json'));
}
Problem Statement:
I am wondering what JavaScript code I need to add so that it add another select of rows. When I say Select of Rows, I meant to say the following. I added an onclick event on input tag.
You'll need to change some minor things, but this is the general idea:
<h3 style="text-align:center;margin-top:45px;">Sitting Days</h3>
<div class="add-new-row-button">
<input type="button" id="addRow" value="Add New Row" onclick="rowAdd()" />
</div>
<div id="rows">
<div class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<div class="select-date" style="margin-right:30px;">
<h4 style="text-align:center;">Select Date</h4>
<input type="date" id="house-sitting-date" name="house_sitting_date" value="">
</div>
<div class="yes-no">
<h4 style="text-align:center;">Yes/No</h4>
<select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
<option value="nada" selected>Please choose an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
</div>
<script>
function rowAdd(event) {
document.getElementById("rows")
.insertAdjacentHTML('beforeend', newRow());
}
function newRow() {
return `
<div id="default-node" class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<div class="select-date" style="margin-right:30px;">
<input type="date" id="house-sitting-date" name="house_sitting_date" value="">
</div>
<div class="yes-no">
<select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
<option value="nada" selected>Please choose an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
`
}
</script>
I want to add another ckeditor whenever you click the add button another text field with ckeditor will be added. When click it added new field already but i cannot type on the new field with ckeditor. Here's my code:
* View *
<div id="addanother">
<?php echo $this->ckeditor->editor("textheading_lead[]",""); ?>
<br>
<div class="form-group">
<label for="sel1">小見出し</label>
<select class="form-control" name="subheading[]">
<option value="">監修 one</option>
<option value="">監修 two</option>
<option value="">監修 three</option>
<option value="">監修 four</option>
</select>
</div>
<input type="text" class="form-control" name="subheading_text[]">
</div>
<div id="addnewdiv"></div>
<a href="" class="btn btn-info addfields" >+</a>
* javascript *
$('.addfields').on('click', addfields);
function addfields(e) {
var new_input = $('#addanother').html();
var aaa = new_input + '<br>';
$('#addnewdiv').append(new_input);
e.preventDefault();
}
* Controller *
public function add_special(){
$this->load->library('ckeditor');
$this->load->library('ckfinder');
$this->ckeditor->basePath = base_url().'asset/ckeditor/';
$this->ckeditor->config['language'] = 'en';
$this->ckeditor->config['width'] = '730px';
$this->ckeditor->config['height'] = '300px';
$this->ckfinder->SetupCKEditor($this->ckeditor,'../../asset/ckfinder/');
$this->load->view('common/header');
$this->load->view('admin/special/add_special');
$this->load->view('common/footer');
}
link of CKEditor package
https://ckeditor.com/ckeditor-4/download/
Unfortunately ckeditor plugin used to create dynamic id for editor panel. While appending div, plugin finds duplicate editor instances with same id textheading_lead[] and it was throwing error in your case. Here i made some alterations and will work for you.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><html lang="en">
<head>
<title>How to Integrate CKeditor in Codeigniter using Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/ckfinder/ckfinder.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="<?php echo base_url(); ?>/Test57619322/here">
<div class="row">
<div class="col-lg-12">
<div id="addanother">
<br>
<?php echo $this->ckeditor->editor("textheading_lead[0]",""); ?>
<br>
<div class="form-group">
<label for="sel1">小見出し</label>
<select class="form-control" name="subheading[]">
<option value="">監修 one</option>
<option value="">監修 two</option>
<option value="">監修 three</option>
<option value="">監修 four</option>
</select>
</div>
<input type="text" class="form-control" name="subheading_text[]">
</div>
<div id="addnewdiv"></div>
</div>
</div>
<div class="row" style="margin-top:20px;">
<div class="col-lg-12">
<a href="" class="btn btn-info addfields" >+ Add Fields</a>
<input type="submit" name="submitBtn" value="Submit" class="btn btn-success">
</div>
</div>
</form>
</div>
<script type="text/javascript">
$('.addfields').on('click', addfields);
var i=0;
function addfields(e) {
e.preventDefault();
var copy = $('#addanother').clone();
var oneplus=i+1;
$(copy).find('div#cke_textheading_lead\\[0\\]').remove();
$(copy).find('script').remove();
$(copy).find('textarea[name=textheading_lead\\[0\\]]').attr('name', 'textheading_lead['+oneplus+']');
$('#addnewdiv').append($(copy).html()+ '<br>');
CKEDITOR.replace('textheading_lead['+oneplus+']');
i++;
}
</script>
</body>
</html>
You can receive response in your controller like $_POST["textheading_lead"] or Codeigniter post method and as usual it gets as an array.
I'm sure this is very simple problem for you guys, but I'm stuck. I have a modal angularjs form and I'd like to execute a function when I press the "Assign" button. In the HTML template that creates the modal form, I have a select element and I want to pass a value. The code is this:
<script type="text/javascript">
$("#assignButton").on("click",function(event) {
myValue = $("#sfc").selectmenu("value")
});
</script>
<script type="text/ng-template" id="assignSFC.html">
<div class="modal-header" style="fill: #f08a00">
<h3>Assign SFC</h3>
</div>
<div class="modal-body">
<fieldset>
<label for="sfc">Select a Service Chain</label>
<select name="sfc" id="sfc">
<option selected="selected" value="0">No Chain</option>
<option value="1">Service Chain 1</option>
<option value="2">Service Chain 2</option>
</select>
</fieldset>
<div class="modal-footer">
<!-- <div class="alert alert-error" ng-model="error.msg">
<a class="close" data-dismiss="alert">x</a>
<strong>Error!</strong>This is a fatal error. {{error.msg}}
</div> -->
<button type="button" class="btn btn-warning" ng-click="cancel()">Cancel</button>
<button type="button" id="assignButton" class="btn btn-primary" ng-click="ok(value)">Assign</button>
</div>
</script>
In the last button, if I put something like: ng-click="ok(2)", it will execute the assignSFC function perfectly. My problem is that I don't know how to pass these values (0,1,2) according to the selection in the form.
Do you see anything idiotic?
THANKS AGAIN!!
You are doing it in wrong way. Angularjs is two way binding, you are trying to mixup jQuery with angularjs. Angularjs has its own functions to achieve what you want. You haven't use controller and you are trying to use click button using ng-click.
Try below code:
<script type="text/ng-template" id="assignSFC.html">
<div ng-controller="TemplateController">
<div class="modal-header" style="fill: #f08a00">
<h3>Assign SFC</h3>
</div>
<div class="modal-body">
<fieldset>
<label for="sfc">Select a Service Chain</label>
<select name="sfc" id="sfc" ng-model="data.sfcSelection">
<option selected="selected" value="0">No Chain</option>
<option value="1">Service Chain 1</option>
<option value="2">Service Chain 2</option>
</select>
</fieldset>
<div class="modal-footer">
<!-- <div class="alert alert-error" ng-model="error.msg">
<a class="close" data-dismiss="alert">x</a>
<strong>Error!</strong>This is a fatal error. {{error.msg}}
</div> -->
<button type="button" class="btn btn-warning" ng-click="cancel()">Cancel</button>
<button type="button" id="assignButton" class="btn btn-primary" ng-click="ok()">Assign</button>
</div>
</div>
</script>
And here the controller:
angular.module('myApp', [])
.controller('TemplateController', ['$scope', TemplateController]);
function TemplateController($scope) {
$scope.data = {};
$scope.data.sfcSelection = [];
$scope.ok = ok;
function ok() {
console.log($scope.selectedValue);
}
}