Hello i want to use tinymce and mathlatex in form with select option field where i can select math or text i tried to use this code :
$("#type_c").change(function()
{
var opt = $(this).val();
var conte = document.getElementsByName('content');
var text = document.getElementsByClassName('tox-tinymce');
var maths = document.getElementsByClassName('matheditor-wrapper-math');
switch (opt) {
case "1":
if(maths){
$(".matheditor-wrapper-math" ).remove();
tiny();
}else{
tiny()
}
break;
case "2":
if (text){
$(".tox-tinymce" ).remove();
math()
}else{
math()
}
break;
}
});
and html code :
<div class="form-group">
<label for="">Question</label>
<input type="text"
class="form-control" name="questionn" id="question" aria-describedby="helpId" placeholder="">
<small id="helpId" class="form-text text-muted">add the question</small>
</div>
<div class="form-group">
<label for="">select the type</label>
<select class="form-control" name="type" id="type">
<option value="1">QE</option>
<option value="2">Tache</option>
<option value="3">Liste</option>
</select>
</div>
<div class="form-group">
<label for="">content type</label>
<select class="form-control" name="type_c" id="type_c">
<option value="">Select the type content</option>
<option value="1">Text</option>
<option value="2">Latex</option>
</select>
</div>
<div class="form-group">
<label for="">content</label>
<textarea class="form-control" name="content" id="content" rows="3"></textarea>
</div>
<input type="hidden" name="m_id" value={{$m_id->id}}>
<button type="submit" class="btn btn-primary">Submit</button>
it working when you get the best choice at the first time but when i want to switch options , i got errors or the nothing display.
please could you help me to fix that
Try to use hide and show to hide your elements instead of removing them.
$(".matheditor-wrapper-math" ).hide();
// or
$(".matheditor-wrapper-math" ).show();
Related
can anyone help me. i want to display reasons box if i select pending or incomplete job status.
DROPDOWN
<div class="form-group">
<label for="exampleFormControlSelect2">Job Status</label>
<select type="text" id="job_status" name="job_status" onchange="myFunction()">
<option value=''></option>
<option value="Doing">Doing</option>
<option value="Pending">Pending</option>
<option value="Incomplete">Incomplete</option>
<option value="Completed">Completed</option>
</select>
</div>
REASON BOX THAT I WANT TO APPEAR IF I SELECTED PENDING OR INCOMPLETE
<div class="form-group row">
<label for="reason" class="col-sm-2 col-form-label">Reason</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3">
</div>
</div>
THE SCRIPT
<script>
function myFunction() {
var x = document.getElementById("job_status").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
THANKS ALL
You just need to change the css of the input whenever you select those options using simple if else condition.
function myFunction() {
var x = document.getElementById("job_status").value;
if(x == 'Pending' || x == 'Incomplete'){
document.getElementById("reason").style.display = 'block';
}
else {
document.getElementById("reason").style.display = 'none';
}
}
#reason {
display:none;
}
<div class="form-group">
<label for="exampleFormControlSelect2">Job Status</label>
<select type="text" id="job_status" name="job_status" onchange="myFunction()">
<option selected disabled>Select Status</option>
<option value="Doing">Doing</option>
<option value="Pending">Pending</option>
<option value="Incomplete">Incomplete</option>
<option value="Completed">Completed</option>
</select>
</div>
<div id="reason" class="form-group row">
<label for="reason" class="col-sm-2 col-form-label">Reason</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3">
</div>
</div>
I want to create a dynamic select element where if I choose a certain option and a specific text input field is disabled.
Here is my HTML:
<div class="form-group col-md-2">
<label for="">Tipo de Compra</label>
<select name="" class="form-control" id="tipoCompra" required>
<option value="">Tipo de compra </option>
<option value="Nacional">Nacional</option>
<option value="Exterior">Exterior</option>
</select>
</div>
If the user selects the option "Nacional" I want to make the following input field disabled so they can't enter any value.
<div class="form-group col-md-2">
<label for="fob">Costo Fob</label>
<input type="number" step="00.01" id="fob" name="fob" disabled="false" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
</div>
I'm using JavaScript for my functions and some Jquery, but I don't know how to create a function for this.
This is my function:
function TipoCompra(){
var tipoCompra = document.getElementById('tipoCompra').value;
console.log(tipoCompra);
var fob = document.getElementById('fob');
if (tipoCompra == 'Nacional'){
fob.disable = true;
} else {
fob.disable = false;
}
}
But i dont know how to change the disabled property.
You need to check change of your select with change function of jQuery
https://api.jquery.com/change/
And check the value of your select.
Then use prop function to disabled your element.
https://api.jquery.com/prop/
$('#fob').prop('disabled', true);
$("select[name='test']").change(function() {
let selectVal = $(this).val();
if (selectVal == 'Nacional') {
$('#fob').prop('disabled', false);
} else {
$('#fob').prop('disabled', true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-2">
<label for="">Tipo de Compra</label>
<select name="test" class="form-control" required>
<option value="">Tipo de compra </option>
<option value="Nacional">Nacional</option>
<option value="Exterior">Exterior</option>
</select>
</div>
<div class="form-group col-md-2 costo">
<label for="fob">Costo Fob</label>
<input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
</div>
HTML
<div class="form-group col-md-2">
<label for="">Tipo de Compra</label>
<select name="" id="myList"class="form-control" required onchange="disable()">
<option value="">Tipo de compra </option>
<option value="Nacional">Nacional</option>
<option value="Exterior">Exterior</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="fob">Costo Fob</label>
<input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
</div>
JS
function disable(){
if(document.getElementById('myList').value == 'Nacional'){
document.getElementById('fob').disabled = true
}
else{
document.getElementById('fob').disabled = false
}
}
Based on your update with your JavaScript there's a few changes you need to make:
Assuming you want to inline the JavaScript function for onchange like your other functions
This should include onChange="TipoCompra()":
//<select name="" class="form-control" id="tipoCompra" required>
<select name="" class="form-control" id="tipoCompra" onChange="TipoCompra()" required>
This should be disabled:
//fob.disable = true;
fob.disabled = true;
disabled="false" is invalid in your input:
//<input type="number" step="00.01" id="fob" name="fob" disabled="false" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
<input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute
A number of attributes are boolean attributes. The presence of a
boolean attribute on an element represents the true value, and the
absence of the attribute represents the false value.
The values "true" and "false" are not allowed on boolean attributes.
To represent a false value, the attribute has to be omitted
altogether.
Functional example. Note: I removed the calls to the Todas(); function since it wasn't included with your question.
function TipoCompra(){
var tipoCompra = document.getElementById('tipoCompra').value;
console.log(tipoCompra);
var fob = document.getElementById('fob');
if (tipoCompra == 'Nacional'){
fob.disabled = true;
} else {
fob.disabled = false;
}
}
<div class="form-group col-md-2">
<label for="">Tipo de Compra</label>
<select name="" class="form-control" id="tipoCompra" onChange="TipoCompra()" required>
<option value="">Tipo de compra </option>
<option value="Nacional">Nacional</option>
<option value="Exterior">Exterior</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="fob">Costo Fob</label>
<input type="number" step="00.01" id="fob" name="fob" class="form-control" required>
</div>
When i select the option value of "other" in my dropdown lis the form row below appears and allows me to type a manual cemetery but what gets submitted to the database is just the entry of "other" and not what i typed in manually?
<script>
function handleSelect() {
var selected = document.getElementById("mySelect").value;
var details = document.getElementById("other-details");
if (selected === "other") {
details.classList.remove("d-none");
details.classList.add("d-block");
} else {
details.classList.remove("d-block");
details.classList.add("d-none");
}
}
</script>
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Cemetery</label>
<select name="cemetery" class="form-control" id="mySelect" onchange="handleSelect();">
<option value="select" selected="selected">Select Cemetery</option>
<option value="Akatarawa">Akatarawa</option>
<option value="Taita">Taita</option>
<option value="Wainuiomata">Wainuiomata</option>
<option value="Whenua Tapu">Whenua Tapu</option>
<option value="Makara">Makara</option>
<option value="Karori">Karori</option>
<option value="St Johns">St Johns</option>
<option value="Awa Tapu">Awa Tapu</option>
<option value="Paraparaumu">Paraparaumu</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-row d-none" id="other-details">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="" placeholder="Enter other Cemetery" />
</div>
</div>
</body>
Try setting name of the input to cemetery.
<input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery" />
This may work, but not a good practise.
I suggest you to do something like following
HTML
<input type="text" id="other" class="form-control" name="other-cemetery" placeholder="Enter other Cemetery" />
PHP
if($_POST["cemetery"] == "other"){
$cemetery = $_POST["other-cemetery"];
}
Update: The first solution that I gave may not work in other cases. So add the following line to handleSelect() function. (Not selected case)
document.getElementById("other").value = document.getElementById("mySelect").value;
Thanks Dum, combining that link of JS and setting the Value of the "other" drop down to empty.
Example: <option value="">Other</option>
This has resolved my issue. Many thanks
Hi I downloaded some html template which I am trying to readjust and I have some code form like this, is it possible that I can change the option "value" into "href" so when client select lets say "Standard Access" and click on the button Buy Now to redirect to the paypal lets say?
Here is the code :
<div class="modal-body">
<form method="POST" action="#">
<div class="form-group">
<input type="text" class="form-control" name="your-name" placeholder="Your Name">
</div>
<div class="form-group">
<input type="text" class="form-control" name="your-email" placeholder="Your Email">
</div>
<div class="form-group">
<select id="ticket-type" name="ticket-type" class="form-control" >
<option value="">-- Select Your Ticket Type --</option>
<option value="standard-access">Standard Access</option>
<option value="pro-access">Pro Access</option>
<option value="premium-access">Premium Access</option>
</select>
</div>
<div class="text-center">
<button type="submit" class="btn">Buy Now</button>
</div>
</form>
</div>
Here you have some example. Probably it's possible to make it better, but I don't know the context.
$('#confirmButton').on('click', function() {
const href = $('#redirect').val();
window.location.href = href;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="redirect">
<option value="" disabled selected>-- Select Your Ticket Type --</option>
<option value="https://www.google.com">Google</option>
<option value="https://stackoverflow.com">Stackoverflow</option>
</select>
<button type="button" id="confirmButton">Confirm</button>
You can add onsubmit listener to your form.
<form method="POST" action="#" onsubmit="myFunction()">...
</form>
<script>
myFunction(){
var x = document.getElementById("ticket-type").value;
if (x== 'standard-access') {window.location.href = "http://www.URL1.html";}
else if (x== 'pro-access') {window.location.href = "http://www.URL2.html";}
return false; // to prevent default submit
}
</script>
When the user selects an option from the list, i want to put the option values into the space - however again every time i try, it goes wrong. Can anyone help or point me in the right direct with this please - thanks.
This is the form code.
<form>
<div class="form-group">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon"><i class="gi gi-user"></i></span>
<select class="form-control input-md" id="subscription" name="subscription">
<option value="1">Choose Plan</option>
<option value="Solo">Solo - 1</option>
<option value="Double">Double - 2</option>
<option value="Triple">Triple - 3</option>
</select>
</div>
</div>
<div class="col-xs-3">
<input id="plan" type="text" name="plan" class="form-control input-md" value="">
</div>
</div>
</form>
Assuming you're using JQuery, try this code:
// JQuery
$("#subscription").on('change', function(){
$('#plan').val($(this).val());
});
// Vanilla JS
var subscription = document.getElementById('subscription');
var plan = document.getElementById('plan');
subscription.onclick = function(){
plan.value = this.value;
}