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.
Related
I am new to cypress and have a scenario where i need to select 'text2' from below table which is under a view, 'text2' is the value from feature file.
<table>
<tr .............>
<td ..........>
<div ....>
<input class= ' ' ..... value='text1'>
</div>
</td>
</tr>
<tr .............>
<td ..........>
<div ....>
<input class= ' ' ..... value='text2'>
</div>
</td>
</tr>
</table>
i tried with
cy.get('table tr').find('td').contains('text2').click() its not working,
Any Suggestions would be of great help, Thanks.
Good question, this is actually a bit tricky.
If you follow this Cypress example Find the input[type='submit'] by value,
then your inputs must have the type='submit' attribute for contains() to work.
<div id="main">
<form>
<div>
<label>name</label>
<input name="name" />
</div>
<div>
<label>age</label>
<input name="age" />
</div>
<input type="submit" value="submit the form!" />
</form>
</div>
// yields input[type='submit'] element then clicks it
cy.get('form').contains('submit the form!').click()
However, type='submit' produces buttons on the web page.
If you want input boxes (type='text' which is the default if not specified), you cannot use .contains(). You can access the value of a with .invoke('val').
Sadly however, .invoke('val') does not pinpoint the exact element in the same way .contains() does. It simply gets the text value of the first input and returns the text, not the element (so you can't click it).
The best way I found is to construct a selection function inside a then()
cy.get('table tr td input')
.then($inputs => { // pass in all inputs
return Array.from($inputs) // convert to array
.find(input => input.value === 'text2') // use Array.find() to pick the element
})
.should('have.value', 'text2') // in case 'text2' does not exist
.click()
How about just select the element that contains the test:
cy.contains('text2').click();
When it loads, I can see the KEY just like this
Your Key: shf8tg382kds
However, Key won't appear in the input field.
Why? and How can I solve this?
JavaScript Part
<script>
window.onload = function(){
$(".chat#key").val($('#peer-id').text()).focus()
}
</script>
HTML part
<p>Your Key : <span id="peer-id"></span> </p>
<input class="chat" id="key" name="messages[body]" placeholder="Type your Key Here!" type="text" />
UPDATE
If I change it to this, It shows abc in the input field.
$(".chat#key").val('abc').focus()
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;
Code below contains certain tags in all four.
Image-1
here is the code :
<div style='background-color:YellowGreen;height:20px;width:100%;margin-top:15px;font-weight: bold;'>
Delegate(s) details: </div>
<div style="border:1px solid black;"><br/>
<div id="delegates">
<div id="0">
Name of the Delegate:
<input name='contact_person[]' type='text' size="50" maxlength="50" />
Designation:
<select name='delegate_type_name[]' class='delegate_type'>
<option value='select'>Select</option>
<option value='Main'>Main</option>
</select>
</div><br/>
</div>
<div>
<input type="button" name="more" value="Add More Delegates" id="add_more" />
<br />
<br />
</div>
</div>
In the above code on line 5 where <div id="0"> changes to value 1 in script that I mentioned in "add_more"
And the javascript for "add_more" is given below
jQuery('#add_more').click(function(){
var id = jQuery('#delegates > div:last').attr('id');
var temp = "<div id='"+(parseInt(id)+parseInt('1'))+"'> Name of the Delegate: <input type='text' size='50' maxlength='50' name='contact_person[]' /> Designation:";
temp += "<select name='delegate_type_name[]' class='delegate_type additional_delegate'><option value='select'>Select</option><option value='Additional'>Additional</option><option value='Spouse'>Spouse</option></select> <input type='button' name='rem' value='Remove' id='remove' /></div><br/>";
jQuery('#delegates').append(temp);
});
In the javascript code above I have added a remove button in the temp+ variable
<input type='button' name='rem' value='Remove' id='remove' />
Image-2 shows the remove button every time I click on "Add more Delegates" button.
In the image-2 I click on Add More Delegates button it shows the "remove" button on the right of drop down select list.
I want a jQuery function for remove button, so that when I click on remove it should remove <div id="1"> and also reset content before removing the div tag. Below image-3 is the output that I want when I click on remove button.
code that I tried was this from some reference is this
jQuery('#remove').click(function(){
var id = jQuery('#delegates > div:last').attr('id').remove();
});
but no luck.
Thanks.
You can't give an element id that is only a number, it must be #mydiv1, #mydiv2 or something similar, i.e. beginning with a letter not a number.
For starters your markup is a total mess. There is no way you should be using for layout purposes. Read up on tableless layouts and css.
The first thing you need to change is the id's of your div. An id cannot start with a numeric. I suggest naming the first div delegate0. Secondly, you are adding a remove button on every new row with the same id - all id's on a page should be unique so i suggest you change this to class="remove".
As for your question, it really boils down to needing to add a jQuery handler to the remove buttons using the .livedocs method.
This is as simple as:
jQuery('.remove').live('click',function(){
$(this).closest('div').remove();
});
Also, you need to keep a running counter of the id of the items added, and increment this every time a new row is added.
var nextDelegate = 1;
jQuery('#add_more').click(function(){
... your code here
nextDelegate++;
});
Also, I removed the superfluous <br/> after each div.
Live example: http://jsfiddle.net/cb4xQ/
I am having problem printing a particular variable from my cgi file. I receive this variable, called totalCost from my webpage and then try to print it, but nothing happens. All the other variables can be received successfully from the webpage and printed out on another webpage via my cgi file, except for this one..i've checked for case sensitivity but that didnt help
The code in html...
<tr> <td colspan=3 padding=2><b> Total = $ </b> <input type= "text" id="totalCost" disabled= true name= "totalCost" size ="5" maxlength="5" value= 0.00 /> <td> <tr>
the computeCost function
<script type= "text/javascript">
function computeCost(){
var apples= document.getElementById("appleQty").value;
var oranges=document.getElementById("orangeQty").value;
var bananas=document.getElementById("bananaQty").value;
var totCostTemp=0.69*apples + 0.59*oranges + 0.39*bananas;
document.getElementById("totalCost").value= totCostTemp;
}
</script>
In cgi file, which I write using Perl, I receive my variable in this manner:
my ($appleQty, $orangeQty, $bananaQty, $user, $cardType, $c) = (param("appleQty"), param("orangeQty"), param("bananaQty"), param("user"), param("cardType"), param("totalCost"));
then try to print out in this manner..
print header;
print start_html("Receipt"),
print h3("Fruit Store: Order Summary"),
table({-border => 2} ,caption("Your Receipt"),
Tr([th("Name:").td($user),th("Payment Method:").td($cardType),th("Fruit Type").td("Quantity"), th("Apple").td($appleQty), th("Oranges").td($orangeQty), th("Bananas").td($bananaQty), th("Total Cost:").td($c)]));
print end_html;
Please note...all variables except totalCost get printed correctly. totalCost is not printed at all in my resultant webpage...I think this has to do with the fact that I did some computation and perhaps did not store it properly in the id. But I dont know how to resolve that..
thank you for advising!
Disabled fields don't get posted. So you simply need to modify the field to make it readonly. Like :
<input type="text" id="totalCost" readonly="true" name="totalCost" size ="5" value="0.00" />
If you don't like the color of the readonly field, you can use a CSS to modify it like :
<style>
input[readonly=true] {
color:silver;
}
</style>
Or for better CSS compatibility :
<style>
.disabled {
color:silver;
}
</style>
<input type="text" id="totalCost" readonly="true" name="totalCost" size ="5" value="0.00" class="disabled" />
You may also use hidden fields, but you don't have to change your current code.
If the <input> element is never enabled, then it will not be sent to the server when the form is posted.
If you don't want the user to be able to update the field, then don't use an ordinary "text" <input>. Put a <span> there to hold the value, and update an enabled "hidden" <input> instead.
function computeCost(){
var apples= document.getElementById("appleQty").value;
var oranges=document.getElementById("orangeQty").value;
var bananas=document.getElementById("bananaQty").value;
var totCostTemp=0.69*apples + 0.59*oranges + 0.39*bananas;
document.getElementById("totalCost").value= totCostTemp;
document.getElementById('totalCostView').innerHTML = '$' + totCostTemp;
}
and the page would look like:
<td>
<span id='totalCostView'>$0.00</span>
<input type='hidden' id='totalCost' name='totalCost' value='0.00'>
</td>