Javascript set input value when user click button - javascript

Im developing chrome extension. I want to change input value(username) to some text when user click button. But my solution not working. Need advise.
My code is shown below:
<!DOCTYPE html>
<html>
<head>
<META http-equiv=content-type content=text/html;charset=utf8>
<META http-equiv=content-type content=text/html;charset=windows-1254>
<META http-equiv=content-type content=text/html;charset=x-mac-turkish>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>
<script>
$('#target').submit(function() {
alert('something');
return false;
$('#UserName').value('test');
});
</script>
</head>
<body>
<form id="target">
<table>
<tr>
<td>UserName:</td>
<td>
<input type="text" id="UserName" size="20" />
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" id="Password" />
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Login" id="Login" /></td>
</tr>
</table>
</form>
</body>
</html>

Change your submit button from type button to submit from:
<input type="button" value="Giriş" id="Login" />
to:
<input type="submit" value="Giriş" id="Login" />
Also change your JS code from:
$('#target').submit(function() {
alert('uyarı');
return false;
$('#UserName').value('deneme');
to:
$('#target').submit(function() {
alert('uyarı');
$('#UserName').val('deneme');
return false;

Your submit button needs to be of type 'submit'.
So this:
<input type="button" value="Login" id="Login" />
should be:
<input type="submit" value="Login" id="Login" />
Also, the appropriate jQuery function for getting/setting input values is .val().
Lastly, you don't want to return false until the end of the function.
$('#target').submit(function() {
alert('something');
$('#UserName').val('test');
return false;
});
See this working Fiddle.

This is working fine
$('input#Login').click(function() {
$('#UserName').val('test');
return false;
});

jQuery uses the VAL rather than VALUE
in other words
<script>
$('#target').submit(function() {
alert('something');
return false;
$('#UserName').val('test');
});
</script>
and also the FORM is not submitado change the type of input and submit to the adciona FORM METHOD = "POST"

Guys thank you very much. I found. The problem is when you are developing google chrome application you must seperate javascript code from html. Otherwise javascript not work.

Related

Dynamic input fields creation is not working. Why?

Thnaks in advance. I am new in web developing and stuck in one problem. I am creating a form in which I want variable number of input fields. So I have tried to create dynamic input fields creation by taking help of some online sources. I have tried everything I could imagine but the code is not working.
So far I have written this code : index.html
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>Dynamic Add Input Fields</header>
<form name="form1" id="form1">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" id="name" class="form-control name_list"/></td>
<td><input type="button" name="add" id="add" class="btn btn-success" value="ADD"></td>
</tr>
</table>
<input type="button" name="submit" id="submit" value="Submit"/>
</form>
<script type="text/javascript" >
$(document).ready(function () {
var i = 1;
$('#add').click(function () {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="row'+i+'" class="btn_remove" Value="X" /></td></tr>');
});
$('.btn_remove').on('click','.btn_remove',function () {
var button_id = $(this).attr("id");
$("#row"+button_id+"").remove();
});
});
</script>
</body>
</html>
Now when I run this code then the output comes :
Dynamic Add Input Fields
[ Input Fields ] [Add Button]
[Submit Button]
So it soould work like when I click "Add" button then it should add one more input field and a "remove" button beside it.
But if I click the "Add" button, nothing happens, just URL changes.
You need add event handler for each new item
$('#dates').append(
$('<div class="'+classname+'">'+dd+'<br /><span class="month_selector">'+dm+'</span></div>')
.click(function(){
// handle click
})
);
jQuery: adding event handler to just created element

Several submit buttons in a single HTML form

I'll cut to the chase. I wish to have two separate buttons that does two unique functions. However, acquiring data from the same form. The current problem that I'm facing is onSubmit() will always be executed with whatever buttons I attach to the form instead of its own function.
checkUser.js: Acquires username from the input field and tries to match it with the database (Oracle)
Update 1:
I have changed them accordingly. However, pressing Check still forwards me to StaffRegAuth.jsp instead of executing checkUser and then opening a new window.
<form action="StaffRegAuth.jsp" name="form" method="post">
...
<button onClick="return validStaffReg();">Register</button>
<button onclick="return checkUser()">Check</button>
</form>
Update 2:
Updated my checkUser.js as it seems to be the problem
StaffReg.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Staff Registration</title>
<%-- Javascript --%>
<script type="text/javascript" src="JS/validStaffReg.js"></script>
<script type="text/javascript" src="JS/preventSpace.js"></script>
<script type="text/javascript" src="JS/checkUser.js"></script>
</head>
<body>
<%response.addHeader( "Cache-Control", "no-cache"); response.addHeader( "Pragma", "no-cache"); response.addHeader( "Expires", "0"); %>
<h1 align="center"> Account Registration: </h1>
<form action="StaffRegAuth.jsp" name="form" method="post">
<div align="center">
<table style="width = 30%">
<tr>
<td>User Name:</td>
<td>
<input type="text" name="username" onKeyDown="preventSpace(this)">
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="password" onKeyDown="preventSpace(this)">
</td>
</tr>
<tr>
<td>User Group:</td>
<td>
<select name="userGroup">
<option value="1">Administrator
</optin>
<option value="2">Clerk
</optin>
<option value="3">Operations
</optin>
<option value="4">Sales
</optin>
</select>
</td>
</tr>
<tr>
<td>
<button onClick="return validStaffReg(form)">Register</button>
</td>
<td>
<button onClick="return checkUser(form)">Check</button>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
validStaffReg.js
// JavaScript Document
function validStaffReg(form) {
if (document.form.password.value == "" && document.form.username.value == "") {
alert("Please enter a Password and Login ID.");
document.form.password.focus();
return false;
}
if (document.form.username.value == "") {
alert("Please enter a Login ID.");
document.form.username.focus();
return false;
}
if (document.form.password.value == "") {
alert("Please enter a Password.");
document.form.password.focus();
return false;
}
return true;
}
checkUser.js
function checkUser(form) {
if (document.form.username.value != "" || document.form.username.value != null) {
var myWindow = window.open("checkUser.jsp", "MsgWindow", "width=200, height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");
document.form.username.focus();
return false;
}
return true;
}
Don’t use submit.
I.e., don’t use <input type="submit">.
Instead, make two separate buttons and call different functions onclick. Mind you that you can still get the form values.
I.e.,
<button onclick="return reqfunc()">
Use return, and now you can use the function. If you want to return to the form back without going to the next page then just return false in the JavaScript code.
Use <button onclick='YourFunction()'>Button Text</button>.
One of the tricks I use regularly is something like the following.
<form action="submit.jsp">
<button type="submit" name="submit_form" value="1" class="hiddenSubmit">Submit</button>
...
<button type="submit" name="clear_form" value="1">Clear</button>
<button type="submit" name="submit_form" value="1">Submit</button>
</form>
By giving the buttons different names, you can have the form do whatever processing is consistent and let the server manage any button-specific processing. Of course, you can also attach event handlers to the separate buttons.
Why does it have two [name="submit_form"] buttons? The first one has a class that you would style to make it active yet invisible (e.g., position: absolute; top: -1000px; left: -1000px) so that a keyboard <Enter> will fire that button instead of the other button[name="clear_form"].

changing page in HTML

I wanted to set up a JS when users press the button, it would redirect them to the homepage, which called index.html
<form method="confirm" style="width: 500px; height: 300px; margin-left: auto; margin-right: auto; margin-top:100px; margin-bottom: 100px; font-size: 30px; color: black;">
<fieldset id="confirm">
<legend>NOTIFICATION</legend>
<table>
<tr>
<td>
<h1>THANK YOU FOR SIGNING IN</h1>
</td>
</tr>
<td>
<input type="submit" value="Return to homepage" onclick="return return1();">
<script>
function return1()
{
window.location.href = 'index.html';
}
</script>
</td>
</tr>
</table>
</fieldset>
</form>
There are some mistakes here.
The error you get is because you use a submit input button inside a form and the button will try to evaluate your form submission. To prevent that you have to return false on your function.
<script>
function return1()
{
window.location.href = 'index.html';
return false;
}
</script>
But if you want to do a button that simply will redirect to another page you should not use a form and a submit button but just a normal input button
<input type="button" value="Return to homepage" onclick="return1();">
If you want to use the form because you want to evaluate some data you need to put your page on the <form> in the action field, without using the script
Also confirm is not accepted you should use GETor POST.
<form method="POST" action="index.html">
Add return false to the function to disable the default event on submit(page refresh)
function return1()
{
window.location.href = 'index.html';
return false;
}
The following code redirects me to index.php which sits at the same level as index.html and index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="check.php" method="post" id="re">
<fieldset id="confirm">
<legend>NOTIFICATION</legend>
<table>
<tr>
<td>
<h1>THANK YOU FOR SIGNING IN</h1>
</td>
</tr>
<td>
<input type="submit" value="Return to homepage">
</td>
</tr>
</table>
</fieldset>
</form>
<script src="index.js"></script>
</body>
</html>
The JS file
function _x(elem){
return document.getElementById(elem);
}
var x = _x("re");
x.onsubmit = function(e){
e.preventDefault();
window.location = "index.php";
}
simply change your input type submit to button
<input type="button" value="Return to homepage" onclick="return return1();">
Replace
window.location.href = 'index.html';
with:
window.open('INDEX.HTML');
You change code
<input type="submit" value="Return to homepage" onclick="return return1();">
=> Return to homepage
With you type css ".btn" see like a button
Note : In form, you should not put or to redirect without submit form.
This may help you
<script language="javascript">
function return1()
{
window.location="yourpage.html";
}
</script>

Redirection error from one page to another in html and javascript?

Hi guys i have a following code in which i am trying to redirect to another ,i am using javascript html to achieve this,and i am new to html, javascript and php. It is showing test.phpbut as i click on button it does not redirect to logout_success.php.
<!DOCTYPE HTML>
<html>
<head>
<title>Sign-In</title> <link rel="stylesheet" type="text/css" href="style-sign.css">
</head>
<body id="body-color">
<div id="Sign-In">
<fieldset style="width:30%">
<legend>LOG-IN HERE</legend>
<form method="POST" action="connectivity.php">
User
<br>
<input type="text" name="user" size="40">
<br>
Password
<br>
<input type="password" name="pass" size="40"><br>
<input id="button" type="submit" name="submit" value="Log-In" onclick="document.location.href='http://localhost:8080/PortalWork/logout_success.php'">
</form>
</fieldset>
</div>
</body>
</html>
There are two ways.
(1) Submit form with AJAX, and redirect with window.location.href
$("#form1").submit(function(e){
e.preventDefault();
$.ajax({
url:'connectivity.php',
method:'POST',
success:function(rs){
if( rs == "success" )
window.location.href("logout_success.php");
},
error:function(){
alert("Error");
}
});
return false;
});
http://jsfiddle.net/hxm49uk2/
(2) Submit to server, and redirect with header("Location:page.php");
connectivity.php
header("Location:logout_success.php");
You can do it in JS like this:
<button name="button" onclick="window.location.href='http://www.google.com'">Go</button>
Instead of http://www.google.com use your desired url.
Just include the following code in connectivity.php
header("Location:logout_success.php"); // give the correct path of logout_success.php
And take off onclick from form submit button
<input id="button" type="submit" name="submit" value="Log-In">

Submitting form after changing input by jQuery

I got HTML like this:
<table>
<form action=\'food.php\' method=\'POST\'>
<tr><h4>
<td><span><input type="submit" name="food_edit" class="food_edit" value="Edytuj" /></span></td>
</h4>
</tr>
</form>
</table>
And then a function in jQuery which change input field:
wrap.find('.food_edit')
.replaceWith('<input type=\'submit\' name=\'food_edit_confirm\' value=\'Potwierdź\' />');
My problem is that after change submitting button, send form doesn't work.
you may try this after replacement of submit button:
$('form').on('click','input[type=submit]',function(){
//rest of code goes here.
});
you either need to use $( document ).ready() around the particular jquery code or u can try and use the .attr to change the attribs of your class or u can use 'focus' to wrap around it. or u can do something like
$('form').live('submit',function(){
// do the rest of ur code and then submit it....
});
You have invalid HTML. It should look like this:
<form action=\'food.php\' method=\'POST\'>
<table>
<tr>
<td>
<span>
<input type="submit" name="food_edit" class="food_edit" value="Edytuj" />
</span>
</td>
</tr>
</table>
</form>
If you're looking to add a confirmation you should look into the onsubmit="" in the <form> tag.
Example:
<form action=\'food.php\' method=\'POST\' onsubmit=\'return checkForm();\'>
<table>
<tr>
<td>
<span>
<input type="submit" name="food_edit" class="food_edit" value="Edytuj" />
</span>
</td>
</tr>
</table>
</form>
JS Code:
function checkForm() {
return confirm("Submit this form?");
}
<script type="text/javascript">
$(function(){
$('.food_edit').replaceWith("<input type='submit' name='food_edit_confirm' value='Potwierdz' onclick='document.getElementById(\"submit\").click();' />");
});
</script>
<form action='food.php' method='POST'>
<input type="submit" name="food_edit" class="food_edit" value="Edytuj" onclick="document.getElementById('submit').click();" />
<input type="submit" style="display:none" id="submit" />
</form>
The hidden button always do submit the form regardless you do anything with the submit button which is replacable.

Categories

Resources