I am trying to use the MDBootstrap WYSIWYG plug-in to enhance my forms, but am coming up short.
It does not seem to appear to be a class that can be applied to a textarea; doing so only displays the form element without the enhanced functions and toolbar. Instead, the docs say to create an instance as follows
<div class="wysiwyg" data-mdb-wysiwyg="wysiwyg" id="foo" name="foo">
However, when submitting a form that includes the above div, the value contained is not "posted" or "getted".
I have seen a post (https://mdbootstrap.com/snippets/standard/m-duszak/3256156#js-tab-view) that suggests what to do, using Javascript, but I don't understand it. The HTML they give (with the addition of the first textarea that I have added) is:
<form>
Title:
<textarea name="title" cols="60" rows="2"><?php echo $Story->title; ?></textarea>
<div class="first-area">
<div class="wysiwyg" data-mdb-wysiwyg="wysiwyg">
</div>
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
The JS is:
const formEl = document.querySelector('form');
const firstArea = document.querySelector('.first-area .wysiwyg-content');
formEl.addEventListener('submit', (e) => {
e.preventDefault();
alert(`Text area content: ${firstArea.innerText}, but you can also get HTML: ${firstArea.innerHTML}`)
})
What I need to do is get what is there into a $_POST or $_GET or via some method that I can then use to process for a MYSQL insert or update. Any help would be appreciated.
Im calling a function from onclick of a button. When i press the button it executes my function deletes everything from the screen and displays the button inside my function. Everything works ok but why does it delete everything from screen. How to make it for it to only run the function but keep previous html elements prior to clicking the function?
<div id="form-container">
<form id="dim_form" action="">
<div class="bg">
<label class="form-label-a" for="dimm">Dimension</label>
<input id="dimm" type="text" />
</div>
<div class="bg">
<label class="form-label-b" for="dimm_upper">Upper tolerance</label>
<input id="dimm_upper" type="text" required />
</div>
<div class="bg">
<label class="form-label-c" for="dimm_lower">Lower tolerence</label>
<input id="dimm_lower" type="text" required />
</div>
<div class="bg">
<input class="form-button" type="submit" onclick="data_table();" value="Calculate" />
</div>
</form>
</div>
data_table()
document.write("<input class='download' type='button' id='button-a' value='download xls' />");
I tried with "button" instead of submit. return false, basically everything i found on google and nothing works for me.
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
When this method is not used for testing, it is often used to write some text to an output stream opened by the document.open() method. See "More Examples" below
see the full documentation here: https://www.w3schools.com/jsref/met_doc_write.asp
if you want to add some nodes without cleaning the whole HTML try append
https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
document.write will erase everything you had earlier. Instead use append.
function data_table() {
const input = document.createElement('input');
input.type = "submit";
input.id = "button-a";
input.value = "download xls";
document.querySelector('.bg').appendChild(input);
}
<div class="bg">
<input class="form-button" type="submit" onclick="data_table();" value="Calculate" />
</div>
Document is referred to the entire html page when you are trying to do document.write it will write on the entire page....
There can be couple of work arounds but i will suggest this one
Give class to the element you want to add element to.
Get element by the class you assign to the element in first step
var x = document.getElementsByClassName("example");
if you want to keep whats already there
x.appendChild("whatever you want to add goes here");
if you want to add only new element and discard everything previously present
x.innerHtml="whatever you want to add goes here";
I would like to pass whatever the user input in the text area to the button to open a new page as shown in the graph.
How should I create (set?) the variable "{{ analysis_id }}"?
Thank you!
Please check the image here
Text area:
<div class="field">
<label for="geneid">Input sequence (Amino acid or Nucleotide) or Gene ID </label>
<textarea name="geneid" id="geneid" rows="6"></textarea>
</div>
The button:
<button onclick="location.href='/analysis/{{ analysis_id }}';" type="submit" class="btn btn-success">Submit</button>
This entire approach is mistaken. You don't pass data to a button. You shouldn't have that onclick function at all; instead, wrap both textarea and button in a form element. Then the form will be submitted to a view, from where you can access the data via the request and pass it to the next template.
I try to make my checkout page more friendly and how to do this:
I have guest form`s and save button after them. And after guest info is saved (instead payment option) are show send my order button - this is from one module Cash on delivery, but instead to choice only this i move button to be showed directly.
BUT: Many clients are confused from this "save" button. I want to marge this two buttons in one.
How to do this? What is the best solution: to add some js when for save button or adding new button instead these 2?
You can see the problem page in my live shop here: http://bijutaniki.com/porychka (do not forget to add product like: http://bijutaniki.com/prysteni/8-prysten-na-nastroenieto.html - and shop is on bulgarian)
Now process looks like that:
What i want to do:
I try two times to add new button with js instead these to but without success. May be if use "save" button and add js to click on other "send order" button will be more easy because when "save" been clicked check fields above and if fields are valid show message.
What are you think, how to combine this buttons.
Thanks!
EDIT:
Save button and message:
{$HOOK_CREATE_ACCOUNT_FORM}
<p class="submit">
<input type="submit" class="exclusive button" name="submitGuestAccount" id="submitGuestAccount" value="{l s='Save'}" />
</p>
<p style="display: none;" id="opc_account_saved">
{l s='Account information saved successfully'}
</p>
<p class="required opc-required" style="clear: both;">
</p>
Send order button (with smile):
<div class="cod_cofirm">
<form action="{$link->getModuleLink('cashondelivery', 'validation', [], true)|escape:'html'}" method="post">
<input type="hidden" name="confirm" value="1" />
<p class="cart_navigation" id="cart_navigation">
<input type="submit" value="{l s='Send order' mod='cashondelivery'}" class="extraorderbutton" />
</p>
</form>
</div>
Because prestashop have controllers may be need to show code from some controller?
I guess there is no valid answer without showing us code, I'll try it anyway:
$('NEW_Send_Order_btn').click(function(e){
e.preventDefault();
$('Save_btn').trigger('click');
if($('Save_btn').hasClass('well_done')){
$('Send_my_order').trigger('click');
}
});
I'm trying to take a user input, turn it into a JS variable, and use it in multiple places in the html.
I've included an alert function immediately after the user enters the input and that works, but I can't display the variable at the bottom.
Here's the code:
<body>
<div class="hero-unit">
<h1> Title </h1>
<p> This form description </p>
<form class="well" name="formInput" action= "#">
<label>Input</label>
<input Id="txtvarInput" class="span3" style="margin: 0pt auto;" type="text" placeholder="AAA, BBB, CCC..." data-provide="typeahead" data-items="10" data-source="["AAA","BBB","CCC","DDD","EEE","FFF","GGG","HHH","III","JJJ","KKK","LLL"]"/>
</label>
<div class="form-actions" "span3">
<input name="submit" type="submit" class="btn" value="Select" onclick="alert('you chose ' + theInput.value)"/>
<script language="javascript" type="text/javascript">
var theInput = document.getElementById('txtvarInput');
</script>
</div>
</form>
</div>
<div class="page-header">
<h1>Input:
<script language="javascript" type="text/javascript">
document.write(theInput.value);
</script>
</h1>
</div>
JavaScript works a bit differently than you might be imagining.
When you say...
document.write(theInput.value);
...right in the middle of some html element somewhere, it only calls that once when the page first renders.
If you want to call it when the text input changes or a button is clicked you'll need to put it in a function and call that function when some event happens on some element.
See this link to learn about events: http://www.w3schools.com/js/js_events.asp
HOWEVER, document.write() is a bit different where, when called from a function, it will overwrite the entire page!
So... in this case you will need to "append" a text element to the <h1> element that you are trying to update.
See this link to learn more about the document object model (DOM) and working with its elements: http://www.w3schools.com/jsref/dom_obj_element.asp
Once you're familiar with these principals you'll want to make your life a lot easier and your code more cross-browser friendly by checking out a framework for doing these things like jQuery: http://jquery.com/
UPDATE (ADDED VALUE):
For those interested, something like what is being asked here can be accomplished quite easily today in "pageless", JavaScript based web applications using AngularJS (http://angularjs.org/). Do read up on the documentation and the appropriate circumstances under which this technology can be utilized. Start with the FAQs (http://docs.angularjs.org/misc/faq) and move into the videos (http://www.youtube.com/user/angularjs).
In a document.onload function I would put the following:
theInput.onchange = function(event){
document.getElementById('h1Id').innerHTML = theInput.value
}
presumably you want the HTML to update everytime the user changes the input?
The update should happen after the button is clicked.
<html>
<body>
<div class="hero-unit">
<h1> Title </h1>
<p> This form description </p>
<form class="well" name="formInput" action= "#">
<label>Input</label>
<input Id="txtvarInput" class="span3" style="margin: 0pt auto;" type="text" placeholder="AAA, BBB, CCC..." data-provide="typeahead" data-items="10" data-source="["AAA","BBB","CCC","DDD","EEE","FFF","GGG","HHH","III","JJJ","KKK","LLL"]"/>
</label>
<div class="form-actions" "span3">
// UPDATED HERE
<input name="submit" type="submit" class="btn" value="Select"
onclick="alert('you chose ' + theInput.value);
document.getElementById('inputresult').innerHTML = theInput.value;"/>
<script language="JavaScript" type="Text/JavaScript">
var theInput = document.getElementById('txtvarInput');
</script>
</div>
</form>
</div>
<div class="page-header">
<h1 id="myh1">Input:</h1>
<!-- UPDATED HERE -->
<div id="inputresult">
</div>
</h1>
</div>
Provide semantic markup, including placeholders for your values, e.g.
Input: <span class="inp-reflector"></span>
<!-- Or, for HTML5+ -->
Input: <output class="inp-reflector"></output>
Procedurally attach one or more event handlers to your input:
var inp = document.querySelector('#input-id');
inp.addEventListener('input',update,false);
inp.addEventListener('change',update,false);
Have your event handler(s) retrieve the value of the input and change your page:
function update(evt){
var changedElement = evt.target;
var newValue = changedElement.value;
var outputs = document.querySelectorAll('.inp-reflector');
outputs.forEach(function(out){
out.innerHTML = newValue;
});
}
The answer intentionally uses JavaScript features from modern browsers only.
For a generic reflection system:
<input class="reflectable" data-reflect-to=".bar">
…
document.querySelectorAll('.reflectable').forEach(function(el){
el.addEventListener('change',reflect,false);
el.addEventListener('input',reflect,false);
});
function reflect(evt){
var outSelector = evt.getAttribute('data-reflect-to');
document.querySelectorAll(outSelector).forEach(function(o){
o.innerHTML = evt.target.value;
});
}
Inline script such as the following, will execute as soon as the browser renders them. So the script below executes as soon as the browser is rendering that particular script tag and way before the user has entered any input, therefore the global variable you have created is not populated with any data inputted by the user. You need to attach an event to the submit button on the page that sets the global variable and displays it on the page.
<div class="page-header">
<h1>Input:
<script language="JavaScript" type="Text/JavaScript">
document.write(theInput.value);
</script>
</h1>
</div>