Defining a default button when pushing enter key - javascript

I have a Grails app which contains a .gsp page with a number of textFields, several submitToRemote buttons, and a couple actionSubmit buttons on it. When filling out the textFields, I want to be able to hit enter after I'm done, and have it do the same as clicking a specific submitToRemote button. Currently it is acting as if I clicked a specific actionSubmit button that I never intentionally specified.
I found this: How to trigger HTML button when you press Enter in textbox? . It seems like what I want, so I adapted it to my page, but it doesn't appear to be doing anything.
I'll forgo posting the entire .gsp but add what I feel is appropriate for the question.
Here is the button that is being activated currently:
<br>
<g:hiddenField name="type" value="head"/>
<g:actionSubmit value="Get Reports" action="showReports"/>
<br>
Here is the button that I want to be activated:
<g:submitToRemote value="find" url="[action: 'findCustomer']"
update="results" />
So what I did was add an id to both the target submitToRemote button, and 1 textField, then added the <g:javascript> tag wrapping around the scrip from the above linked page. Which looks like this:
<g:textField name="lastName" id="inputTextBox"/>
...
<g:submitToRemote value="find" id="findCustomer" url="[action: 'findCustomer']"
update="results" />
...
<g:javascript>
$(document).ready(function(){
$('#inputTextBox').keypress(function(e){
if(e.keyCode==13)
$('#findCustomer').click();
});
});
</g:javascript>
Also, I am using the jQuery library as such:
<g:javascript library="jquery" />
I'm not sure if my approach here is flawed, as I do need it to work on any of the 10 textFields on the page. I went through the grails documentation and couldn't find anything that really matched this...

I found the solution was quite close to what I had.
First I had to add an id to my submitToRemote button:
<g:submitToRemote value="find" url="[action: 'findCustomer']" update="results" id="submitForm"/>
Then in my main.gsp I added the proper script:
$(document).bind("keypress", function (e) {
if (e.keyCode == 13) {
$("#submitForm").click();
return false;
}
});
The really important thing here is the return false; because without it, it will click the button, and then submit the form which is not what I needed.

Related

How edit elements of existing link and open the edited version of the link? (Without saving it localy)

I want to build a html website_A where you can type some data and then open another website_B with a button click and this website_B would be changed according to the text we typed in the first website.
For example we have a website_B example.com with a
<h1 id="xxx">
We save the link in our website_A as a string, insert an input field and button with onClick function:
<input type="text" id="text_id" name="text_name"><br><br>
<input type="submit" value="Open Link!" onclick="openLink()">
<script>
var link = 'example.com';
function openLink() {
link.getElementById("xxx").innerHTML = document.getElementById("text_id").text;
window.open(link);
</script>
}
It should open the link with the changed h1.
Somehow it doesn't work, I don't know the javascript much, not even sure if I can achieve it with js or I have to use some othere languages. I googled a lot and didn't find anything, most information is about changing files locally or changing just the href link, not its elements.
I appreciate your help!

Javascript function inside ui:repeat to show/hide contact formular not working

