I have below frontend for the default popup of my chrome extension.
<form class="first-time-flow__form fullwidth">
<h1 class="textaligncenter">Welcome</h1>
<div class="first-time-flow__textarea-wrapper">
<label>Password (min 8 chars)</label>
<input type="password" class="first-time-flow__input passwordinput" id="newpassword" />
</div>
<button type="button" class="btn btn-primary loginpassword savePKbutton" id="btnlogin" disabled>Login</button>
</form>
I want that after the password is entered when the user will hit the enter key the submit button should be fired and the popup should be changed. I tried the following:
$(document).ready(function() {
$("#newpassword").keypress(function(event) {
if(e.keyCode==13){
$('#btnlogin').click();
}
});
$('#btnlogin').on('click',function(){
var password = $('#newpassword').val().trim();
if(password.length >= 8){
localStorage.password = password;
chrome.browserAction.setPopup({
popup:"login.html"
});
window.location.href = 'login.html';
}
});
});
This functionality works fine in the background without any error, the popup is also set to login.html but frontend is not getting changed. When I close and open chrome extension, the set popup login.html is shown. As the normal functionality works fine if user clicks submit button manually.
**Page <input type="text" id="page#" value={{Page_id}} style="width:50px; display:inline-block" > out of {{total}}
<input type="button" class="btn btn-outline-success" onclick="getDirection()" value="Go" style="display:inline">
<script>
function getDirection(){
var input = document.getElementById("page#").value;
var new_id ="http://159.203.172.178/page/{{current_page.id_tei}}" ;
new_id = new_id.slice(0,-3);
new_id = new_id+input;
console.log(new_id);
window.location=new_id;
}
**
Hello, I am new to javascript. I am trying to make my django application take input from users and turn to the page based on their input. Right now, it works when I click on the button "Go". Is there a way I can make it work when I hit Enter key as well? I tried to use EventListener, but it tells me EvetListener is not a function. Great thanks.
You can make it a form and have the function be called 'onSubmit'.
(I know the questions is a bit long but I do believe solution is easy, so would really appreciate it if someone can help me have a look)
I am trying to write a school system, where you can enter a student's name, year, grade, on a webpage, and save the student's info to produce a list. I would like it to have two "buttons" on the webpage:
One is "save and next", i.e. if you finished entering one student info, click this, the info get saved and the webpage renew to enter the next student info.
Second is "save and finish", i.e. if this is the final student you want to enter, click this and the last student info get saved, and webpage is redirected to the next page where it shows a list of all student info.
To achieve this, in JSP, I used two HTML forms, and one of them I used javascript to try to submit to servlet, But I must have done something wrong because it does not work properly:
Here are my codes:
InputGrade.jsp:
<html>
<head>
<title>Title</title>
</head>
<body>
The first form: used input labels for users to enter info, also used input label to create a submit button "save it next":
<form action = "InputGradeServlet" method="POST">
<table>
<tr>
<td>
Enter Student Name: <input type="text" id="stName" name = "stName" />
</td>
<td>
Enter Subject: <input type="text" id="Subject" name = "Subject" />
</td>
<td>
Enter Grade: <input type = "text" id="Grade" name = "Grade" />
</td>
<td>
<input type="submit" value="save and next"/>
</td>
</tr>
</table>
<input type="text" name = "flag" style="display: none" value="1"/>
</form>
The second form include the "save and finish" button, but use javascript to submit the information: (I think where the problem is)
User still enter student info in the first form, but the javascript function use getElementById function to acquire the info in first form
<form name="form2" action ="InputGradeServlet" method="POST" >
<input type="text" name = "flag" style="display: none" value="2"/>
<button onclick="finSaveFunc()">Finish and submit</button>
<script>
function finSaveFunc() {
var stName = document.getElementById("stName")
var Subject = document.getElementById("Subject")
var Grade = document.getElementById("Grade")
document.stName.submit();
document.Subject.submit();
document.Grade.submit();
}
</script>
And in the Servlet, a list created to add the students the user entered
public class InputGradeServlet extends HttpServlet {
List<Student> inputStList = new <Student>ArrayList();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
if user press "save and next" button, form one is submitted, and servlet do the action of saving student to the list and redirect to the same JSP file i.e. redirect the the same webpage again of entering the next student:(also might be problematic)
if (request.getParameter("flag").equals("1")) {
request.getParameter("Grade");
...... (get other info: name, year ect)
inputStList.add(findstudent); //add student entered to the list
response.sendRedirect("InputGrade.jsp");
}
}
}
If user press "save and finish", i.e. submitting the second form, and servlet again add the final student entered to the list and redirect to the next webpage showing the whole list:
}else if (request.getParameter("flag").equals("2")) {
request.getParameter("Grade");
....
inputStList.add(findstudent);
request.getSession().setAttribute("inputStList",inputStList);
response.sendRedirect("ShowList.jsp"); }
This is where it gets problematic: when submitting the first form hitting "save and next" button it works fine, but when submitting the second from hitting "save and finish" button, it returns error.
Therefore I would really appreciate it if some can help me have a look?
There are many reason that's why you can get a NullpointerException.
Rule of Thumbs : If you want to compare a string then first check if it is not null.
According to your requirement I am giving a solution that how can you do that.
Suppose your form be like:
<html>
<head>
<script>
function _submit(flagVal) {
document.getElementById('flagValId').value=flagVal;
document.getElementById('someFormId').submit();
}
</script>
</head>
<body>
<form action = "InputGradeServlet" method="POST" id="someFormId">
<table>
<tr>
<td>
Enter Student Name: <input type="text" id="stName" name ="stName" />
</td>
<td>
Enter Subject: <input type="text" id="Subject" name = "Subject" />
</td>
<td>
Enter Grade: <input type = "text" id="Grade" name = "Grade" />
</td>
<td>
<input type="button" value="save and next" onclick="_submit('1')"/>
<input type="button" value="save and exit" onclick="_submit('2')"/>
</td>
</tr>
</table>
<input type="hidden" id="flagValId" name = "flag" value=""/>
</form>
</body>
</html>
Now when you click save and next button, then it set flagVal 1 and if we click save and exit button then it sets flagVal 2. After setting the flagVal it submits the form. After submitting your from you should check first that what is your flagVal. So in doPost method
if (request.getParameter("flag")!=null && request.getParameter("flag").equals("1")) {
//Add your student in this block and show the input page again.
response.sendRedirect("InputGrade.jsp");
}else if (request.getParameter("flag")!=null && request.getParameter("flag").equals("2")) {
//Add your student in this block and show the list.
response.sendRedirect("ShowList.jsp");
}
Hope that helps.
You don't get form1 values. You post form2 values so you get null error.
Try it please:
function finSaveFunc() {
var stName = document.getElementById("stName")
var Subject = document.getElementById("Subject")
var Grade = document.getElementById("Grade")
var newForm = document
.getElementById("form2")
.appendChild(stName)
.appendChild(Subject)
.appendChild(Grade);
newForm.submit();
}
I have a search bar in my header. I did a validation test on it that if it is empty and the user presses the "Search" button then it should display a dialog box saying to "Write the product name". This validation works However on a couple of pages I have a search option that lets the user enter the price range for which he/she wants to see the products. They both are distinct and two different forms but for some odd reason when I put validation on the price range form, the validation skips that and displays the same "Write the product name" dialog box and highlights the search bar red which it shouldn't do at all. What can be the reason for it?
Here's the code for the search bar validation and form
<script>
function checkforblank()
{
if(document.getElementById('search').value == "")
{
alert('Please type a product name first');
document.getElementById('search').style.borderColor = "red";
return false;
}
}
</script>
<form action ="http://localhost/MyOnlineStoreOwn/product_search_result.php" method="post">
<input type ="text"name="search" id = "search" placeholder="Search for products..." align="right" />
<input type="submit" value="Search" />
</form></td>
Here's the code for price range search box and form
function checkforblank()
{
if(document.getElementById('price1').value == "")
{
alert('Please enter price first');
document.getElementById('price1').style.borderColor = "red";
return false;
}
if(document.getElementById('price2').value == "")
{
alert('Please enter price first');
document.getElementById('price2').style.borderColor = "red";
return false;
}
}
</script>
<form action="http://localhost/MyOnlineStoreOwn/product_list_priceSearch.php" onsubmit="return checkforblank()" method="post">
$<input name="price1" type="text" id="price1" size=8 />
to <br/>
$<input name="price2" type="text" id="price2" size=8 /> <br>
<input type="submit" name="sprice" value="Go" >
</form>
UPDATE:
if(isset($_GET['deleteid']))
{
echo 'Do you really want to delete this item with ID of ' .$_GET['deleteid']. '? Yes | No';
exit(); // doesn't render the whole page, only prompts the question script.
}
how do I make a dialog box to ask the "Do you really want" part and if the user selects yes it does: Yes
and he/she selects no then it does this:
I was having trouble writing the part inside of an echo statement because of the "" or ''..how do i write the correct syntax for echo "alert('Are you sure Y/N'); if yes do this and if no do this?
You cant have two functions on the same name. Might be you are getting the alert because the search script is loaded first.
For form validation, you need to write your code is another format. check this from w3 schools.
Try different function names.
I am creating a form which allows people to enter a video url. Standard input form, to accept a URL like:
http://video.google.com/videoplay?docid=1299927595688205543
I would like to add a button (within the form, which says something like [preview video]). Basically that button/link appends the link they entered into the input field, to this code:
<a href="http://video.google.com/videoplay?docid=1299927595688205543&lightbox[width]=610&lightbox[height]=360" class="lightbox">google video</a >
This is to be available prior to form submission.
<form id="video_upload_form" action="">
<label for="video_input_box">Video URL</label>
<input type="text" id="video_input_box" value="" />
<input type="submit" value="Add Video" />
</form>
<p>Preview Video</p>
<script type="text/javascript">
$().ready(function(){
$('#video_upload_form').submit(function(){
var video_url_params = '&lightbox[width]=610&lightbox[height]=360';
var video_url = $('#video_input_box').val() + video_url_params;
$('#video_preview').attr('href', video_url);
return false;
});
});
</script>
Also here it is as a JSFiddle: http://jsfiddle.net/Treffynnon/CEMpT/
You will need to do some validation on the URL supplied by the user before putting it into the preview link, but I will leave that part up to you as you have not asked for help with it in your question.