I am facing a problem in my Jsp page. I am filling the values in form and then clicking on Submit button. Now the problem which I am facing is, that I want the filled values to be shown in that division only in which I filled the form. I don’t want values/result of form to be displayed in next page.
My code of form is this:
<FORM id="Fid" METHOD="GET" ACTION="attributesWithModelInfo.jsp">
<INPUT NAME="make" TYPE="hidden" value="<%=(String) session.getAttribute("baseMake")%>"/><BR> <!-- This attribute is optional and can be used as a regular expression. -->
<INPUT NAME="model" TYPE="hidden" value="<%=(String) session.getAttribute("baseModel")%>"/><BR> <!-- This attribute is optional and can be used as a regular expression. -->
<INPUT NAME="year" TYPE="hidden" value="<%=(String) session.getAttribute("baseYear")%>"/><BR> <!-- This attribute is optional and can be used as a regular expression. -->
Attribute Name: <INPUT NAME="attribute" TYPE="TEXT" SIZE="30"/><BR>
Attribute Name: <INPUT NAME="attribute" TYPE="TEXT" SIZE="30"/><BR>
Attribute Name: <INPUT NAME="attribute" TYPE="TEXT" SIZE="30"/><BR>
Attribute Name: <INPUT NAME="attribute" TYPE="TEXT" SIZE="30"/><BR>
Attribute Name: <INPUT NAME="attribute" TYPE="TEXT" SIZE="30"/><BR>
<INPUT TYPE="SUBMIT">
</FORM>
Code of ajax that I am trying is:
$(function() {
alert('here I am in Attribute');
$("#Fid").submit(function(e) {
var name = $("#attribute").val();
var dataString = 'attribute='+ attribute;
$.ajax({
type: "POST",
url: "attributesWithModelInfo.jsp",
data: dataString,
success: function(){
}
});
e.preventDefault();
});
return false;
});
The form is in attributesWithModelInfo.jsp file.
This file is given its href in index.jsp as:
<li>Attributes</li>
The div in which Form is displayed and the result after submit too has to be displayed is:
$(document).ready(function() {
$('a#pageurls').on("click", function(){
$("#refdiv").load($(this).attr("href"));
return false;
});
});
the upper code too is in index.jsp
Related
I am facing a problem while trying to listen to the "onclick" event of an html element.
I have attached the images of my dart code and HTML file I am using.
Its throwing the error
"Error: Expected a value of type 'HtmlElement', but got one of type 'Null'"
Here is the Dart Code where I am trying to get the element by id!
HtmlElementView(
onPlatformViewCreated: (id) {
HtmlElement element = document
.querySelector("#form-checkout__issuer") as HtmlElement;
element.onChange.listen(
(event) {
print("this is the current event: $event");
},
);
Here is the HTML Document I am showing in my Flutter Web App
<!-- <div class = "card"> -->
<form id="form-checkout">
<input type="text" name="cardNumber" id="form-checkout__cardNumber" />
<input type="text" name="expirationDate" id="form-checkout__expirationDate" />
<input type="text" name="cardholderName" id="form-checkout__cardholderName"/>
<input type="email" name="cardholderEmail" id="form-checkout__cardholderEmail"/>
<input type="text" name="securityCode" id="form-checkout__securityCode" />
<select name="issuer" id="form-checkout__issuer"></select>
<select name="identificationType" id="form-checkout__identificationType"></select>
<input type="text" name="identificationNumber" id="form-checkout__identificationNumber"/>
<select name="installments" id="form-checkout__installments"></select>
<button type="submit" id="form-checkout__submit">Pay</button>
<progress value="0" class="progress-bar">Loading...</progress>
</form>
<!-- </div> -->
Here are the In App Code images!
I use Bootstrap 4.5, where it is possible to check the filling of the form, for example by inserting required.
<input type="text" class="form-control" name="name_1" required>
How can I please check where I need to have input #1 OR input #2 filled in?
<input type="text" class="form-control" name="name_1">
<input type="text" class="form-control" name="name_2">
if you want to check whether the input#1 OR input#2 is filled. I recommend you to write a piece of javascript code to check that. if you are familiar with java script, create a separate javascript file and write a function to validate. or else you can just put a script tag inside the head tag as follows.
Javascript Validation:
<head>
<script>
function validateForm(){
if(document.myform.input1.value == "" || document.myform.input2.value == ""){
alert("Both input1 and input2 should not be empty!");
}
}
</script>
</head>
HTML form:
<form name="myform" method="post" onsubmit="validateForm()" >
Input1: <input type="text" name="input1"><br/>
Input2: <input type="text" name="input2"><br/>
<input type="submit">
</form>
hi am trying to make setinterval work when i submit a form,
this what i have so far
setInterval(function(){ getUsers(); }, 1000);
`document.getElementById("cal").onsubmit =
function getUsers()
{
$.ajax({
url: 'test.php',
type: 'post',
success: function(data) {
$('.htmlelement').html(data);
}
});
}'
html
<FORM id= "cal" NAME="Calc" action="seller.php" method="post"
onsubmit="myFunction()">
<input type="text" name="firstname" value="Mickey"><br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="submit">
</FORM>
I think you have misunderstood how intervals should be wrapped. What you should do is wrap the submit button inside an interval and then make it call your function. You can use this fiddle http://jsfiddle.net/wauzpzdz/1/ for this purpose.
I have a simple AddUser component and in the render function I am returning the following html:
<form ref="form" className="users-form" onSubmit={ this.handleAddNew }>
<input ref="username" type="text" name="username" placeholder="username"
value={this.state.username} onChange={function() {}} /><br />
<input ref="email" type="email" name="email" placeholder="email"
value={this.state.email} onChange={function() {}} /><br />
<button type="submit"> Add User </button>
</form>
I am binding the state of username and email to this.state which I am setting to blank in getInitialState like so:
getInitialState() {
return { username: '', email: '' };
}
I am binding state to the form so I can set it to blank after form submission.
The problem with this setup is that the form now renders as readonly.
I cannot get any user input into either text fields. What am I doing wrong?
Your input fields are controlled components, since you are using the value property. This makes the inputs readonly and they will always reflect the value, the variable (in this case, the state variable) holds. You have to explicitly setState onChange since you are setting username field as a state variable.
Read more about it here
onUserNameChange : function(e){
this.setState({username : e.target.value})
},
render: function(){
return ...
<input ref="username" type="text" name="username" placeholder="username"
value={this.state.username} onChange={this.onUserNameChange} /><br />
...
<button type="submit"> Add User </button>
</form>
}
A better way to do this is :
onChange : function(field,e){
this.setState({field: e.target.value});
},
render : function(){
return <form ref="form" className="users-form" onSubmit={ this.handleAddNew }>
<input ref="username" type="text" name="username" placeholder="username"
value={this.state.username} onChange={this.onChange.bind(this,"username")} /><br />
<input ref="email" type="email" name="email" placeholder="email"
value={this.state.email} onChange={this.onChange.bind(this,"email")} /><br />
<button type="submit"> Add User </button>
</form>
}
It looks like you saw the console warning about controlled fields needing an onChange handler and added one just to shut the warning up :)
If you replace your empty onChange handler functions with onChange={this.handleChange} and add this method to your component, it should work:
handleChange(e) {
this.setState({[e.target.name]: e.target.value})
}
(Or for people not using an ES6 transpiler:)
handleChange: function(e) {
var stateChange = {}
stateChange[e.target.name] = e.target.value
this.setState(stateChange)
}
However, if your component is an ES6 class extending React.Component (instead of using React.createClass()), you will also need to ensure the method is bound to the component instance properly, either in render()...
onChange={this.handleChange.bind(this)}
...or in the constructor:
constructor(props) {
super(props)
// ...
this.handleChange = this.handleChange.bind(this)
}
Alright I could use a small tip here:
I have a form with two buttons, one has to submit the form and the other one has to reset the complete form.
The text - field keeps its value after every submit, but I would like to clear it completely with the reset button
<form method="post">
<input type="text" name="text" value="Clear Me Please">
<button type="submit" name="submit">Submit</button>
<button type="reset" name="reset">Reset</button>
</form>
I have a input field, submit button and a reset button. Upon submiting the form the user input will be inserted as value, because I dont want to lose the input. Now, when I type something into the field I can reset the form as planed, but after submiting the value now stays as supposed, but pressing the reset button resets the input to the value.
Example: I type in "TEXT", press Reset, gets reseted to "". Type "TEXT2", press Submit, gets submited, put in as value, field has now "TEXT2" written in. Replace "TEXT2" with "TEXT3", press Reset, now field contains "TEXT2" instead of "". I hope this is explaination enough.
may a little bit more you have to do
But his may help-Using Jquery
Edited Version:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#btn").on('click', function(e)
{
document.getElementById("myForm").reset();
$('#input').attr("value", "");
});
});
</script>
</head>
<form id="myForm" method="post">
<input type="text" name="input" id="input" value="<?= $_POST['input'] ?>"><br>
<button type="submit">Submit</button>
<input type="button" id="btn" value="Reset">
</form>
Orginal Version:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#btn").on('click', function(e)
{
values= $('#fname').val();
document.getElementById("myForm").reset();
$('#fname').attr("placeholder", values);
});
});
</script>
<head>
<form id="myForm">
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" id="btn" value="Reset form">
</form>
jsfiddle linkhere