Form:
<form method="POST" name="contactform" action="form-handler.php">
<label for='name'>Name:</label>
<input type="text" name="name" />
<label for='email'>Contact Number:</label>
<input type="text" name="phone" />
<label for='phone'>Email:</label>
<input type="text" name="email" />
<label for='message'>Requirements:</label>
<textarea name="message"></textarea>
<input type="submit" value="Submit" name="submit" class="quoteButton" />
</form>
Code:
HtmlNode.ElementsFlags.Remove("form");
HtmlNodeCollection fromNodes = doc.DocumentNode.SelectNodes("//form");
foreach (HtmlNode formNode in fromNodes)
{
var inputs = formNode.SelectNodes(".//input");
}
"//input" works and when I check the children xpath I see:
/html[1]/body[1]/div[1]/div[3]/div[2]/div[1]/div[1]/input[2]
Which means, according to HAP, form doesn't even include the input!
".//input" that selects subnodes of the current formNode doesn't work (returns null)!
How to fix this I added the following but it doesn't work
HtmlNode.ElementsFlags.Remove("form");
Any idea?
Edit (+Example):
In the next sample the inputs variable is also null.
var doc = new HtmlDocument();
doc.LoadHtml(#"
<!DOCTYPE html>
<html>
<head>
<title>Form Test</title>
</head>
<body>
<form>
<input type=""text"" />
<input type=""reset"" />
<input type=""submit"" />
</form>
</body>
</html>
");
HtmlNode.ElementsFlags.Remove("form");
IEnumerable<HtmlNode> fromNodes = doc.DocumentNode.Descendants("form");
foreach (HtmlNode formNode in fromNodes)
{
var inputs = formNode.SelectNodes(".//input");
}
Solved!
HtmlNode.ElementsFlags.Remove("form");
should be called before loading the document.
My bad :D
Related
here is the code:-
form.html :
<div class="container">
<div class="row mt-5">
<div class="col-md-6 offset-md-3">
<form th:action="#{/process}" method="post" th:object="${loginData}">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input
type="text"
name="userName"
class="form-control"
th:value="${loginData.userName}"
id="exampleInputEmail1"
aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input
type="email"
name="email"
th:value="${loginData}"
class="form-control"
id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
MyController :
#GetMapping("/form")
public String formHandler(Model m ) {
System.out.println("opening form");
LoginData loginData = new LoginData();
if(loginData != null ) {
m.addAttribute("login", new LoginData());
System.out.println("YAY");
}else {
System.out.println("Bhag Bh*****ke");
}
return "form1";
}
//handler for process form
#PostMapping("/process")
public String processform(#ModelAttribute("loginData") LoginData loginData) {
System.out.println(loginData);
return"success";
}
success.html :
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Success</title>
</head>
<body>
<h1>Welcome to this success page</h1>
<h1 th:text="${LoginData.userName}"></h1>
<h1 th:text="${LoginData.email}"></h1>
</body>
</html>
saying error : Caused by: org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'userName' cannot be found on null
Login page is not ruuning because LoginData is empty at begining
You haven't exactly specified which of the 2 pages are causing the issue, but I'm going to guess that it is the first one.
I would first try replacing the th:value tag with th:field in the username input:
<input
type="text"
name="userName"
class="form-control"
th:field="*{userName}"
id="exampleInputEmail1"
aria-describedby="emailHelp">
Since you have already defined the loginData object within the form tag:
th:object="${loginData}
The next input tag could also cause some issues, I'm guessing that this should accept the user's password:
<input
type="email"
name="email"
th:value="${loginData}"
class="form-control"
id="exampleInputPassword1">
You would want to update it to something like:
<input
type="password"
th:field="*{password}"
class="form-control"
id="exampleInputPassword1">
The exception tells you that there is no model attribute with the name loginData. looking at the controller code after this that can be confirmed as you are adding a model attribute with name login not loginData m.addAttribute("login", new LoginData());
Also I'm not usre why you define a loginData variable in your controller, check if it's non null and than don't use it but create a new one
LoginData loginData = new LoginData();
if(loginData != null ) {
m.addAttribute("login", new LoginData());
System.out.println("YAY");
}
I'm creating an Object in GET method and initialize it with nulls. Then I set some values and send it to the POST method, but after this process all of values that I set earlier are nulls. How could I repair it? I've tried to use hidden fields, but it didn't help.
HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" th:href="#{/styles.css}" />
</head>
<body>
<form method="POST" th:action="#{sendorder}" th:object="${details}">
<label for="name">Name: </label>
<input type="text" th:field="*{name}"/>
<br/>
<input type="hidden" th:field="*{order}" id="order"><label for="surname">Surname: </label>
<input type="text" th:field="*{surname}"/>
<br/><label for="room">Room: </label>
<input type="text" th:field="*{room}"/>
<br/>
<br/>
<h2>Please, choose your company:</h2>
<select th:field="*{company}">
<option th:each="i : ${companies}" th:value="${i.id}" th:text="${i.name}">
</option>
</select>
</div>
</div>
<input type="submit" value="Submit Order"/>
</form>
</body>
</html>
i used this code to get the value of item that i checked however. its not working on my project. i just want every value that i checked it will go to my text box with comma separator
like 288,289,290. thanks in advance
<input type="text" name="holder" id="holder"
<input type="checkbox" name="example[]" value="288" checked/>
<input type="checkbox" name="example[]" value="289" checked/>
<input type="checkbox" name="example[]" value="290" />
<input type="checkbox" name="example1[]" value="289" checked/>
var output = jQuery.map($(':checkbox[name="example[]"]:checked'), function (n, i) {
return n.value;
}).join(',');
alert(output);
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="inputs">
<input type="checkbox" value="Apple">
<input type="checkbox" value="Orange">
<input type="checkbox" value="Pineapple">
<input type="checkbox" value="Mango">
</div>
<input type="text" id="target"/>
</body>
</html>
var arr = [];
$('#inputs input').change(function() {
if (this.checked) {
arr.push(this.value);
}
else {
arr.splice(arr.indexOf(this.value), 1);
}
$('#target').val(arr + '');
});
I have the problem of doing the validation of fields myself. Now there are 5-6 fields in the form. So I am checking each one in my controller, and if there is wrong i wish to load the view again and pass the error array to it.
I achieved the above functionality with this:
<html>
<head>
<title>My Form</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
</head>
<body>
<?php
echo $fullname;
?>
<?
echo form_open('/membership/register');
?>
<h5>Username</h5>
<input type="text" name="username" value="" size="50" />
<h5>Password</h5>
<input type="text" name="password" value="" size="50" />
<h5>Password Confirm</h5>
<input type="text" name="cpassword" value="" size="50" />
<h5>Email Address</h5>
<input type="text" name="email" value="" size="50" />
<h5>Mobile</h5>
<input type="text" name="mobile" value="" size="15" />
<h5>Home</h5>
<input type="text" name="home" value="" size="15" />
<h5>Full Name</h5>
<input type="text" name="fullname" value="" size="100" />
<br><br>
<div><input type="submit" value="Submit" /></div>
</form>
</body>
</html>
and in controller the code is:
if (preg_match('#[0-9]#',$fullname))
{
$errors['fullname'] = 'wrong name format!';
$this->load->view('register', $errors);
}
Now the real problem I have is if the many fields are wrong. I want to have $errors array passed to view and accessed there for all the values it contains. so I don't have to specify $fullname or $mobile to get the value. How can this be done? as to show the user everything missing in one go
First of all I advise using codeigniter's built in form validation class
Here is how I usually process my validation in the controller:
if ($this->input->post())
{
// process the POST data and store accordingly
$this->form_validation->set_rules('username', 'Username', 'trim|required|min_length[5]|xss_clean');
$this->form_validation->set_rules('password', 'Password', 'trim|required|min_length[6]|xss_clean');
// the rest of your form fields validation can be set here
if ($this->form_validation->run() == FALSE)
{
// validation hasnt run or has errors, here just call your view
$this->load->view('same_view_file_with_the_form', $data);
}
else
{
// process the POST data upon correct validation
}
}
In my view file I call each error like this:
<h5>Username</h5>
<input type="text" name="username" value="" size="50" />
<span class="error-red"><?php echo form_error("username"); ?></span>
<h5>Password</h5>
<input type="text" name="password" value="" size="50" />
<span class="error-red"><?php echo form_error("password"); ?></span>
<h5>Password Confirm</h5>
<input type="text" name="cpassword" value="" size="50" />
<span class="error-red"><?php echo form_error("cpassword"); ?></span>
Do all your checks in the controller prior to binding errors into the view.
e.g.
$errors = array();
if (preg_match('#[0-9]#',$fullname))
{
$errors['fullname'] = 'wrong name format!';
}
if ( do_something_to_validate(mobile) )
{
$errors['mobile'] = 'invalid mobile';
}
// after checking everything do this
$this->load->view('register', $errors);
I have some mvc frameworks that extend my .net application. Their task is mainly to deliver partials to the .net applications interface.
The funny thing is that chrome strips the very necessary
Here is how I fetch and render the data from the framework
$.ajax({
url: "/mvc/UserProfile/AddressForm?datatype=shipping",
dataType: "text", // text html script
method: "get",
cache: false,
success: function (data) {
console.log(data);
//var userProfileAdd = document.getElementById("userProfileAdd");
var userProfileAdd = $("#userProfileAdd")[0];
userProfileAdd.innerHTML = "<div>" + data + "</div>";
}
});
Firefox, IE and so on does retrieve all data. Does anyone know why chrome behaves like this?
Thanks
EDIT
This is the code sent to the data variable printed by console.log
<script src="/scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<form OnSubmit="return false;" action="/mvc/UserProfile/AddressFormPost" id="frmUserAddress" method="post"><div class="validation-summary-valid" id="validationSummary"><ul><li style="display:none"></li>
</ul></div>
<input name="__RequestVerificationToken" type="hidden" value="8Vkd039Wc3825G6CTEomJ/aXfrCyjuEY3sV/ty4znHi9yO0Th535p8VNxqvBwhJ12AREQhvTMhRVNEO6Ke3O87jDAjREg3I3dFYp2Y5geutbEOLk6KHmn6hLb4a5CFaZ3uCOm8uYgr/U4au33yaUFw==" />
<div>
Select country:
<select id="Countries" name="Countries"><option value="029">Caribbean</option>
<option value="AE">U.A.E.</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="AM">Armenia</option>
<option value="AR">Argentina</option>
</select>
</div>
<div>
Postal Code
<input class="formField textBox" id="PostalCode" name="PostalCode" type="text" value="" />
<span class="field-validation-valid" id="PostalCode_validationMessage"></span>
</div>
<div>
City
<input class="formField textBox" id="City" name="City" type="text" value="" />
<span class="field-validation-valid" id="City_validationMessage"></span>
</div>
<div>
State
<input class="formField textBox" id="State" name="State" type="text" value="" />
<span class="field-validation-valid" id="State_validationMessage"></span>
</div>
<div>
First name
<input class="formField textBox" id="FirstName" name="FirstName" type="text" value="" />
<span class="field-validation-valid" id="FirstName_validationMessage"></span>
</div>
<div>
Email
<input class="formField textBox" id="Email" name="Email" type="text" value="" />
<span class="field-validation-valid" id="Email_validationMessage"></span>
</div>
<div>
<input type="submit" value="Send!" id="btnAddressForm" class="button" />
</div>
</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"PostalCode","ReplaceValidationMessageContents":true,"ValidationMessageId":"PostalCode_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your postal code","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"City","ReplaceValidationMessageContents":true,"ValidationMessageId":"City_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your city","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"State","ReplaceValidationMessageContents":true,"ValidationMessageId":"State_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your state","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"FirstName","ReplaceValidationMessageContents":true,"ValidationMessageId":"FirstName_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your first name","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"Email","ReplaceValidationMessageContents":true,"ValidationMessageId":"Email_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your first name","ValidationParameters":{},"ValidationType":"required"}]}],"FormId":"frmUserAddress","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
//]]>
</script>
Chrome will strip out the form element if there is a surrounding form element. JUST the form tag disappears, all of its contents remain.
Check to make sure that there isn't a parentNode for "userProfileAdd" that is a form.