I want the visitors to be able to open the search form in a new tab when they selckt the checkbox.
And I have trouble getting TARGET = "_ blank" in the select menu to work.
Thanks in advance!
<html>
<head>
<title></title>
<script language="JavaScript">
function dosearch() {
var sf=document.F;
var submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchit.value);
window.open(submitto,'bottom');
return false;
}
</script>
</head>
<body onLoad="document.F.searchit.focus();">
<table width="100%" border="0"><tr align="left" valign="top"><td width="200">
<form name="guideform">
In:
<select name="guidelinks" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value + document.F.searchit.value">
<option value="downloads.html?downloads=selected&searchit=">Downloads</option>
</select>
</form></td>
<td><form name="F" onSubmit="return dosearch();">
Search:
<select name="sengines">
<option value="http://download.cnet.com/s/" >Download.com</option>
<option value="http://filehippo.com/search?q=" TARGET="_blank">Filehippo</option>
</select>
For:
<input name="searchit" value="" type="text" size="45">
<input type="submit" name="SearchSubmit" value="Search">
<input type="checkbox" name="Newtab" target="_blank">New tab
</form></td>
<td width="1"></td></tr></table>
</body>
</html>
Try:
<option>
Filehippo
</option>
Related
I have looked at many other topics on here that are similar to my problem but none of the answers work for me.
I am trying to call a javascript function when a button is clicked but it does nothing.
I hvae tried changing the call to onclick="javascript:ClearFields();" and onclick="ClearFields()" and it doesn't work either.
I have to use a button (not submit) calling javascript
My jsp code is:
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<!-- if the user is logged in then we need to render one version of the page
consequently if the user is logged out we need to render a
different version of the page -->
<script type="text/javascript">
function ClearFields() {
document.getElementById("num1").value = "";
document.getElementById("num2").value = "";
document.getElementById("operator").value = "+";
}
</script>
<c:choose>
<c:when test="${empty user}">
<p>
${msg} <br/>
Would you like to log in? <br/>
Sign in or register <br/>
</p>
</c:when>
<c:otherwise>
<p>
Welcome ${user.email}
<p/>
<p><h1>Calculator</h1></p>
<!-- form of basic input types -->
<form action="/" method="post">
<table border="0">
<tr><td>
Number 1: <input type="text" name="num1" value="${ans}"/><br/>
</td><td>
Number 2: <input type="text" name="num2" /><br/>
</td></tr>
<tr><td colspan=2 align=center>
<select name="operator">
<option value="+"> + </option>
<option value="-"> - </option>
<option value="*"> * </option>
<option value="/"> / </option>
</select>
</td></tr>
<tr><td align=center>
<!-- Button to submit the form to the servlet when clicked -->
<input type="submit" value="Calculate"/><br/>
</td>
<td align=center>
<input type="button" onclick="ClearFields();" value="Clear"/><br/>
<!-- <input type="button" onclick="ClearFields();" value="Clear"/><br/> -->
</td></tr>
<tr><td colspan=2>
<h1> ${msg}</h1>
</td></tr>
</table>
</form>
<p>
You can signout here
</p>
</c:otherwise>
</c:choose>
</body>
</html>
The generated html is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<!-- if the user is logged in then we need to render one version of the page
consequently if the user is logged out we need to render a
different version of the page -->
<script type="text/javascript">
function ClearFields() {
document.getElementById("num1").value = "";
document.getElementById("num2").value = "";
document.getElementById("operator").value = "+";
}
</script>
<p>
Welcome test#example.com
<p/>
<p><h1>Calculator</h1></p>
<!-- form of basic input types -->
<form action="/" method="post">
<table border="0">
<tr><td>
Number 1: <input type="text" name="num1" value=""/><br/>
</td><td>
Number 2: <input type="text" name="num2" /><br/>
</td></tr>
<tr><td colspan=2 align=center>
<select name="operator">
<option value="+"> + </option>
<option value="-"> - </option>
<option value="*"> * </option>
<option value="/"> / </option>
</select>
</td></tr>
<tr><td align=center>
<!-- Button to submit the form to the servlet when clicked -->
<input type="submit" value="Calculate"/><br/>
</td>
<td align=center>
<input type="button" onclick="ClearFields();" value="Clear"/><br/>
</td></tr>
<tr><td colspan=2>
<h1> Welcome to the Calculator</h1>
</td></tr>
</table>
</form>
<p>
You can signout here
</p>
</body>
</html>
Any ideas where I am going wrong?
Could it just be that the page is no resubmitting? It seems to be.
Your JavaScript:
document.getElementById("num1").value = "";
Your HTML:
<input type="text" name="num1" value=""/>
getElementById gets an element by its id, and your element doesn't have any id. You need to add an id attribute.
I am building a data aqusition system using PhoneGap. .I am trying to store my form data temporary on local storage using JSON,Data should be visible after I close and reopen the application (after pressing Get Data button),But after I close it only the lastly entered record is visible
This is my code
<!DOCTYPE html>
<html>
<head>
<title>Household Profile DB storage</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no,
initial-scale=1, maximum-scale=1,
minimum-scale=1,width=device-width" />
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="css/table.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" charset="utf-8">
function onDeviceReady() {
persistData(homeId,owner,gramaND,contactNo,address,race);
}
function saveLocal(form){
if (window.localStorage) {
var fhomeId = form.homeId.value,
fowner = form.owner.value,
fgramaND = form.gramaND.value,
fcontactNo= form.contactNo.value,
faddress = form.address.value,
frace = form.race.value;
alert("hi");
var highscores = [{"homeId": fhomeId,
"owner":fowner,
"gramaND":fgramaND,
"contactNo":fcontactNo,
"address":faddress,
"race":frace}];
localStorage.setItem("highscores",JSON.stringify(highscores));
alert("The data has been stored successfully.");
} else {
alert("Your Browser does not support LocalStorage.");
}
}
function readLocal(){
if (window.localStorage) {
var scores =[];
//Get the highscores object
scores = localStorage.getItem("highscores");
scores = JSON.parse(scores);
for (i=0;i<scores.length;i++){
var text = "homeId :"+scores[i].homeId +"<br>"+
"owner:"+ scores[i].owner+"<br>"+
"address"+scores[i].address +"<br>"+
"gramaND"+scores[i].gramaND +"<br>"+
"contactNo"+scores[i].contactNo+"<br>" +
'<Button value="DELETE" onclick="'+scores.splice(i, 0)+'><>/Button>';
var tbodyx = document.getElementsByTagName("tbody");
var tr=document.createElement("TR");
var td=document.createElement("TD");
td.innerHTML = text;
tr.appendChild(td);
tbody.appendChild(tr);
}
}
}
</script>
</head>
<body>
<div data-role="page" id="page1">
<!--/header-->
<div data-role="header" data-position="inline" data-theme="b">
Back
<h1>Household Profile</h1>
Menu
</div>
<!--/header-->
<div id="wrapper">
<form id="userInput" action ="" method="GET">
<div data-role="content">
<div data-role="fieldcontain">
<label > Home ID </label>
<input class="inputClass" id="homeId" placeholder="H0001" value="" data-mini="true" type="text">
</div>
<div data-role="fieldcontain">
<label > Owner </label>
<input class="inputClass" id="owner" placeholder="Aberathne" value="" type="text">
</div>
<div data-role="fieldcontain">
<label class="select">GramaNiladhari Division</label>
<select class="inputClass" id="gramaND">
<option value="GramaNiladhari Division 1">GramaNiladhari Division 1</option>
<option value="GramaNiladhari Division 2">GramaNiladhari Division 2</option>
<option value="GramaNiladhari Division 3">GramaNiladhari Division 3</option>
<option value="GramaNiladhari Division 4">GramaNiladhari Division 4</option>
</select>
</div>
<div data-role="fieldcontain">
<label > Contact No </label>
<input class="inputClass" id="contactNo" placeholder="071-9545-073" value="" type="number">
</div>
<div data-role="fieldcontain">
<label >Address:</label>
<textarea cols="40" rows="8" class="inputClass" id="address"></textarea>
</div>
<div class="ui-block-a"><button type="submit" data-theme="d">Location in a Map</button></div>
<div data-role="fieldcontain">
<label >Race</label>
<select class="inputClass" id="race">
<option value=" Sinhalese"> Sinhalese</option>
<option value=" Sri Lanka Tamils"> Sri Lanka Tamils</option>
<option value=" Moors"> Moors</option>
<option value=" Indian Tamils "> Indian Tamils </option>
<option value=" Malays "> Malays </option>
<option value=" Burghers "> Burghers </option>
</select>
</div>
<input class="buttonClass" type="button" value="Insert Data" onclick="saveLocal(this.form);">
</div>
</form>
</div>
<input class="buttonClass" type="button" value="get Data" onclick="readLocal();">
<!-- <p id="dhomeId"></p>
<p id="downer"></p>
<p id="dgramaND"></p>
<p id="dcontactNo"></p>
<p id="daddress"></p>
<p id="drace"></p>-->
<table border="1">
<tbody id="tbody">
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Also I need to expand my code to edit and delete record from local storage.
Of course it should only show the last entered JSON. You're not appending the scores rather you're replacing it. When you are executing the command
localStorage.setItem("highscores",JSON.stringify(highscores));
you just replaced previous highscores value on the localStorage. I can't see any append mechanism in your code. What you need to do is retrieve the previous JSON data, add the new highscores with previous data and then save it again.
I have this javascript to see if the drop-down is selected. If not an error message is displayed. The problem is that the code works in IE9 and 8, but not in Chrome.
The simple solution to this is to add the "required" attribute to the tag, but I want to know the reason that code isn't working.
<form name="form1" action="insert.php" method="post" onsubmit="return validateForm()">
<table name="table1">
<tr>
<td>
<select name="fruits">
<option selected disabled>Please Select</option>
<option value="banana>banana</option>
<option value="apple>apple</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Submit"/>
</form>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["form1"]["fruits"].value;
if (x==null || x=="")
{
alert("Please Select Fruit");
return false;
}
}
</script>
please review this code,required is the html5 attribute and by default check for empty values
<form name="form1" action="insert.php" method="post" onSubmit="return validateForm()">
<table name="table1">
<tr>
<td>
<select name="fruits">
<option value=" " disabled>Please Select</option>
<option value="banana">banana</option>
<option value="apple">apple</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
<script>
function validateForm() {
var x = document.forms["form1"]["fruits"].value;
if (x == null || x == " ") {
alert("Please Select Fruit");
return false;
}
}
</script>
Demo here: http://jsfiddle.net/2zgGM/
This form is for a visitor sign in, which you can select the number of visitors with you from 1 - 9.
When selecting "1" and hitting submit I keep getting undefined index for "visitorname1".
PHP Form
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Visitor Sign In</title>
<link rel="stylesheet" href="css.css" type="text/css" media="screen" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript">
//when the webpage has loaded do this
$(document).ready(function() {
//if the value within the dropdown box has changed then run this code
$('#noguests').change(function(){
//get the number of fields required from the dropdown box
var num = $('#noguests').val();
var i = 0; //integer variable for 'for' loop
var html = ''; //string variable for html code for fields
//loop through to add the number of fields specified
for (i=1;i<=num;i++) {
//concatinate number of fields to a variable
html += 'Visitor ' + i + ': <input type="text" name="visitorname' + i + '" id="visitorname' + i + '"/><br/>';
}
//insert this html code into the div with id catList
$('#guestList').html(html);
});
});
</script>
</head>
<body>
<p align="center"><img src="images/logo.jpg" width="300"></p>
<h1 align="center">Landmark Group of Builders :: Visitor Sign In</h1>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><span class="large">Please sign-in below:</span></td>
</tr>
<form id="form1" name="form1" method="post" action="submit_guest.php">
<tr>
<td bgcolor="#EAEAEA" align="right"><b>Visiting</b></td>
<td bgcolor="#EAEAEA"><input name="visiting" type="text" required id="visiting"></td>
</tr>
<tr>
<td bgcolor="#EAEAEA" align="right"><b>No. of Guests</b></td>
<td bgcolor="#EAEAEA">
<select id="noguests" name="noguests">
<option value="0">- SELECT -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td></tr>
<td id="guestList">
</td></tr>
</tr>
<tr>
<td colspan="2" align="right">
<input type="text" name="stat" size="40" value="1" readonly class="hidden"><br><input type="submit" value="Sign In" class="css3button"></td>
</tr>
</form>
</table>
</body>
</html>
UPDATE.php
<?php
$intime = date('Y-m-d H:i:s');
$visitorname1 = $_POST['visitorname1'];
$visting = $_POST['visiting'];
$stat = $_POST['stat'];
$noguests = $_POST['noguests'];
$sql = new mysqli('localhost','x','x1!','x1');
$query = $sql->prepare("INSERT INTO `visitors` (visitorname1, visiting, intime, stat, noguests) VALUES (?,?,?,?,?);");
$query->bind_param('sssii',$_POST['visitorname1'],$_POST['visiting'],$_POST['intime'],$_POST['stat'],$_POST['noguests']);
/* close our connection */
$query ->execute();
if ( $query ) {
echo "<p align='center' class='confirmation'><img src='images/logo.jpg' width='300px'><BR><BR><img src='images/accepted.png'> Thank You! You have been signed in!</p>";
} else {
echo "Your request failed. Please try again.";
}
$sql->close();
?>
I am not sure why I keep getting the undefined as I verified when I add a text box by selecting "1", the id and name of the textbox is "visitorname1".
Any help would be greatly appreciated.
Remove var i = 0; and:
change your:
for (i=1;i<=num;i++) {
to
for (var i = 0;i<=num;i++) {
Because your dynamic inputs have no value attribute.
In the javascript you have the NAME set to name="visitorname" while in the PHP you have $_POST['visitorname1'];
SOLUTION: change the PHP to $_POST['visitorname'];
It's because of using Form tag in a wrong place!
correct your html code like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Visitor Sign In</title>
<link rel="stylesheet" href="css.css" type="text/css" media="screen" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript">
//when the webpage has loaded do this
$(document).ready(function() {
//if the value within the dropdown box has changed then run this code
$('#noguests').change(function(){
//get the number of fields required from the dropdown box
var num = $('#noguests').val();
var i = 0; //integer variable for 'for' loop
var html = ''; //string variable for html code for fields
//loop through to add the number of fields specified
for (i=1;i<=num;i++) {
//concatinate number of fields to a variable
html += 'Visitor ' + i + ': <input type="text" name="visitorname' + i + '" id="visitorname' + i + '"/><br/>';
}
//insert this html code into the div with id catList
$('#guestList').html(html);
});
});
</script>
</head>
<body>
<p align="center"><img src="images/logo.jpg" width="300"></p>
<h1 align="center">Landmark Group of Builders :: Visitor Sign In</h1>
<form id="form1" name="form1" method="post" action="submit_guest.php">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><span class="large">Please sign-in below:</span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA" align="right"><b>Visiting</b></td>
<td bgcolor="#EAEAEA"><input name="visiting" type="text" required id="visiting"></td>
</tr>
<tr>
<td bgcolor="#EAEAEA" align="right"><b>No. of Guests</b></td>
<td bgcolor="#EAEAEA">
<select id="noguests" name="noguests">
<option value="0">- SELECT -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td></tr>
<td id="guestList">
</td></tr>
</tr>
<tr>
<td colspan="2" align="right">
<input type="text" name="stat" size="40" value="1" readonly class="hidden"><br><input type="submit" value="Sign In" class="css3button"></td>
</tr>
</table>
</form>
</body>
</html>
I have the following code that when i change the drop down it doesnt matter which i choose it always puts the first part as the selected....
<script type="text/javascript">
function changeValue(){
var option=document.getElementById('block').value;
if(option=="1"){
document.getElementById('a').value="18005551212";
document.getElementById('b').value="PW";
}
else if(option=="2"){
document.getElementById('a').value="5551212";
document.getElementById('b').value="Collector";
}
if(option=="3"){
document.getElementById('a').value="3";
document.getElementById('b').value="3";
}
else if(option=="4"){
document.getElementById('a').value="4";
document.getElementById('b').value="4";
}
}
</script>
<form method="post">
<table> <tr><b>Add new data using form below</b></tr>
<tr><td> Keyword: </td><td> <input type="text" name="keyword" id="keyword"><br></td></tr>
<tr><td> Block?: </td><td><select name="block" id="block" onchange="changeValue();">
<option id="block1" value="1">Block 1</option>
<option id="block2" value="2">Block 2</option>
<option id="block3" value="3">Block 3 </option>
<option id="block4" value="4">Block 4</option>
<option id="block5" value="5">Block 5</option>
</select><br></td></tr>
<tr><td> Phone #:</td><td> <input type="text" name="phone" id="a"><br></td></tr>
<tr><td> Reason: </td><td> <input type="text" name="reason" id="b"><br></td></tr>
<tr><td> </td><td align="left"> <input type="submit" name="submit" value="Submit Data"></td></tr>
</table>
</form>
So when i select option 2 it should show collector and phone #...
You're missing a <td colspan="2"> in your first row, but regardless, your code works fine. Test here.
Go on jsfiddle.net and paste your code in. The code you provided works.