When I use the form element I get an error saying that it can't set the properties to undefined.
html:
<form name="regForm">
<table>
<tr> <!-- First Name -->
<td>
<input id="firstName" type="text" placeholder="First Name">
</td>
</tr>
<tr> <!-- Error Box -->
<td>
<p id="returnOutput"></p>
</td>
</tr>
<tr> <!-- Submit button -->
<td>
<button type="button" onclick="validateForm()">Sign Up</button>
</td>
</tr>
</table>
</form>
Javascript:
function validateForm() {
var firstName = regForm.firstName.value;
regForm.returnOutput.value = firstName;
}
This is for an assessment so it needs to be done this way otherwise I would be using document.getElementById().value
Welcome to StackOverflow!
regForm is undefined; you need to define it first.
Just a tip: use const for values that won't change, it's good practise!
function validateForm() {
// SELECT regForm by it's name. It doesn't have an ID, so we have to select it by name. However, if it did have an ID, we can use it. 0 is just to select the first element it finds since getElementsByName returns a node list
const regForm = document.getElementsByName("regForm")[0]
// Declare firstName as the firstname.value
const firstName = regForm.firstName.value;
// Finally, append it to body :)
document.getElementById("returnOutput").innerHTML = firstName;
}
Hope this helped :)
Related
I'm trying to update a variable in AMPscript in order to get a list of values that contain a keyword. This value is inserted in an input and after that I click on a search button to find the results. I tried adding some jQuery code but this has not worked. How can I get the value of the input into my AMPscript and refresh the table with the values?
This is my current code:
<div>
<label for="keyword">Please enter a keyword for search</label>
<input type="text" id="keyword" name="keyword">
<button id="searchBtn">Search</button>
</div>
<div id="content">
%%[
var #rows, #rowcount, #i, #code, #value, #keyword
set #rows = LookupRows("MyDataExtension","Active",1)
set #rowcount = RowCount(#rows)
IF #rowcount > 0 THEN]%%
<table>
<tr>
<th>Code</th>
<th>Value</th>
</tr>
%%[
FOR #i = 1 TO #rowcount DO
set #row = Row(#rows, #i)
set #code = Field(#row,"Code")
set #value = Field(#row,"Value")
]%%
<tr>
<td>%%=v(#code)=%%</td>
<td>%%=v(#value)=%%</td>
</tr>
%%[NEXT #i]%%
</table>
%%[ELSE]%%
<p>
No Account Records
</p>
%%[ENDIF]%%
</div>
My suggestion is to create a second page that will retrieve the data for you and return it in a form of a JSON.
Then, using jQuery or plain JavaScript, you send an Ajax request to that page with some parameters and on callback you build your HTML dynamically.
Here is an article that you might find interesting:
https://ampscript.xyz/how-tos/how-to-enhance-your-forms-with-ajax-and-ampscript/
If we have a table which contains name, surname and a button(Submit)
for example :
<html>
<body>
<table>
<tr>
<td>
<label>First name: </label>
</td>
<td>
<input type="text" id="name" name="firstname" required />
</td>
<td>
<label>Last name: </label>
</td>
<td>
<input type="text" id="lastname" name="lastname" required />
</td>
<td>
<button type="submit" onclick="funct()">Submit</button>
</td>
</tr>
</table>
<p id="mane1"> </p>
</body>
</html>
and when we click submit we want do display the text that we get from text boxes in a new paragraph:
Your name is : RandomName
Your surname is : RandomSurname
How can we do this?
I tried this :
function funct(){
var name=document.getElementById("name").value;
if (name!=""){
document.getElementById("name1").innerHTML="Your Name Is:"+ name;
}
}
The problem is that if I click "Submit" it doesn't show anything.
I tried to find something useful over the internet , but all the examples that I used didn't do anything.
I will appreciate any help :)
After changing the p id to "name1", the code you posted works fine. Are you sure the problem isn't somewhere else in your code?
I noticed that your button is a submit type. Is it in a form? If it is, then your browser might be submitting the form and reloading the page so fast you don't see the javascript actually working. You can change the button type to "button" to prevent the form from submitting.
Is the "name1" vs. "mane1" a typo? If that is a typo, and in the code you have it right, then try using .innerText or putting html tags in your .innerHtml string.
function funct(){
var name=document.getElementById("name").value;
if (name!=""){
// document.getElementById("name1").innerHTML="Your Name Is:"+ name;
document.getElementById("mane1").innerHTML="<p>Your Name Is:"+ name + "</p>";
}
}
EDIT: Further consideration
Is your script
function funct(){
var name=document.getElementById("name").value;
if (name!=""){
document.getElementById("mane1").innerHTML="<p>Your Name Is:"+ name + "</p>";
}
}
After your call to the script. Going from top to bottom on the page?
<button type="submit" onclick="funct()">Submit</button>
If not, then it may be an issue with the dom not knowing what funct() is yet. In other words, make sure your script is at the bottom, or activated by something higher on the page content than where you are trying to use it.
I need help with adding a controll that checks that atleast one on the textareas is filled so that people wouldnt save blank forms. so it should controll that at least on element is checked and filled, otherwise it should give an error and wouldnt save. If anyone would have an idea how to do so, I would greatly appreciate it. The code that Im working with is down below (actually have more textareas but they are the same only with another names).
<tr>
<td valign="top" style='width: 300px;'>Family members help</td>
<%
elemText = xml.getElementFromXPath("//nursing_care/family_help/tekst");
%>
<td valign="top"><input <%=(elemText==null?"checked=\"checked\"":"") %> value="0" onclick="javascript:showText(this);" name="//nursing_care/family_help" type="radio" checked="checked">Valimata
<input <%=(elemText!=null?"checked=\"checked\"":"") %> value="1" onclick="javascript:showText(this);" name="//nursing_care/family_help" type="radio">Määratud</td>
<td>
<textarea style='width: 350px' style="display:<%=(elemText==null?"none":"block") %>" id="//nursing_care/family_help/tekst" name="//nursing_care/family_help/tekst"><%=(elemText!=null?elemText.getText():"") %></textarea>
</td>
<td><input style="display:<%=(elemText==null?"none":"block") %>" type="text" class="txt_left" id="//nursing_care/family_help/date" name="//nursing_care/family_help/date" value="<%=xml.getText("//nursing_care/family_help/date")%>" maxlength="10" size="10"
onchange="gnlDateValid(this,event); if(event.returnValue != false);" onfocus="gnlGotFocus(getCurrentDate(),this); inputChanged(this);" onkeydown="gnlKeyDown('00.00.0000',this,event);" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><input type="submit" class="button_save button" value="Salvesta" />
<input type="button" class="button" value="Sulge" onclick="window.close()" /></td>
</tr>
</tfoot>
And here is the function that shows/hides the textareas (just in case)
function showText(obj){
var elements = document.getElementsByName(obj.name);
var element = getNode(obj.name + "/tekst");
if (elements[0].checked)
element.style.display="none";
else
element.style.display="block";
var element = getNode(obj.name + "/date");
if (elements[0].checked)
element.style.display="none";
else
element.style.display="block";
}
Something like this should work.
Extend the submit button like this.
<input type="submit" class="button_save button" value="Salvesta" onclick="return submitCheck()"/>
and implement this function in your javascript file.
function submitCheck(){
var form = document.forms[0];
var textareas = form.getElementsByTagName("textarea");
for(var textarea in textareas){
if(textarea.value !== ""){
return true;
}
}
return false;
}
BTW i would recommend you to use jQuery when working with the HTML DOM ;-)
I am trying to write a html form to submit a few variables to an external asp file that creates a chat window.
The example that has been provided for me to use you can see by this link, but this involves a two step process.
In the example provided, the customer fills out the fields, clicks on "Submit" and is then taken to a separate page to click on a dynamically generated javascript link to launch the chat window.
I want do to this on a single page instead, but am having trouble finding a way to pass variables from my HTML form correctly to the external script
<script language='JavaScript' src='https://na.ntrsupport.com/nv/inquiero/web/an/ann4.asp?login=41403&lang=us&button=connect&cat=&cob=&oper=&skin=&urloffline=&urlbusy=&sur=&surpre=&bgcolor=&txtcolor=&ref2=/o1https://na.ntrsupport.com/nv/Webintegration/Connectwise/entrypoint.asp?p=1;email%40address.com;Description;Customers+Name;Company+Name&ref=Customers+Name&clientid=Company+Name'> </script>
In the code above I've entered generic text into the fields like "Company Name" and "email#address.com" to get that example link.
I've tried doing this a number of ways but none have resulted the desired result, such as using javascript direct to url with variables from the form, and url in the action part of the html form.
I don't have any control over how the script at na.ntrsupport.com works or receives the request so I have to get this working from my end.
Any help is going to be appreciated, and let me know if I've missed anything of importance.
My code so far
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<script>
function launchChat()
{
var name = document.getElementById('name').value;
var company = document.getElementById('company').value;
var email = document.getElementById('email').value;
var description = document.getElementById('description').value;
var url = "https://na.ntrsupport.com/nv/inquiero/web/an/ann4.asp?login=41403&lang=us&button=connect&cat=&cob=&oper=&skin=&urloffline=&urlbusy=&sur=&surpre=&bgcolor=&txtcolor=&ref2=/o1https://na.ntrsupport.com/nv/Webintegration/Connectwise/entrypoint.asp?p=1;" + email + ";" + description + ";" + name + ";" + company + "&ref=" + name + "&clientid=" + company;
window.location(url);
return false;
}
</script>
<style>
div{
width:400px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px; /* Negative half the width*/
margin-top:-100px; /* Negative half the height */
}
</style>
</head>
<body>
<div>
<form onsubmit="return launchChat();">
<table>
<tr>
<td colspan=2>
Put Banner here
</td>
</tr>
<tr>
<td>
Name:
</td>
<td>
<input type="text" id=="name" name="name" required>
</td>
</tr>
<tr>
<td>
Company:
</td>
<td>
<input type="text" id="company" name="company" required>
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input type="email" id=name="email" name="email" required>
</td>
</tr>
<tr>
<td>
Description:
</td>
<td>
<input type="text" id="description" name="description" required>
</td>
</tr>
<tr>
<td colspan=2>
<input type="submit" id="submit" name="submit" value="Start Chatting"/>
</td>
</tr>
</table>
</form>
</div>
</html>
Alright, so you made it a bit too complicated there.
First thing: you need to use encodeURIComponent (this is the key!) on those variables you're concatting to the string because chances are some of them will have characters not allowed in the url.
Second: using GET method on the form will automatically build urls like that. For example:
<form action="a.html" method="GET">
<input name="var1" value="value1" />
<input name="var1" value="value1" />
</form>
will automatically build the link that looks like: a.html?var1=value1&var2=value2, which is a part of what you need and can make your life easier. I know you basically need to build two of those (the main url, which I'm not sure will remain hardcoded; and the ref2 part).
Another thing:
window.location(url);
should be:
window.location = url;
I'm trying to get the text from a text box.
I have 2 input text boxes that are not in a form, and I'm trying to retrieve the value and store it in a variable.
This code returns undefined in the alert box that pops up.
<script>
var userPass = document.getElementById('pass');
var userName = document.getElementById('fName');
function submit(){
alert(userPass.value);
}
</script>
When I run it with userName.value as a parameter in the alert function, it will work and display what ever you type in the box.
Here is the html:
<table id="login">
<tr>
<td><label>User Name</label></td>
</tr>
<tr>
<td colspan="2"><input class="textBox" id="fName" type="text" maxlength="30" required/></td>
</tr>
<tr>
<td id="pass"><label>Password</label></td>
<tr>
<td colspan="2"><input class="textBox" id="pass" type="text" maxlength="30" required/></td>
</tr>
<tr>
<td><input type="button" class="loginButtons" value="Login" onclick="submit();"/>   
<input type="button" class="loginButtons" value="Cancel"/></td>
</table>
You will notice you have no value attr in the input tags.
Also, although not shown, make sure the Javascript is run after the html is in place.
<script>
function submit(){
var userPass = document.getElementById('pass');
var userName = document.getElementById('user');
alert(user.value);
alert(pass.value);
}
</script>
<input type="text" id="user" />
<input type="text" id="pass" />
<button onclick="submit();" href="javascript:;">Submit</button>
// NOTE: Using "this.pass" and "this.name" will create a global variable even though it is inside the function, so be weary of your naming convention
function submit()
{
var userPass = document.getElementById("pass").value;
var userName = document.getElementById("user").value;
this.pass = userPass;
this.name = userName;
alert("whatever you want to display");
}
you have multiple elements with the same id. That is a big no-no. Make sure your inputs have unique ids.
<td id="pass"><label>Password</label></td>
<tr>
<td colspan="2"><input class="textBox" id="pass" type="text" maxlength="30" required/></td>
</tr>
see, both the td and the input share the id value pass.
Remove the id="pass" off the td element. Right now the js will get the td element instead of the input hence the value is undefined.
Javascript document.getElementById("<%=contrilid.ClientID%>").value; or using jquery
$("#<%= txt_iplength.ClientID %>").val();
This is the sample code for the email and javascript.
params = getParams();
subject = "ULM Query of: ";
subject += unescape(params["FormsEditField3"]);
content = "Email: ";
content += unescape(params["FormsMultiLine2"]);
content += " Query: ";
content += unescape(params["FormsMultiLine4"]);
var email = "ni#gmail.com";
document.write('SUBMIT QUERY');