I have the following code for a webpage;
<div class="toolbox">
<div class="toolboxNest" align="left">
<div class="clear"> </div>
<div class="gap"> </div>
<label for="j_username">
<input id="j_username" type="text" name="j_username">
<div class="clear"> </div>
<div class="gap"> </div>
<label for="j_password">
<input id="j_password" type="password" name="j_password">
</div>
<div class="clear"></div>
<div class="gap"></div>
<div align="center">
<input class="formButtonGreen" type="submit" value="Login">
</div>
<div class="clear"></div>
<div class="gap"></div>
<div class="infoText">
I am able to click and enter text for the username and password, but I cant work out how to press the submit button, if it were just an element then that would be fine, but it's in a class and I'm unsure how to do it.
This is my code...
var x = webBrowser1.Document.All.GetElementsByName("j_username");
x[0].InnerText = "xxxxx";
var y = webBrowser1.Document.All.GetElementsByName("j_password");
y[0].InnerText = "xxxxxxxx";
//This part is not working....
var s = webBrowser1.Document.GetElementById("formButtonGreen");
s[0].InvokeMember("click");
Any one got any ideas?
Please note: I don't own the website so can't make changes to code behind webpage...
Thanks,
David
You should try using .Document.Body.GetElementsByTagName("input") which should help you get the button element and later you can use InvokeMember("click") on that element.
This will return a collection of matching elements, so if there are more than one you will have to identify it from the attributes by looping over it and then trigger for the one you need.
Instead of clicking the button, just submit the form itself.
jQuery wise, this is:
$("#my_form").submit();
Or you coulkd use any other means to select that Form. By class, parent element, tag name, ...
Related
Dear friends I am currently creating an admin panel for user where they can easily can publish their articles. I also want to add to my form a little fileuploader but sadly I got some problems with DROPZONEJS.JS file in POST method. The main problem is I cannot give URL to project's local file in order to download to file there where website will access those file in order to publish them with current article's id. Please let me know if there is something not understandable.
#{
ViewBag.Title = "Uppy";
}
#{
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
<!--begin::Entry-->
<div class="d-flex flex-column-fluid">
<!--begin::Container-->
<div class="container">
<!--begin::Card-->
<div class="card card-custom gutter-b">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">File Upload</h3>
</div>
</div>
<!--begin::Form-->
<form>
<div class="card-body">
<div class="form-group row">
<label class="col-form-label col-lg-3 col-sm-12 text-lg-right">Multiple File Upload</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<div class="dropzone dropzone-default dropzone-primary" id="kt_dropzone_2">
<div class="dropzone-msg dz-message needsclick">
<h3 class="dropzone-msg-title">Drop files here or click to upload.</h3>
<span class="dropzone-msg-desc">Upload up to 10 files</span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-lg-3 col-sm-12 text-lg-right">File Type Validation</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<div class="dropzone dropzone-default dropzone-success" id="kt_dropzone_3">
<div class="dropzone-msg dz-message needsclick">
<h3 class="dropzone-msg-title">Drop files here or click to upload.</h3>
<span class="dropzone-msg-desc">Only image, pdf and psd files are allowed for upload</span>
</div>
</div>
</div>
</div>
</div>
#using (Html.BeginForm("Uppy",
"FileUpload",
FormMethod.Post,
new { enctype = "multipart/form-data" })) //multipart/form-data gives functionlity to inputes (search at web);
{
<div class="card-footer">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-4">
<input type="submit" value="Submit" class="btn btn-light-primary mr-2" />
<button type="reset" class="btn btn-primary">Cancel</button>
</div>
</div>
</div>
}
</form>
<!--end::Form-->
</div>
<!--end::Card-->
<!--end::Row-->
</div>
<!--end::Container-->
</div>
<!--end::Entry-->
</div>
<!--end::Content-->
By the way my own upload code is working correctly and also sends choosen file to url location where I wrote in controller.
<label for="file">Upload File:</label>
<input type="file" name="file" id="file" class="btn-hover-bg-success" />
<br>
<br>
<input type="submit" value="Upload Image" />
<br>
<br>
#ViewBag.Message
This is my FileUploadController:
[HttpPost]
public ActionResult Uppy(HttpPostedFileBase file)
{
ADAPTIVE_TESTEntities ent = new ADAPTIVE_TESTEntities();
Adaptive.News.Models.NEWS news = new Adaptive.News.Models.NEWS();
if (file != null && file.ContentLength > 0)
try
{
var path = Path.Combine(Server.MapPath("~/Content/images"),
Path.GetFileName(file.FileName));
file.SaveAs(path);
news.PICTUREPATH = path;
ent.NEWS.Add(news);
ent.SaveChanges();
ViewBag.Message = "File uploaded successfully";
}
catch (Exception ex)
{
ViewBag.Message = "ERROR: " + ex.Message.ToString();
}
else
{
ViewBag.Message = "You have not specified a file.";
}
return View();
}
it is not obvious to me, what and where really your problem is. What do you mean with having problem. Is your problem with Dropzone.JS or with C#? Anyway, I examined your code slightly and have some ideas what your problem could be.
FIRST OF ALL: You have 2 DIV containers, which you use as Dropzone elements assigning them the css class "dropzone". Furthermore you generate a FORM element with ASP.Net HTML-Helper.
By default you have 2 options using Dropzone.
Declarative instantiation via assigning css class "dropzone" to any HTML element.
Dropzone discovers all DOM elements with class="dropzone" automatically and instantiates them.
Programmatically instantiating: You instantiate Dropzone by passing the id of the container element and THE OPTIONS CONTAINING POST URL to the Dropzone constructor.
DECLARATIVE DROPZONE
You must pay attention to this detail: If you use FORM element as Dropzone container element, Dropzone uses "action" attribute of the FORM element as post URL. But if you use
DIV element as container, then you get most possibly a JavaScript error. Because DIV elements do usually NOT have "action" attribute. If you use DIV as Dropzone container (and in your code you use it 2 times), you will get following JavaScript error:
dropzone.js:1027 Uncaught Error: No URL provided.
at new Dropzone (dropzone.js:1027)
at dropzone.js:2907
at Function.Dropzone.discover (dropzone.js:2919)
at Dropzone._autoDiscoverFunction (dropzone.js:3491)
at HTMLDocument.init (dropzone.js:3456)
In this case you have two options solve the problem:
Use FORM element instead of DIV as Dropzone container.
Add action="/your/post/url" to your DIV element, which you use as Dropzone container.
Where I would prefer the first option. Because it is not common that DIV elements have action attribute.
I am currently struggling with Selenium to select an element by its class name.
The Website I'm using is:
http://demo.guru99.com/test/login.html
<div class="col-xs-12 col-sm-6">
<form action="success.html" method="post" id="login_form" class="box">
<h3 class="page-subheading">Already registered?</h3>
<div class="form_content clearfix">
<div class="form-group">
<label for="email">Email address</label>
<input class="is_required validate account_input form-control" data-validate="isEmail" type="text" id="email" name="email" value="">
</div>
<div class="form-group">
<label for="passwd">Password</label>
<span><input class="is_required validate account_input form-control" type="password" data-validate="isPasswd" id="passwd" name="passwd" value=""></span>
</div>
<p class="lost_password form-group">Forgot your password?</p>
<p class="submit">
<input type="hidden" class="hidden" name="back" value="my-account"> <button type="submit" id="SubmitLogin" name="SubmitLogin" class="button btn btn-default button-medium">
<span>
<i class="icon-lock left"></i>
Sign in
</span>
</button>
</p>
</div>
</form>
</div>
I figured out how to select the element by id but whenever I try to select it by classname I get an element not found exception. I don't really understand how this works as I tried multiple websites without success. In this example the element has multiple classes but on some websites this method even fails when there is only one class. On this website selecting it by only one class works but I have read that this isn't a good method as you could be selecting multiple elements by mistake.
IWebElement search = driver.FindElement(By.ClassName("account_input"));
Here is my code:
driver = new ChromeDriver();
driver.Url = "http://demo.guru99.com/test/login.html";
driver.Navigate();
IWebElement search = driver.FindElement(By.ClassName("is_required.validate.account_input.form-control"));
search.SendKeys("test");
In this example selecting element by Id using the By.Id("first_name") method doesn't work either:
<span>
<label class="first_name_label form_label_text"></label>
<div class="clear"></div>
<div class="form-item icon">
<input value="" data-error="An error has occured." id="first_name" type="text" name="first_name" class="form_item is_required" placeholder="First Name">
<i style="color:rgba(70,75,106,0.5)" class="vs icon-user"></i> </div>
<div class="form-item icon">
<input value="" data-error="An error has occured." id="last_name" type="text" name="last_name" class="form_item is_required" placeholder="Last Name">
<i style="color:rgba(70,75,106,0.5)" class="vs icon-user"></i> </div>
<div class="clear"></div>
</span>
What am I doing wrong? Help would be greatly appreciated
You can use the class name to find the element as well, But what is the problem is that same class can be used to define multiple element in the program , So when you find element by class it will not assure you that it will find the element which you are hoping for.
Selenium will find element of the first in the result.
Better to with xpath like tag along with the class.
Here is the code
xpath = " //input[#name='passwd'] ";
# -> can be used to get any parameter inside the tag and use it as per your requirement.
This will help you.
Contact for more information.
Corrected Code: Xpath of your class name was incorrect.
driver = new ChromeDriver();
driver.Url = "http://demo.guru99.com/test/login.html";
driver.Navigate();
IWebElement search = driver.FindElement(By.ClassName("is_required validate account_input form-control"));
search.SendKeys("test");
Another way to access email field is:
IWebElement search = driver.FindElement(By.Xpath("//*[#id='email']"));
Hope this helps.
If you will observe the class name of the element, it is the compound class name(having space in between). And compound class names are not permitted in selenium. In this case, you can use another locator like CSS(with class name) or XPath.
Check the following code snippet:
WebDriverManager.chromedriver().version("2.40").setup();
WebDriver driver= new ChromeDriver();
driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
driver.get("http://demo.guru99.com/test/login.html");
WebElementuserName=driver.findElement(By.cssSelector(".is_required.validate.account_input.form-control"));
userName.sendKeys("Username");
WebElement password = driver.findElement(By.xpath("(//[#class='is_requiredvalidateaccount_input form-control'])[2]"));
password.sendKeys("Password");
I append my select option from database table. Select option has two type
scalar
event
If the option type is scalar, I need to show 2 input fields (alarm, reset) so that user can inset values in it and when the option type is event I need to hide 2 input fields (alarm, reset) so that user cannot inset values in it.
When the option type is scalar, my form saves successfully but when option type is event form submit button not going to perform any action.
Can you please help?
Here is my code
HTML
<div class="row">
<form method="post" action="/Home/SaveTriggers" class="form-inline">
<div class="col-md-12">
<div class="col-md-2">
<select name="sourceId" class="select2" required>
#foreach (var i in ViewBag.opt)
{
<option value="#i.Id,#i.name,#i.type" id="opt">#i.name</option>
}
</select>
</div>
<div class="col-md-2">
<input id="alarm" name="alarm" type="text" placeholder="alarm" style="display:none" required />
</div>
<div class="col-md-2">
<input id="reset" name="reset" type="text" placeholder="reset" style="display:none" required />
</div>
<div class="col-md-1">
<input type="text" name="delay" id="delay" placeholder="delay" required />
</div>
<div class="col-md-3">
<select class="address2" name="action" id="select" required>
<option selected disabled>Select alarm action</option>
<option>John Doe, Switch on warning light</option>
<option>John Doe</option>
<option>Do anything</option>
</select>
</div>
<div class="col-md-2">
<button id="delete2" type="button" class="btn btn-default">Delete</button>
</div>
<button class=" add btn btn-primary" type="submit">Add</button>
</div>
</form>
</div>
Jquery(as i have to hide or show alarm or reset fields respectively)
<script>
$(document).ready(function () {
$(".select2").change(function () {
var text = $(".select2 option:selected").text();
var val = $(".select2 option:selected").val();
var res = val.split(",");
var type = res[2];
if (type == "scalar") {
document.getElementById("reset").style.display = "block";
document.getElementById("alarm").style.display="block"
}
else if(type=="event") {
document.getElementById("reset").style.display = "none";
document.getElementById("alarm").style.display = "none"
var alarm = document.getElementById("alarm");
}
});
});
</script>
The problem is most likely your inputs for alarm and reset.
If type is event, they are hidden and will most likely hold no value. But since they are required, the form will not submit until that error is resolved.
So you can either remove the required attribute from those 2 input fields, populate them with default values or use novalidate in your form tag. This disables form validation. You'd have to validate your inputs by hand in javascript.
<div class="col-md-2">
<input id="alarm" name="alarm" type="text" placeholder="alarm" style="display:none" />
</div>
<div class="col-md-2">
<input id="reset" name="reset" type="text" placeholder="reset" style="display:none" />
</div>
<div class="col-md-2">
<input id="alarm" name="alarm" type="text" placeholder="alarm" style="display:none" required />
</div>
<div class="col-md-2">
<input id="reset" name="reset" type="text" placeholder="reset" style="display:none" required />
as you're having required attribute in your input element, the validation is getting triggered and not letting you submit the form.
i would suggest you to do a validation on jquery on submit instead of using default html5 validation
I'm working on a MVC-project for fun that takes data from a public API, shows it, and calculates it depending on user input; I'm nearing the end of my goal, but one issue I've been having trouble with for the past day is blocking my progress.
The issue is as follows:
I want to be able to take data from my Controller, and show on button-press in my view, inside a writable text-box (so the user can both auto-generate data by inputting username and fetching their data from the public API, or specify their own custom data).
View
#{
ViewBag.Title = "Herblore";
Enter you name #Html.TextBox("Name")
<input type="submit" id="SubmitName" value="Submit" />
<script type = "text/javascript">
$('#SubmitName').click(function() {
var url = "/Calculator/PlayerLevelMsg";
var name = $('#Name').val();
$.get(url, {
Brugername: name
}, function(data) {
$("#lData").html(data);
});
})
</script>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<h3 style="font-size: 24px">Current Level</h3>
</div>
<div class="col-md-3 col-md-pull-1">
<h3><output id="lData"/></h3>
</div>
<div class="col-md-3 col-md-pull-1">
<h3 style="font-size: 24px">Current EXP</h3>
</div>
<div class="col-md-3 col-md-pull-2">
<h3><input type="text" id="lData" /></h3>
</div>
</div>
</div>
</div>
My Javascript allows me to run this controller in my calculator controller class:
public string PlayerLevelMsg(string BrugerName) {
int Firemaking = 12;
var playerdata = new OS_Efficiency_Calculator.Controllers.PlayerSearchController();
string PlayerLevel = playerdata.GetLevel(BrugerName, Firemaking);
string moreLevel = "PlayerLevel = 85";
if (!String.IsNullOrEmpty(BrugerName))
return "Player Level" + " " + moreLevel;
else
return "Please enter your name.";
}
Which returns a string that holds a single value from the API - this shouldn't be important, in the name of reproducing my issue, commenting out the strings gathered from other classes in my project and using a basic text string will give you the same result as I'm getting, so if you wish to reproduce:
public string PlayerLevelMsg(string BrugerName) {
if (!String.IsNullOrEmpty(BrugerName))
return "Player Level = 99";
else
return "Please enter your name.";
}
My issue is as follows;
Using the above code, I can view the output of my controller just fine in the line "<output id="lData"/>" - however, this isn't a text-box, so the user can't edit it.
on the other hand, will not. This is likely because it's an input type, but I can't find a textbox-output type, nor am I experienced enough in MVC to fully understand why I can't just bind the textbox to the value through the ID, when that would work just fine in a general WPF application (where I've spent the most time practicing).
It seems to me that there should be some super-simple answer to this, and I hope you guys can help me, and that the semi-code provided is adequate; As said, the ideal solution is that in this picture:
Both of the values would be "85", but the text-box is adamant that it isn't supposed to change - Thanks so much for taking the time to look through!
#{
ViewBag.Title = "Herblore";
Enter you name #Html.TextBox("Name")
<input type="submit" id="SubmitName" value="Submit" />
< script type = "text/jscript" >
$('#SubmitName').click(function() {
var url = "/Calculator/PlayerLevelMsg";
var name = $('#Name').val();
$.get(url, {
Brugername: name
}, function(data) {
$("#lData").val(data);
});
})
< /script>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<h3 style="font-size: 24px">Current Level</h3>
</div>
<div class="col-md-3 col-md-pull-1">
<h3><input type="text" id="lData"/></h3>
</div>
<div class="col-md-3 col-md-pull-1">
<h3 style="font-size: 24px">Current EXP</h3>
</div>
<div class="col-md-3 col-md-pull-2">
<h3><input type="text" id="lData" /></h3>
</div>
</div>
</div>
</div>
You need to make lData an input field with the type text and in the JavaScript function set the value of the field to the data returned from the controller.
Please visit this site to learn more about the input field: http://www.w3schools.com/tags/tag_input.asp
My labels: The labels are mentioned here followed by the code.
<div id="valueIntroduction" class="labelarea" runat="server"> </div>
<div class="line"></div>
<div id="valueBacklog notice" class="labelarea"> </div>
<div class="line"></div>
<div id="valueReasonably complete" class="labelarea"> </div>
<div class="line"></div>
<div id="valueStatement of purpose" class="labelarea"> </div>
<div class="line"></div>
<div id="valueResume" class="labelarea"> </div>
<div class="line"></div>
<div id="valueTranscripts" class="labelarea"> </div>
<div class="line"></div>
<div id="valueGRE Official test scores" class="labelarea"> </div>
<div class="line"></div>
<div id="valueTOEFL or IELTS Official test scores" class="labelarea"> </div>
<div class="line"></div>
<div id="valueLetters of Recommendation3" class="labelarea"> </div>
<div class="line"></div>
<div id="valueLetters of Recommendation2" class="labelarea"> </div>
<div class="line"></div>
<div id="valueLetters of Recommendation1" class="labelarea"> </div>
<div class="line"></div>
<div id="valueSignature" class="labelarea"> </div>
<div class="line"></div>
<div id="valueSubject" class="labelarea"> </div>
<div class="line"></div>
This code is assigning the last record to the first label. How do I assign the correct record to correct label?
if (Department.Items[0].Selected)
{
firstPanel.Visible = true;
myLegend.InnerText = "Informatics";
NewComm.CommandText = "getTextHeaderINFO";
NewComm.CommandType = CommandType.StoredProcedure;
NewComm.Connection = NewConn;
NewComm.CommandTimeout = 3000;
SqlDataReader results = NewComm.ExecuteReader();
while (results.Read())
{
Response.Write(results["TEXT_CONTENT"].ToString());
valueIntroduction.InnerHtml = results["TEXT_CONTENT"].ToString();
}
}
Well, as it is written now you are setting the same label's InnerHtml in every iteration of the while loop.
I would think you would be doing something more like this:
label1.InnerHTML = results["text_content"];
results.read()
label2.InnerHtml = results["text_content"];
etc.
In short, you'll need to assign the results iteratively. It may be safer to read them into a List or a string array (in your loop) so you can verify count, but essentially you have to set each label individually. I can't image how you could expect it to work setting a single one over and over again.
Now, what you SHOULD be doing, when you intend to work with HTML elements programmatically is very different from what I see here.
What you're doing here requires you to lookup HTML elements by ID, assign to their InnerHtml, and is honestly very error-prone. It's also not a good use of C# or the .NET environment.
Use .NET labels instead. Define them like this:
<asp:Label runat="server" id="valueIntroduction" CssClass="labelarea" />
Then on the code behind you can access them much easier:
valueIntroduction.Text = "This text will show up in the valueIntroduction label";
Why do you call results.Read() in a loop? You should just find the one single result row in the results and put this one into the valueIntroduction.InnerHtml property.