Here I have a some HTML code and I need to 1st. load url source code then type xpath and as a result get a some text from that URL based on xPath... How to do that... with jquery, ajax ... ???
http://jsfiddle.net/cHtWq/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<label>Enter URL address here:
<input name="textfield" type="text" value="http://www." />
</label>
<label>
<input type="submit" name="Submit" value="Submit" />
<br />
<br />
Enter xpath location of element:
<input type="text" name="textfield2" />
<input type="submit" name="Submit2" value="Submit" />
<br />
<br />
Selected element is: </label>
<p> </p>
</body>
</html>
You cannot do this in JavaScript because of the Same Origin Policy you will need some back end scripting to do this.
Related
Trying to copy one value from <input> field value to another using jQuery.
This works in JSFiddle But does not work when I try it on my local server.
what am I doing wrong?
https://jsfiddle.net/1emrxsLw/
JS:
$('#do').click(function() {
$('#three').val($('#one').val());
});
$('#four').keyup(function() {
$('#six').val($('#four').val());
});
$('#seven').blur(function() {
$('#nine').val($('#seven').val());
});
Complete HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<title>Untitled 1</title>
</head>
<body>
<h1>Button Click</h1>
<form id="form1">
<input id='one' type='text' />
<input id='two' type='text' />
</form>
<form id="form2">
<input id='three' type='text' />
</form>
<input type='button' id="do" value="Copy" />
<h1>Insta-Copy(TM)</h1>
<form id="form1">
<input id='four' type='text' />
<input id='five' type='text' />
</form>
<form id="form2">
<input id='six' type='text' />
</form>
<h1>On Blur</h1>
<form id="form1">
<input id='seven' type='text' />
<input id='eight' type='text' />
</form>
<form id="form2">
<input id='nine' type='text' />
</form>
</body>
<script type="text/javascript">
$('#do').click(function() {
$('#pDate1').val($('#fdatea').val());
});
$('#four').keyup(function() {
$('#six').val($('#four').val());
});
$('#seven').blur(function() {
$('#nine').val($('#seven').val());
});
</script>
</html>
First, id attributes in HTML page suppose to be unique to that page, you can't have multiple id values within the page, and you do have. for example:
<form id="form1">
<input id='four' type='text' />
<input id='five' type='text' />
</form>
and:
<form id="form1">
<input id='seven' type='text' />
<input id='eight' type='text' />
</form>
The forms have identical id values, and that's a bad practice.
Second, you posted to javascript files, which one are you actually using?
I tested for you the first js script:
$('#do').click(function() {
$('#three').val($('#one').val());
});
$('#four').keyup(function() {
$('#six').val($('#four').val());
});
$('#seven').blur(function() {
$('#nine').val($('#seven').val());
});
That works fine.
However, the second js file that you posted at the bottom of the HTML page won't do the job because it refers to id values which don't exist, like: #pDate1 and #fdatea
I have a login form inside an iframe. Here is the code for the main page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<script language="javascript">
function SubmitForm() {
document.getElementById('loginframe').contentWindow.document.getElementById('login').submit();
}
</script>
<title>Login to Vote</title>
</head>
<body>
<iframe id="loginframe" src="sasloginhandler.html"></iframe>
<input onclick="SubmitForm()" value="Submit form" type="button">
</body>
</html>
And here is the code for the "sasloginhandler.html" page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<title>Login to Vote</title>
</head>
<body>
<form action="https://moodle.standrews-de.org/login/index.php" method="post"
id="login">
<div class="loginform">
<div class="form-input"> <input name="username" placeholder="Username"
id="username"
size="15"
type="text">
</div>
<div class="form-input"> <input name="password" placeholder="Password"
id="password"
size="15"
value=""
type="password">
<input id="loginbtn" value="Login" type="submit"> </div>
</div>
<div class="forgetpass"><a href="forgot_password.php">Forgotten your
username or password?</a></div>
</form>
</body>
</html>
The problem is, neither the submit button inside the iframe nor the javascript submit button outside the iframe does anything. I have tested the iframe code on its own and it works fine, so it seems to be some part of the iframe that is causing the issue. However, I don't know why this would be.
Thank you!
The id of the form in the iframe is login but you try to get it with loginform
document.getElementById('loginframe').contentWindow.document.getElementById('login').submit();
I have a form in which I am disabling all the input fields that is not hidden on jQuery(document).ready(function())
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core" lang="en" xml:lang="en" style="padding-bottom: 8px;">
<script>
jQuery(document).ready(function()
{
jQuery('div#formBuilderPreviewEnrollmentData input[type!="hidden"]').prop('disabled', true);
});
</script>
<h:form id="previewMarketingProgramForm">
<div class="modal-content">
<br /> <br /> <br />
<div>
<h4>Enrollment Form</h4>
</div>
<table cellpadding="0" cellspacing="0" border="1" width="100%" class="results-table">
<tr>
<td>
<div id="formBuilderPreviewEnrollmentData">
<h:outputText value="#{previewMarketingProgramBean.enrollmentFormBean.enrollmentFormContent}" escape="false" />
</div>
</td>
</tr>
</table>
<br /> <br /> <br />
</div>
</h:form>
</div>
Here is the Javascript error:
Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.
Please tell me what could be causing this error. I am using jQuery-1.7.2-min.js
Here is the HTML generated source for this form for your reference:
<!DOCTYPE html>
<html class="ltr" dir="ltr" lang="en-US"> <head> <title>View Article - Liferay</title>
<script src="http://xx:8001/vcc-theme/js/jquery-1.7.2.min.js"></script>
<script src="http://xx:8001/vcc-theme/js/javascript.js"></script>
<script src="http://xx:8001/vcc-theme/js/jquery.tablesorter.min.js"></script>
<script src="http://xx:8001/vcc-theme/js/jquery.tablesorter.pager.js"></script>
<script src="http://xx:8001/vcc-theme/js/jquery.autocomplete.js"></script>
<script src="http://xx:8001/vcc-theme/js/jquery.simplemodal.1.4.2.min.js"></script>
<script src="http://xx:8001/vcc-theme/js/jquery.scrollTo.js"></script>
<script src="http://xx:8001/vcc-theme/js/ui.datepicker.js"></script>
<script>
/*<![CDATA[*/jQuery(document).ready(function()
{
jQuery('div#formBuilderPreviewEnrollmentData input[type!="hidden"]').prop("disabled",true)});
/*]]>*/
</script>
<form id="_jpfcpncuivr_A0169_j_id1:previewMarketingProgramForm" name="_jpfcpncuivr_A0169_j_id1:previewMarketingProgramForm" method="post"
action="http://xxx/yyy.do">
<div class="modal-content">
<br /> <br /> <br />
<div> <h4>Enrollment Form</h4> </div>
<table cellpadding="0" cellspacing="0" border="1" width="100%" class="results-table">
<tr>
<td>
<div id="formBuilderPreviewEnrollmentData">
<p> NAME: <input class="required" name="NAME" type="text" /></p> <p> </p>
<p> AGE: <input name="AGE" type="text" /></p> <p> </p>
<p> ADDRESS:<textarea name="ADDRESS"></textarea></p>
</div>
</td>
</tr>
</table>
<br /> <br /> <br />
</div>
</form>
</html>
I am getting this JS error in IE 7 (works fine in Firefox)
try this
<script>
jQuery(document).ready(function()
{
jQuery('div#formBuilderPreviewEnrollmentData input[type!="hidden"]').attr("disabled", true)
});
</script>
Just to make sure, you want to disable the inputs that are not of type="hidden" or you want to disable the inputs thats are not visible on screen (css style display:none). There's a big difference between the two and the jquery selector would be different to.
I have a form where a user selects a file, and then should be able to choose how many parameters the report they are uploading has
I want to have a drop down that has the numbers 0 -5 and when a user selects a number that many boxes with parameter types are shown, like a drops down with "date", "name", "part#" etc... in a select menu, is made for each number the user selects
I looked through the other solutions on S.O. and they make sense but I just can't seem to get them to work,
here is what I have so far just to test if one box will appear:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<body>
<ui:composition template="./templates/template.xhtml">
<ui:define name="content">
<c:choose>
<c:when test="#{controls.designAuth}">
Welcome Report Designer!<br /><br />
<div id="fileUpload">
<form name="myForm" action="../UploadServlet" enctype="multipart/form-data" onsubmit="return validate_form(this);" method="POST">
<b>Make sure your filename is meaningful (eg. WasteByMachineReport.jrxml)</b><br /><br />
Please specify a file:<input type="file" name="file" size="40"/><br />
Number of parameters: <select name='numSelect' onchange="draw_param_dropdowns();">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select><br />
<select class="parametersHide" id="select1"><option></option></select>
<script type="text/javascript" language="Javascript">
function draw_param_dropdowns(){
var sel = document.getElementById("select1");
sel.style = "visibility:visible";
}
</script>
<input type="submit" value="Upload"/>
</form>
</div>
</c:when>
<c:otherwise>
Not Authorized
</c:otherwise>
</c:choose>
</ui:define>
</ui:composition>
</body>
</html>
"view Source" result:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<link href="./../resources/dtree/dtree.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./../resources/dtree/dtree.js"></script>
<title>Reports</title></head><body>
<div id="top" class="top">
<h1>Wingfoot Reports v0.3
<div style="float:right;margin-right: 20px;">
<form id="j_idt8" name="j_idt8" method="post" action="/WebApplication8/faces/designer.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt8" value="j_idt8" />
<span style=" font-size: 20px; font-weight: normal;">SCOTT </span><input type="submit" name="j_idt8:j_idt10" value="Logout" style=" font-size: 20px;" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-4683216470766096399:-9055922898460672452" autocomplete="off" />
</form>
</div>
</h1>
</div>
<div>
<div id="left">
<form id="j_idt14" name="j_idt14" method="post" action="/WebApplication8/faces/designer.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt14" value="j_idt14" />
<center>
<script type="text/javascript" src="/WebApplication8/faces/javax.faces.resource/jsf.js?ln=javax.faces&stage=Development"></script>
Design | Admin | Queries<br />
<hr />
</center><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-4683216470766096399:-9055922898460672452" autocomplete="off" />
</form>
</div>
<div id="content" class="left_content">
Welcome Report Designer!<br /><br />
<div id="fileUpload">
<form name="myForm" action="../UploadServlet" enctype="multipart/form-data" onsubmit="return validate_form(this);" method="POST">
<b>Make sure your filename is meaningful (eg. WasteByMachineReport.jrxml)</b><br /><br />
Please specify a file:<input type="file" name="file" size="40" /><br />
Number of parameters: <select name="numSelect" onchange="draw_param_dropdowns();">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select><br />
<select class="parametersHide" id="select1"><option></option></select>
<script type="text/javascript" language="Javascript">
function draw_param_dropdowns(){
var sel = document.getElementById("select1");
sel.style = "visibility:visible";
}
</script>
<input type="submit" value="Upload" />
</form>
</div>
</div>
</div>
</body>
</html>
You could try to do it in a sort of a loop with a modification to your style tag, since it looks like you want the user to input something, I'll use input tags.
So for instance you have:
<select name="numSelect" id = "numSelect" onchange="draw_param_dropdowns();">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<!-- Create all the boxes for input and hide them initially -->
<select name="select1" id="select1" style="display:none;"><option></option></select>
<select name="select2" id="select2" style="display:none;"><option></option></select>
...
And for your javascript:
<script type="text/javascript" >
//Loop through the drop down boxes and hide them all.
//This will ensure that you don't have 'leftover' boxes after selecting
function draw_param_dropdowns() {
for (var x = 1; x <= 4; x++) {
document.getElementById('select' + x).style.display='none';
}
for (var y = 1; y <= document.getElementById("numSelect").selectedIndex; y++) {
document.getElementById('select' + y).style.display = 'block';
}
}
</script>
It may be a bit longer than what some of the other coders at SO can do, but hopefully this leads to more understanding.
I have a regex that searches the source of a page it retrieves via Ajax and gets all the data inbetween and including the fieldset tags.
Here's my javascript:
var req = new XMLHttpRequest();
var regex = new RegExp("<(fieldset)\b[^>]*>.*?</\1>");
function showEditForm(i) {
req.open('GET', '/admin/maps/edit/' + i, false);
req.send(null);
var response = req.responseText;
//strip out all the line breaks
var responseStripped = response.replace( new RegExp("\\n|\\r", "g"), "" );
var regexed = regex.exec(responseStripped)
alert(regexed);
}
Here's the source of responseStripped:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>Gessner Engineering | Administrative Area | edit</title> <link href="/stylesheets/scaffold.css?1236625014" media="screen" rel="stylesheet" type="text/css" /> </head><body> <div id="user-bar-greeting">Logged in as Thomas Gessner</div> <div id="user-bar-action" >(Log out)</div><div id="header"></div><ul id="menu"> <li>Home</li> <li>Geotechnical Map</li> <li>Profiles</li> <li>Projects</li> <li>Users</li></div><div id="content"> <h1></h1> <fieldset><legend>Edit Test Marker</legend><form action="/admin/maps/1" class="edit_map" enctype="multipart/form-data" id="edit_map_1" method="post"><div style="margin:0;padding:0"><input name="authenticity_token" type="hidden" value="1422cd87ff4d68b2b23c9015a0568bffd47fbfeb" /></div> <p> <label for="map_name">Name</label><br /> <input id="map_name" name="map[name]" size="30" type="text" value="Test Marker" /> </p> <p> <label for="map_description">Description</label><br /> <textarea cols="40" id="map_description" name="map[description]" rows="5">test</textarea> </p> <p> <label for="category_id">Category:</label><br/> <select id="map_category_id" name="map[category_id]"><option value="">Select One</option></select> </p> <p> <label for="map_address">Address</label><br /> <input id="map_address" name="map[address]" size="30" type="text" /> </p> <p> <label for="map_address2">Address2</label><br /> <input id="map_address2" name="map[address2]" size="30" type="text" /> </p> <p> <label for="map_city">City</label><br /> <input id="map_city" name="map[city]" size="30" type="text" /> </p> <p> <label for="map_state">State</label><br /> <input id="map_state" name="map[state]" size="2" type="text" /> </p> <p> <label for="map_zip">Zip</label><br /> <input id="map_zip" name="map[zip]" size="30" type="text" /> </p> <p> <input id="map_submit" name="commit" type="submit" value="Create" /> </p></form></fieldset></div></body></html>
I've verified that the regex works in RegexBuddy and at RegexPal.
However, when all is said and done, I get null returned.
What am I doing wrong?
Thanks!
Please note this is in testing form, it may look ugly but I tried to break it down step by step and this is the last state it was in.
You have forgotten to escape the backslash in the string:
var regex = new RegExp("<(fieldset)\\b[^>]*>.*?</\1>");