Meteor newbie.
I am trying to experiment with a really simple form in meteor. Basically, I have a textbox, a submit button and a checkbox.
When I click the submit button, I want to see the following returned into my browser console.
Form submitted
submit
what ever is typed into the checkbox
and the status of the checkbox (I have 2 methods currently)
So far, all is ok, with the exception of the checkbox status. i have tried 2 methods, 1 always returns on and the other returns undefined.
I have been looking at this for days, and just cannot get it. If anyone can help, that would be really appreciated. I think I am close, just need a proper way to read the checkbox.
Here is the code I have sofa...
html file
<---
<template name="InputForm">
<form>
<input type="text" name="inputa">
<input type="submit" value="Submit">
<input type="checkbox" name="checkboxstatus" id="checkboxa" checked="{{isChecked}}"/> Click Me
</form>
</template>
--->
JS file
<---
Template.InputForm.events({
'submit form': function(){
event.preventDefault();
console.log("Form submitted");
console.log(event.type);
var inputAVar = event.target.inputa.value;
console.log(inputAVar);
var checkboxAVar1 = event.target.checkboxstatus.value;
console.log(checkboxAVar1);
var checkboxAVar2 = Session.get("isChecked");
console.log(checkboxAVar2);
//console.log(isChecked);
}
});
--->
Any help would be greatly appreciated, I don't think I will be able to sleep until I can read the status of this checkbox.
Steve
Related
In Bootstrap v5, how do I submit a form via Post method first, and then after the form is submitted, show the form is being processed? I've found lots of examples for Bootstrap v4 and jQuery but Bootstrap v5 does not have jQuery and the documentation says there could be issues with jQuery.
Here is a striped down version of my form:
<form action="" method="post" id="reqform">
<div class="input-group">
<div class="form-floating mb-3">
<input class="form-control " id="nameInputId" placeholder="name" name="name" aria-describedby="basic-addon1" type="text">
<label for="nameInputId">Name</label>
</div>
</div>
<button type="submit" id="submitBtnId" class="btn btn-primary">Submit</button>
</form>
I tried this in a script block at the bottom of the file:
//when click submit button, show loading
submitBtnElm = document.getElementById("submitBtnId")
submitBtnElm.addEventListener("click", function () {
// disable button
submitBtnElm.disabled = true;
//disable rest of form
document.getElementById("nameInputId").disabled = true;
//add spinner to button and change text to "loading'''"
submitBtnElm.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...'
});
In Chrome on CentOS 7, the form never gets submitted to the backend; I just get the loading button. On Firefox, the form gets submitted but the name field does not have a value on the backend. If I strip out this JavaScript, everything works fine.
I tried the form field onsubmit but I get the same results:
<form action="" method="post" id="reqform" onsubmit="return disableForm(this);">
I'd like to first post to the backend server and then after the post, show the loading button and disable the other fields. I want a way that the JS does not interfere with what is sent to the backend server. In other words, I'd like to be able to submit to the backend server when JS is disabled. I've found people asking the same with jQuery but none of them work for me.
Update:
I also tried:
submitBtnElm.addEventListener("submit", function ()
I setup a breakpoint on the backend server. The JS does not execute while the server is processing the information. As soon as the form gets submitted to the server, I want to change the button and form so the user can not do anything.
Update 2
I found this article that wraps the code that disables the form in a setTimeout:
https://chasingcode.dev/blog/javascript-disable-submit-button-form/
For me, it works in both Chrome and Firefox on CentOS 7. I don't have a mac to test. Here is my updated code that worked:
submitBtnElm = document.getElementById("submitBtnId")
submitBtnElm.addEventListener('click', function(event) {
setTimeout(function () {
event.target.disabled = true;
}, 0);
});
Do any Javascript gurus know if this is a good cross browser solution? If not, what is? The next best solution I found was where the functional button is swapped out with a non-function one that said something like 'loading'.
you can use Javascript, create a function that triggers when the form is summited. you can add a disabled class to the form. with a simple, if statement.
Im trying to create a very simple clock in/clock out system. Try to see the html code below.
<form>
<input type="text" value="work" name="work" />
<input type="submit" value="Clock In" name="submit" />
<?php 'some php code here' ?>
</form>
What I wanted to achieve is that whenever I click the submit button and form submits the data, the value of the textbox and the submit button would change. When you click it for the first time both would change to 'break/Clock Out', then when clicked again it would change to 'work/Clock In'. How is it possible? I believe it would require js but have no idea of the code yet. Tried searching anywhere but no luck. Hoping someone here would be able to help.
Thanks in advance.
I don't know if I've correctly understood.
You don't need to make a post submission with this form?
Just change values?
$("form").submit(function(e){
e.preventDefault();
if($("input[name='work']").val()=='work')
{
$("input[name='work']").val('break');
$("input[name='submit']").val('Clock out');
}
else
{
$("input[name='work']").val('work');
$("input[name='submit']").val('Clock in');
}
});
Jquery needed in this example obviously.
I know this question has been asked before but I didn't see the following solution anywhere else.
I have a website with a lot of forms and I'm looking for a way, without needing to edit the php for each form, to fend of the bots.
I'm proposing to use this but I wandered if anyone might have any thoughts or reasons why I should not?
<form method="POST" action="enableJavascript.html">
<!-- I change the action to a page to tell the user
that javascript is required-->
<input name="action" value="contact.php" type="hidden"/>
<!-- and add an input that contains the original action-->
<input name="name"/>
<input name="email"/>
<input type="submit" value="submit"/>
</form>
And here is the javascript / jQuery to handle posting the forms:
$(function() {
$('form').submit(function(e) {
var $this = $(this);
if (e.originalEvent) { // only change the action if the form was
// submitted via user input
e.preventDefault();
$this.attr('action', $('input[name=action]',$this).val());
$this.submit();
}
});
});
I guess this would fail if bots are known to 'click' buttons, but I don't know if that's the case?
This really won't work to stop bots and here's why. The bots will come in and scrape the field names from your form and then craft their own POST request. They're not going to see, let alone obey your JavaScript event stop.
What you should do is craft an AJAX page and have your form submit it that way. It makes it much harder for the bots to fill it out and submit because there's no <form action="page.php"> to follow. The other way is to install a captcha, like ReCaptcha
I'm having a strange behaviour with this code:
<script type="text/javascript">
function get()
{
alert("gggg");
jQuery.get (
"http://localhost:8080/c/portal/json_service",
{
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : document.getElementById("nombre")
}
);
}
</script>
<div>
<form>
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="button" value="Submit" onClick="javascript:get()"/>
</form>
</div>
Liferay portal gets blocked when the button "Submit" is pressed. The pop-up with the message "gggg" is showed, but after click ok on it, the page becomes blocked.
If I remove the line 'param : document.getElementById("nombre")', it doesn't block.
Can anyone explain me where is the error, or the reason of this behaviour?
Thanks in advance,
Rafa
The problem is that you're trying to pass an entire DOM element as the value for param, which jQuery isn't going to like. What type of element has ID nombre, and what property from that element do you want? If it's some kind of input, you likely want the value property, so you'd do:
param : document.getElementById("nombre").value
Updated Answer:
Thinking this through a little more, you should probably do this in a different way altogether. You're sending the data when the user clicks on the submit button, but remember if a user hits enter while typing in the input text box the form will submit but your code will not catch that.
A more robust solution would be to do it this way instead:
<div>
<form id="nombre_search">
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="submit" value="Submit"/>
</form>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#nombre_search").submit(function(){
$.get("http://localhost:8080/c/portal/json_service", {
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : $("#nombre").val()
});
return false;
});
});
</script>
Changes to your code:
Added an id to the form.
Made the submit button a submit button instead of just a button.
Placed code inside $(document).ready block.
Code runs when form is submitted not when button is clicked.
Hope this helps,
Sandro
I need a javascript code to prevents bots from submitting forms.
But i need a client side code in javascript that work like CAPTCHA but don't call the server
thank you
Most straight forward and simple way will be to add or edit form data on the fly when the button is actually clicked:
<input type="hidden" name="SubmittedByHuman" value="NO" />
<input type="submit" value="Submit me" onclick="this.form.elements['SubmittedByHuman'] = 'YES';" />
Having this, on the server side check the value of form element called "SubmittedByHuman" - if it will be "NO" it means something bypassed the submit button - or as people mentioned correctly in comments, user did click but has disabled JavaScript.
do something like
<h1>Type the result in the input box : 1+1</h1>
<input id="sum" type="text"/>
and before submitting you check if the value in the input is 2 and then submit it.
To improve this type of code you could randomly create these 2 values in the h1 and save them into a var and before submiting check if input and sum are the same.
I doubt this is possible, as bots are sophisticated enough to bypass most things.
Remember, the bot isn't going to open the webpage in a browser and press submit. It'll probably scan the page for a <form>, make a list of all the <input> fields, and perform a POST request containing all the data for each one.
It won't run any javascript, or press any buttons. You'll have to make the check server-side.