I'm trying to use the following code to grab the variables from the two inputs and add them together using Coffeescript like so:
here's the HTML...
<form action="" method="GET">
<input type="text" name="input1" value="2">
<input type="text" name="input2" value="3">
<input type="button" name="button" value="Equals" onClick="math(this.form)">
<span id="result" />
</form>
And the javascript...
math = (form) ->
input1 = form.input1.value
input2 = form.input2.value
document.getElementById("result").innerHTML = parseInt(input1, 10) + parseInt(input2, 10)
However, it's not outputting anything on the page. When I click the button, the Console tells me that "math" is not defined (on the fourth line of the html code.)_
You guys know what's going wrong here?
window.math = (form) ->
input1 = form.input1.value
input2 = form.input2.value
document.getElementById("result").innerHTML = parseInt(input1, 10) + parseInt(input2, 10)
Coffeescript has inherent scope.
It made math a local variable in a wrapper by default, thus you need to explicitly define window.math to access it from the rest of the webpage.
Coffeescript really is better when you're using some sort of javascript selector engine, wether that be native or jQuery, etc.
Related
I would like to stop default submission using Vanilla JavaScript. I created a sample of little form. But it gets refreshed when I submit the form even though I call the preventDefault() method. When I use input type="button" it works. But not works with input type="submit".
What will be the reason? Can anyone explain me what is the right method and what's wrong with the code?
My code is as follows:
let validation = () => {
let form = document.querySelector(".form");
form.addEventListener("submit", (event) => {
event.preventDefault();
});
}
<form action="" class="form" method="post" onsubmit="return validation()">
<input type="text">
<input type="submit" value="submit">
</form>
Optional Help: Can anyone give me a proper method or any good references on creating forms. Because when I search, I got lots of tutorials where all are says different methods and I really struggle to find out which method is the standard one.
Try the following changes to your code:
HTML
<form action="" class="form" method="post" onsubmit="validation(event)">
<input type="text">
<input type="submit" value="submit">
</form>
Try removing the return keyword and add event parameter.
JavaScript
const validation = event => {
event.preventDefault();
}
Using the preventDefault() method of event, the form is hopefully not submitted! Hopefully it works for you.
I want to use helper.repeat to create several input elements. But I want to declare the input tags as html instead of using #helper.input methods. But to do that I have to use a #index inside this loop. I am unable to instantiate and increase this variable. I tried something like the code below but I this output appear in html page:
BaseScalaTemplate(play.twirl.api.HtmlFormat$#5a8a0ced) = {0}
is output in html.
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
#index = {0}
#helper.repeat(questionForm("answer.alternatives"), min = 7) { (alternative) =>
<div class="checkbox">
<input type="checkbox" value="#alternative("correct") ">
<input type="text" id="answer_alternatives_(#index)_text" name="answer.alternatives[#index].text" value="">
</div>
}
</div>
</div>
Is there another maybe cleaner way to do what I want? Maybe with #for?
I use playframework 2.4.6 with Java8.
Playframework will let you do what you need, but you will have to do it in another way.
1) Your form definition will have a Seq[String] to save the results that come from the template.
2) Your form definition will need to include this change. In your case:
"answer_alternatives" -> seq(nonEmptyText)
3) Change the name and id from the template to #{alternative.name} so Playframework can link your input text to the sequence of String.
<input type="text" id="#{alternative.name}" name="#{alternative.name}" value="">
I have a form on my page that needs to have multiple form actions associated with it. I'm using the following script in conjunction with the following code to achieve this:
<script>
function submitForm(action)
{
document.getElementById('summary').action = action;
document.getElementById('summary').submit();
}
</script>
<form action="go-gold.php" method="post" enctype="multipart/form-data">
<input type="image" id="arrow" name="go_back" onclick="submitForm('go-gold.php')" value="go_back" src="images/arrow_back.png" class="submit_button" /><br>
<input type="image" id="arrow" name="submit_form" onclick="submitForm('registration.php')" value="submit_form" src="images/arrow.png" class="submit_button" />
</form>
The first button needs to "go back" within the same browser window (self), and the second button needs to submit the info to a new window (blank). How do I modify the code to achieve this? Putting "target" functions within the input type doesn't work, and putting the target in the Form tag makes both submit buttons submit to the same window.
Thanks!
Easy with jQuery, also you have to identical ids for two separate form elements. You should have these as distinct ids unless you want to use a class name. Php can submit forms to the same page using the $_SERVER superglobal by using $_SERVER['PHP_SELF'] as the forms action name.
<script>
$(document).ready(function() {
$(".submit_button").click(function() {
clickVal = $(".submit_button").val();
if(clickVal == 'go_back') {
//do go back stuff
}
if(clickVal == 'submit_form') {
// do actions for other page
}
});
});
</script>
<form action="go-gold.php" method="post" enctype="multipart/form-data">
<input type="image" value="go_back" src="images/arrow_back.png" class="submit_button" /><br>
<input type="image" value="submit_form" src="images/arrow.png" class="submit_button" />
</form>
I wonder how to switch language in Sugar? I have created a new module, wrote 2 language files. And now i want to create 2 radio buttons allow users to choose language.
Any clue will be appreciated.
Thank you.
i take a look at Users module, and in login.php i figure out my answer. After that, i create a view in my module to test it, and here is the result (code in display function). It works fine for me.
function display(){
global $current_language, $mod_strings, $app_strings,$sugar_config;
echo '
<form action="" method="post">
<input type="radio" name="lang" value="en_us" checked="checked">English<br>
<input type="radio" name="lang" value="vi">Vietnamese<br>
<input type="submit" value="Submit">
</form>
';
if(isset($_POST['lang']))
{
$lang = $_POST['lang'];
$current_language = $lang;
$_SESSION['authenticated_user_language'] = $lang;
$mod_strings = return_module_language($lang, "Activity");// Activity is my custom module
$app_strings = return_application_language($lang);
SugarApplication::redirect();
}
}
I have this code: <p class = "foo">Text</p>
And I also have a form: <form action = "XXX.php" method = post></form>
However, how can I get the value of the <p> when I submit it, as the <p> element can be changed.
So what I mean is to be able to post the value of the <p> when the user submits the form, and to be able to access it from that php file with: $_POST['foo'];
Thanks, I have tried to be as clear as possible.
You have to use Javascript for that
A jQuery function that will work
$("form").submit(function(){
var value = $("p").html();
// If foo already exists
if( $("[name=foo]").length > 0 )
{
$("[name=foo]").val(value);
}
else
{
var input = $("<input />", { name : "foo",
value : value ,
type : "hidden" });
$(this).append(input);
}
});
Use
<input type="hidden" value="something" name="something" id="something" />
and when you change inner html of <p> change the value of hidden input.
I think your best bet is to make it an input with readonly enabled, and style to to look like a <p>. It's better then trying to add it to the POST parameters with JavaScript.
Here's a quick example. I bet it could still be improved with a few extra CSS quirks, experiment a bit.
The easiest thing to do is set the value of a hidden form field when you change the contents of your <p>.
Alternatively, you can get its contents and post with JavaScript.
For text you need to use input field:
<input type="text"/>
Form fields should must have an id:
<input type="text" id="pewpew" class="foo"/>
I would go with:
<input type="text" id="pewpew" class="foo" value="default text goes here"/>
OR
Go with different workarounds, like setting form's hidden elements on the fly, etc.
You can create hidden field on the fly and set its value on form submit. Like this:
<form id="form" action="/somewhere" method="post">
<p>Some text</p>
<input type="submit" value="Submit"/>
</form>
<script type="text/javascript">
var form = document.getElementById('form');
form.onsubmit = function()
{
var p = this.getElementsByTagName('p')[0];
if (!document.getElementById('pval'))
{
var pinput = document.createElement('input');
pinput.setAttribute('type', 'hidden');
pinput.setAttribute('id', 'pval');
pinput.setAttribute('name', 'p');
this.appendChild(pinput);
}
document.getElementById('pval').value = p.innerHTML;
return true;
}
</script>
Works, i've tested.