I have a facelet that shall dynamically list teachers loaded from database with name, profile picture etc. etc. Every listed teacher has its own contact formular, which gets hidden after pageload, and a button "get in touch" which, onclick, shall open the contact formular below and hide the button "get in touch". The formular has some text fields and a submit button "send request". After clicking "send request" I want to call a backing bean method which saves the request in the database, and, with javascript, hides again the contact formular and shows the "get in touch" button instead.
Here is the page listing the teachers:
<ui:composition template="/WEB-INF/templates/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<script type="text/javascript">
$(document).ready(function () {
$(".request_form").hide();
});
</script>
<ui:repeat id="teachers" var="teacher" value="#{teachersController.teachers}" varStatus="it">
profile picture, infos, etc.
<p:button id="btn_open_request_form"
value="get in touch"
onclick="$('#teachers:#{it.index}:request_form').show(300); $(this).hide(); return false;"/>
<h:form class="request_form" id="request_form" prependId="false">
Text inputs for email, message...
<p:button value="#{msg['cancel']}"
onclick="$('#teachers:#{it.index}:request_form').hide(300); $('#teachers:#{it.index}:btn_open_request_form').show(); return false;"/>
<p:commandButton value="send request"
process="#form"
update="#form"
action="#{teachersController.sendRequest(teacher.id)}"
oncomplete="$('#teachers:#{it.index}:request_form').hide(300); $('#btn_open_request_form_#{it.index}').show();"
/>
</h:form>
<h:messages></h:messages>
<br/>
</ui:repeat>
</ui:define>
</ui:composition>
In a first attempt I was using c:forEach instead of ui:repeat to iterate over the teachers. The showing/hiding of the contact formular and buttons with jQuery was working perfectly, but the action method of p:commandButton could not be called and no request was sent, so I switched to ui:repeat.
Now, the requests are saved to the database, but the hiding/showing with Javascript doesn't work anymore. The formulars get hidden by pageload as expected. But then, when clicking on "get in touch", the button itself gets hidden, as I want, but no formular is shown.
It took me a while to figure out how jsf generates all the id's but I got it right in the end by checking the generated html. Here is the generated html of the button:
<button id="teachers:1:btn_open_request_form"
name="teachers:1:btn_open_request_form"
type="button"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
onclick="$('#teachers:1:request_form').show(300); $(this).hide(); return false;;window.open('/lehrerverzeichnis/faces/requests/teachers.xhtml','_self')">
here the one of the form:
<form id="teachers:1:request_form"
name="teachers:1:request_form"
method="post"
class="request_form" ...>
What am I getting wrong? Before, when using c:forEach, it worked well (with different id's of course). But the selector in jQuery function matches the form id, why isn't it shown after clicking the button? The button itself gets hidden by the command afterwards, so the onclick function gets called for sure.
It seems to me that combining Javascript and JSF is not a good idea. What else could I do instead?
Thank you very much in advance..
SOLVED It was just a stupid mistake. The semicolon in the jQuery Selector needs to be escaped. In the created html source, $('#some:id') would need to be $('#some\:id'). To have two backslashes remaining they must be escaped as well in the facelet. So in the .xhtml file there must be written $('#some\\\:id'), so 4 backslashes before the colon are necessary that 2 survive in the created html.
Thats why I prefer Java, it would at least have told me where the problem is.. :D

How to add custom javascript function in contact form 7 Wordpress

I am facing a problem in using the contact form 7 in wordpress, and need some help to all of you.
Problem:
I have radio box which have two options yes or no. if someone check the yes option then div one shoud be shown and if he clicks at no then 2nd div should be shown.
I write a code but how it will be us in contact form 7, i don't know.
here is the code.
$(document).ready(function() {
//Hide the field initially
$("#div one").hide();
$("#div two").hide();
$('[radio radio-928]').change(function()
{
if ($("[radio radio-928]").val() == "yes")
{
$("#div one").show();
}
else {
$("#div two").hide();
}
if ($("[radio radio-928]").val() == "no") {
$("#div two").show();
}
else {
$("#div one").hide();
}
});
});
This can be done in the Contact Form 7 editor box like this:
<script type="text/javascript">
function showdiv(element){
document.getElementById("div-one").style.display = element=="yes"?"block":"none";
document.getElementById("div-two").style.display = element=="no"?"block":"none";
}
</script>
<input type="radio" name="choice" value="yes" onclick="showdiv(this.value);"> Yes<br>
<input type="radio" name="choice" value="no" onclick="showdiv(this.value);"> No<br>
<div id="div-one" style="display:none;">Yes</div>
<div id="div-two" style="display:none;">No</div>
If your function works in JS console but not when saved in form, ensure it does not have blank lines.
For some reason these are turned into p tags, the editor is not really HTML aware at least on the sites I have used it on.
E.g. Capitalize first character of specific input boxes by a class.
<script language="javascript" type="text/javascript">
jQuery(function($){
// Capitalize first character as needed.
$.fn.capitalize = function() {
$(this).blur(function(event) {
var box = event.target;
var txt = $(this).val();
var stringStart = box.selectionStart;
var stringEnd = box.selectionEnd;
$(this).val(txt.replace(/^(.)/g, function($char) {
return $char.toUpperCase();
}));
box.setSelectionRange(stringStart, stringEnd);
});
return this;
}
$('input[type=text].capitalize').capitalize();
});
</script>
Once I remove the new line it works facepalm...
simply add you JavaScript function to your page then find the Additional Settings field at the bottom of the contact form management page and use the on_submit JavaScript action hook like so:
on_submit: "MY_JavaScript_function_Name();"
Add to your Wordpress the plugin: Insert Headers and Footers by WPBeginners
Activate the plugin and go to Settings - > Insert Headers and Footers
Add your javascript code inside script tags. When your page loads, this script will be in the head of your DOM
On Contact Form 7, add your buttons using HTML code adding the respective ID attributes mentioned on your code to control your document.
I do this all the time, specially to use jQuery.
You can copy the generated HTML of contact forms and add the javascript code. For example you have a submit form as:
[submit class:btn class:btn-lg class:btn-black "Enviar"]
If you look to the HTML code (Inspector or View Page HTML) you will have this code:
<input type="submit" value="Enviar" class="wpcf7-form-control btn-lg btn-black" disabled="">
Paste the code and add the javascript you need inside, for example:
<input type="submit" onclick="gtag('event','EnvioFormularioHome'); ga('send', 'event', { eventCategory: 'Formulario', eventAction: 'Enviado', eventLabel: 'Hernani'}) value="Enviar" class="wpcf7-form-control btn btn-lg btn-black" disabled="">
I know this is an old post but I wanted to share my discoveries in case anyone needs it later.
The OP problem is definetely the blank lines in the code, the form editor adds P elements to each new line. If you open the js console you will see the errors that points out to the code.
Also something we should pay attention, and that took me a lot of time to figure out, it that the editor removes backslashes.
I was adding some input masks validation and found this code:
v = v.replace(/\D/g, "");
becoming this after saving:
v = v.replace(/D/g, "");
So, a workaround is to declare like this:
v = v.replace(/\\D/g, "");
However, each time it is saved the backslashes would be removed, so I needed to keep its source code saved somewhere else then paste it to the editor each time.
In the end I've just added a custom html widget with all the custom js inside a script tag.
It will make the code work globally in the website but it was my way to ensure that users will not mess up the form masks and validation code.

How to assign value of a text box to Grails link tag's id?

I have a textbox on my page that ppl can input numbers, by clicking the button "submit" I want it to be the same as clicking the id in the list, which would redirect to the show page. How can I do that?
<g:link action="show" id="<g:javascript>document.getElementById('TextBox').value()</g:javascript>">
<input type="button" class="bigbuttonstyle" value="Submit" name="Submit" /></div>
</g:link>
Above won't work... but that's something i want... please advise. Thanks!!
That won't work because when the link tag renders HTML, it uses the ID attribute to build the URL. I would just use some behavioral JavaScript to bind a click event to your button that would issue a redirect for you. So using something like jQuery it would look a little like this...
<button id='show-btn'>Show</button>
$(function() {
$('#show-btn').click(function() {
window.location = '/path/to/show/' + $('#TextBox').val();
});
});
What's nice about this also is that you get to remove inline JavaScript out of your markup which is becoming an anti-pattern.

Display confirmation popup with JavaScript upon clicking on a link

How do I make one of those hyperlinks where when you click it, it will display a popup asking "are you sure?"
<INPUT TYPE="Button" NAME="confirm" VALUE="???" onClick="message()">
I already have a message() function working. I just need to know what the input type for a hyperlink would be.
<a href="http://somewhere_else" onclick="return confirm()">
When the user clicks the link, the confirm function will be called. If the confirm function returns false, the link traversal is cancelled, if true is returned, the link is traversed.
try to click, I dare you
with the function
function confirmAction(){
var confirmed = confirm("Are you sure? This will remove this entry forever.");
return confirmed;
}
(you can also return the confirm right away, I separated it for the sake of readability)
Tested in FF, Chrome and IE
As Nahom said, except I would put the javascript:message() call directly in the href part (no need for onclik then).
Note: leaving the JavaScript call in the onClick has a benefit: in the href attribute, you can put a URL to go to if the user doesn't have JavaScript enabled. That way, if they do have JS, your code gets run. If they don't, they go somewhere where they are instructed to enable it (perhaps).
Now, your message routine must not only ask the question, but also use the answer: if positive, it must call submit() on the form to post the form. You can pass this in the call to ease the fetching of the form.
Personally, I would go for a button (input tag as you show) instead of a simple link to do the process: it would use a more familiar paradigm for the users.
[EDIT] Since I prefer to verify answers I give, I wrote a simple test:
<script type="text/javascript" language="JavaScript">
function AskAndSubmit(t)
{
var answer = confirm("Are you sure you want to do this?");
if (answer)
{
t.form.submit();
}
}
</script>
<form action="Tests/Test.html" method="GET" name="subscriberAddForm">
<input type="hidden" name="locationId" value="2721"/>
<input type="text" name="text" value="3.1415926535897732384"/>
<input type="button" name="Confirm" value="Submit this form" onclick="AskAndSubmit(this)"/>
</form>
Yes, the submit just reload the page here... Tested only in FF3.
[EDIT] Followed suggestion in the comments... :-)
???
This answer would be OK only when the click need NOT navigate the user to another page.

Categories