In my page I have some styling, then a form, then some java-script code.
I have two issues:
First: when I click button 'submit', all my styling goes away, also the expected action (div to appear) does not happen.
Second: I have an output-text for displaying a small phrase saying subscription was successful or not, which reads a bean property called result. The problem is that this property never gets refreshed. The inputFields after I refresh the page they come up clean, this outputText no. How can I make it get without any text when user comes to the page for the second time?
Thank you so much!
Style:
#mainTableRightDiv1 {
display: none;
background-color:rgba(0, 0, 0, 0.5);
}
Body:
<button class="button" id="subscribe">Subscribe</button>
<div id="mainTableRightDiv1">
<table class="hidden" id="formTable">
<tr>
<td id="formTd">First Name:</td>
<td><h:inputText class="form" id="inputFirstName" value="#{visitor.firstName}"/></td>
</tr>
<tr>
<td id="formTd">Last Name:</td>
<td><h:inputText class="form" id="inputLastName" value="#{visitor.lastName}"/></td>
</tr>
<tr>
<td id="formTd">Email:</td>
<td><h:inputText class="form" id="inputEmail" value="#{visitor.email}"/></td>
</tr>
</table>
</div>
<p><h:commandButton class="button" id="submit" value="Submit" action="#{visitor.registerVisitor()}"/></p>
<p><h:outputText class="output" id="result" value="#{visitor.result}"/></p>
Javascript:
$("#subscribe").click(function (e) {
$("#mainTableRightDiv1").css('display', 'block');
});
Replace your jquery statement with the .on() event instead of .click(),also make sure that you have included jQuery.
As for your second question, you can set the result to no text when the document has been compiled with jQuery
$(document).ready(function(){
result = "";
$(document).on("click","#subscribe",function(){
$("#mainTableRightDiv1").css("display","block");
})
});
It is recommended to put all of your jquery code in the $(document).ready() function to ensure that everything executes.
Related
I would like to show the second text field incl. copy button as soon as i submit the the first text field. how i can hide the second text field and show after submit?
I tried as following:
HTML:
First Texfield:
<tr><td><input type="text" id="source">
<button type="submit" id="submit" id="formButton">Submit</button></td></tr>
Second Textfield:
<tr><td><input type="text" size="62" id="target" id="form1">
<button onClick="myFunct()" id="form1">Copy</button></td></tr>
JQuery:
<script>
$("#formButton").click(function(){
$("#form1").toggle();
});
</script>
Thank you so much for your support.
If you intend to submit data to a server normally you should have your inputs and buttons wrapped in a <form> tag, so I added one and set it up so that it sends to a live test server. There's also an iframe added as well to display the server's response. The jQuery is simple:
$('#main').on('submit', function() {...
When form#main "hears" a submit event (i.e. when the button[type=submit] is clicked...
$('.row2').removeClass('hide');
...Remove the class .hide form tr.row2 which removes the style display:none
BTW, ids must be unique. #form1 is duplicated and there's 2 ids on one button in OP code.
Demo
$("#main").on('submit', function() {
$(".row2").removeClass('hide');
});
.hide {
display: none
}
<form id='main' action='https://httpbin.org/post' method='post' target='view'>
<table>
<tr>
<td><input type="text" id="source" name='source'>
<button type="submit">Submit</button></td>
</tr>
<tr class='row2 hide'>
<td><input type="text" size="62" id="target" name='target'>
<button type='button'>Copy</button></td>
</tr>
</table>
</form>
<iframe name='view'></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The first problem is that you have duplicate IDs on the button (both submit and formButton). An element can only have one ID. I've gone with the latter in my example.
Second, you have duplicate form1 IDs, which is also invalid markup. Simply make use of classes instead.
Then it's just a matter of hiding these elements by default, and showing them on click of the button. I'd recommend .show() for this instead of .toggle().
This can be seen in the following:
$("#formButton").click(function() {
$(".form1").show();
});
.form1 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<input type="text" id="source">
<button type="submit" id="formButton">Submit</button>
</td>
</tr>
<tr>
<td>
<input type="text" size="62" id="target" class="form1">
<button onClick="myFunct()" class="form1">Copy</button>
</td>
</tr>
as title suggests, I am having issues running my script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#subbut").click(function(e){
e.preventDefault();
$.ajax(
{
url : 'http://jsonplaceholder.typicode.com/users?email=Sincere#april.biz',
method : 'GET'
})
.then(
function(data) {
document.getElementById("street").value = data[0].address.street;
});
});
});
</script>
And my form is here:
<form id="myForm"
action="<%=response.encodeURL(request.getContextPath()
+ "/upisKorisnika.html")%>"
method="POST">
<table id='userInput' class="display" border="0"
style="font-family: Arial; font-size: 18px;">
<tr>
<td><c:out value="E-mail: " /></td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<input type="submit" name="subbut" class="btn btn-default" id="subbut" value="Submit">
</td>
</tr>
</table>
<input type="hidden" id="street" name="street" />
</form>
My first question is why doesn't anything happen when I click submit, what am I doing wrong?
And I would also like to know how could I get value of text field "Email", so I could use something like this:
url : 'http://jsonplaceholder.typicode.com/users?email='+mail,
First, is confusing the use of a form that not send data to the server and a submit button without submit form behavior.
Second you need use a debug tool like chrome developer tool. It will give you the trace of your calls.
To debug, add to the promise.then the error callback with a simple alert or a console.log to view what is happen with your call.
And responding your question,your code seen be right.
I'm developing an extension that saves to storage, If the form has more than one button with the same id (not name so much, id is the identifier for chrome extensions), my check doesn't work.
<tr>
<td colspan="2">
<input type="Submit" value="Add" id="action" name="action" style="width: 100%" /></td>
</tr>
<tr>
<td colspan="2">
<input type="Submit" value="Edit" id="action" name="action" style="width: 100%" /></td>
</tr>
Won't trigger my js (below), but this will
<tr>
<td colspan="2">
<input type="Submit" value="Add" id="action" name="action" style="width: 100%" /></td>
</tr>
JS
function manageItem() {
if (action.value=='Add') {
...
}
}
My intent was to use it like
function manageItem() {
if (action.value=='Add') {
...
} else if (action.value='Edit') {
...
}
}
If I only have one button with the id action, this works. If I have more than one button, this doesn't work at all.
For instance, when a browser submits to server side script, only the clicked submit button has its value sent, so this situation would work with that (just as an example).
I've tried testing each row in its own form, but I still get conflict when two elements have the same ID. What can I do?
Edit: I thought I had included in my question that I do know that id's cannot repeat, but I didn't explicitly say that. I know that in well-formed html, IDs cannot repeat, but I don't know how I can achieve this.
You should use class="action" instead of id="action", ids can't repeat.
Also, a typo: replace if (action.value='Edit') { with if (action.value=='Edit') {
In your current html, you don't really need neither ids or classes (but name is still needed) - you can remove these attributes, nor
function manageItem() {
if (action.value=='Add') {
...
} else if (action.value='Edit') {
...
}
}
To distinguish between your buttons, you can just use the following:
document.getElementsByName("action")[0].onclick=function(){
//first button clicked
}
document.getElementsByName("action")[1].onclick=function(){
//second button clicked
}
I'm writing a javascript library and I need to make a javascript function which you can call to create a form (scheduler) on your webpage.
this is the html code of the form:
<form>
<table border="1" cellpadding="5">
<tr><td id="schedulename" colspan="10">Time Schedule</td></tr>
<tr>
<td width="50">hours</td>
<td></td>
<td width="50">minutes</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
<td>Sun</td>
</tr>
<tr>
<td width="50"><input type="text" id="hours" maxlength="2" size="1"></td>
<td width="2"> : </td>
<td width="50"><input type="text" id="minutes" maxlength="2" size="1"></td>
<td> <input type="checkbox" id="mon"></td>
<td> <input type="checkbox" id="tue"></td>
<td> <input type="checkbox" id="wed"></td>
<td> <input type="checkbox" id="thu"></td>
<td> <input type="checkbox" id="fri"></td>
<td> <input type="checkbox" id="sat"></td>
<td> <input type="checkbox" id="sun"></td>
</tr>
<tr>
<td colspan="10"> <input type="button" id="setbutton" value="Set schedule"></td>
</table>
</form>
my idea of the result is that a user only needs to create a div in his webpage, then in the javascript, call my function with the right parameters which in turn shows my predefined form. But I also need to add some functionality to the 'setbutton' it needs to write the data to an adres in my PLC (programmable logic controller)
what I want the function call to look like: showScheduler(id, adres);
id is the id of the division and adres is the adres in my programmable logic controller I need to write to.
What is the best way to write the form to my webpage from within a javascript function?
I hope u guys can understand but i'll gladly give you more explanation if needed.
You can do something like:
<div id="placeholder">
</div>
<script type="text/javascript">
function createForm(divId) {
var formHtml = "<form><table border='1' cellpadding='5'>...</table></form>";
document.getElementById(divId).innerHTML = formHtml;
}
</script>
And call for example createForm("placeholder") when you want.
It sounds like you are specifically wanting the user to ONLY have their html and a <script> tag that loads in your js file. You will need to require a specific id or custom css class to use as a selector. Then the html part for the user would simply look like:
<html>
...
<body>
...
<div id="customID"></div>
...
</body>
</html>
Then in your javascript file, you need to create your function to write in the content, and tie that function to an execution on window.load(). Something like:
$( //note, this causes execution when the dom is loaded, using jQuery's .ready()
function(){ showScheduler("customID"); }
);
function showScheduler(id)
{
var contents = '<form><table border="1" cellpadding="5">...</table></form>'; //the ... needs to have the rest of your html with no single quotes anywhere inside
$("#"+id).html(contents);
}
I'm not sure exactly what you're looking for regarding the adress part, but you could easily extend the showScheduler() function to include a second parameter for the adress value, and then stick that into the middle of the rest of the contents value. Something like:
function showScheduler(id, adress)
{
var contents = '<form><table border="1" cellpadding="5">...' + adress + '...</table></form>'; //the ... needs to have the rest of your html with no single quotes anywhere inside
$("#"+id).html(contents);
}
And further, if you prefer to have the user call the function from their page, you can skip the part about tying this to this to the dom's execution (i.e. remove the $( function(){ showScheduler("customID"); } ); part completely
I'm trying to make more than one <td> field visible or invisible on my screen based on user input and element class. I'm using jquery, html, and javascript.
Basically, I have an HTML table with different fields. I want these fields to have a class of either "Visible", "Visible and Required", or "Invisible". When the user selects an option, it changes the class of that element by removing the previous one and adding the new one. The onload default of these fields should be invisible.
HTML:
<body onload="ShowTheScreen()">
<table border="1">
<tr>
<td class="ReasonCode" align="center">
<span class="FieldLabel">Reason Code</span>
</td>
<td class="CostCenter" align="center">
<span class="FieldLabel">Cost Center</span>
</td>
</tr>
<tr>
<td class="ReasonCode" align="center">
<input type="text" id="ReasonCode" name="ReasonCode" value="1243">
</td>
<td class="CostCenter" align="center">
<input type="text" id="CostCenter" name="CostCenter" value="00123">
</td>
</tr>
</table>
<input type="button" value="MakeVis" onclick="PopulateTable()">
</body>
Javascript:
function ShowTheScreen(){
ToggleFieldVisibility(".ReasonCode", 3);
ToggleFieldVisibility(".CostCenter", 3);
DisplayFields();
}
function PopulateTable(){
ToggleFieldVisibility(".ReasonCode", 2);
ToggleFieldVisibility(".CostCenter", 1);
DisplayFields();
}
function ToggleFieldVisibility(element, x){
switch(x){
case 1:
$(element).removeClass("Invisible Required").addClass("Visible");
break;
case 2:
$(element).removeClass("Invisible").addClass("Visible Required");
break;
case 3:
$(element).removeClass("Visible Required").addClass("Invisible");
break;
default:
$(element).removeClass("Visible Required").addClass("Invisible");
break;
}
DisplayFields();
}
function DisplayFields(){
$(".Invisible").css({"visibility":"hidden"});
$(".Visible").css({"visibility":"visible"});
}
The problem I'm having is this: When I open the page, the fields get the "Invisible" class added to them as they should be and they become hidden. But when I try and remove the invisible class later and add the visible class, the invisible class is never removed and the visible class is never added: the elements simply retain the classes they had at first, and therefore stay hidden.
I saw previous threads relating to problems with jquery add/removeClass, but none that seemed to help me out. Let me know if you need more info.
UPDATE 1: Thanks for all the replies, everyone! Unfortunately, and I thought this would happen, the code I posted here is a far simplified version of the code I actually have and most of the answers I've received seem to be related to the syntax posted--like the issue with the quotes. I've updated the code to better reflect what I'm really doing. Hopefully this will narrow down what the issue is.
UPDATE 2: I know what I was doing wrong. In my code I have shown here I'm calling ToggleFieldVisibility(".ReasonCode", 2), which works fine. But in my actual code, I was retrieving the number 2 from a SQL call using an outside application, and it was returning it as a string. The "2" would get compared to 2 in the switch (or "1" to 1 and "3" to 3) and always go to default, so that's why those fields always came up invisible. Hah!
I think the problem lies in your inline onClick handlers. As you currently have them, you are using quotation marks as both attribute delimiters and to wrap your strings; this is going to cause your attribute to be truncated as ToggleFieldVisibility(" and your function will not run.
Try:
<input type="button" value="MakeVis" onclick="ToggleFieldVisibility('.ReasonCode', 1)">
<input type="button" value="MakeVisReq" onclick="ToggleFieldVisibility('.ReasonCode', 2)">
<input type="button" value="MakeInVis" onclick="ToggleFieldVisibility('.ReasonCode', 3)">
If you need to use "s for some reason, you can always escape them with a \: (\".ReasonCode\"...
A quick guess, in calling the DisplayFields() function at the end, it adds css to the element in the form of an inline style tag. Try running a .removeAttr("style") right after doing the removeClass()
The code:
jquery:
function ToggleFieldVisibility(element, x){
//alert("Hello");
switch(x){
case 1:
$(element).removeClass("Invisible Required").removeAttr("style").addClass("Visible");
break;
case 2:
$(element).removeClass("Invisible").removeAttr("style").addClass("Visible Required");
break;
case 3:
$(element).removeClass("Visible Required").removeAttr("style").addClass("Invisible");
break;
default:
$(element).removeClass("Visible Required").removeAttr("style").addClass("Invisible");
break;
}
DisplayFields();
}
function DisplayFields(){
$(".Invisible").css({"visibility":"hidden"});
$(".Visible").css({"visibility":"visible"});
}
html:
<body onload="ToggleFieldVisibility('.ReasonCode .CostCenter', 3)">
<table border="1">
<tr>
<td class="ReasonCode" align="center">
<span class="FieldLabel">Reason Code</span>
</td>
<td class="CostCenter" align="center">
<span class="FieldLabel">Cost Center</span>
</td>
</tr>
<tr>
<td class="ReasonCode" align="center">
<input type="text" id="ReasonCode" name="ReasonCode" value="1243">
</td>
<td class="CostCenter" align="center">
<input type="text" id="CostCenter" name="CostCenter" value="00123">
</td>
</tr>
</table>
<input type="button" value="MakeVis" onclick="ToggleFieldVisibility('.ReasonCode', 1)" />
<input type="button" value="MakeVisReq" onclick="ToggleFieldVisibility('.ReasonCode', 2)" />
<input type="button" value="MakeInVis" onclick="ToggleFieldVisibility('.ReasonCode', 3)" />
</body>