I wanted to make a settings page for a Chrome Extension, but the save button doesn't work. The .click() doesn't even activate at all. I put all of my code beneath. Also, do I use the commented out button instead(see below)?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Y.A.Y | Options</title>
<script type="text/javascript" src="/js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="/js/caps.js"></script>
</head>
<body>
<h1>Settings</h1>
<form>
<label>Enabled: </label>
<select id="on">
<option value="on">Yes</option>
<option value="off">No</option>
</select>
</br>
<label>First Letter:</label>
<select id="first">
<option value="on">Capital</option>
<option value="off">Lowercase</option>
</select>
</br>
<label>Change First Letter of Each </label>
<select id="per">
<option value="on">Word</option>
<option value="off">Sentence</option>
</select>
<!--<input id="save" type = "submit" value = "Save"/>!-->
<button id="yayay" type="submit">Save</button>
</form>
</body>
</html>
Javascript
var pretty_fied = false;
var isOn;
var isCapFirst;
var firstLetterPerWord;
getData()
function getData() {
chrome.storage.local.get(function (data) {
isOn = data.isOn;
isCapFirst = data.isCapFirst;
firstLetterPerWord = data.firstLetterPerWord;
})
}
$('form').on('submit', function () {
alert("HI!");
isOn = ($("#on").value == "on");
isCapFirst = ($("#first").value == "on");
firstLetterPerWord = ($("#per").value == "on");
console.log(isOn);
chrome.storage.local.set({
isOn: isOn,
isCapFirst: isCapFirst,
firstLetterPerWord: firstLetterPerWord
});
console.log("Saved");
});
In the form field you should specify the action, in other words what you are doing with the form
Eg.
<form action ='test.php' method="post"></form>
Which will send the form to a file called test.php
In the case though you will want to use jquery submit.
This is an example using the submit function in jquery:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
source: http://www.w3schools.com/jquery/event_submit.asp
notice that the action part is left blank, because you do not wish to send a request to another document.
Related
I'm very new to jQuery. I've been trying to use the .serialize method in jQuery, but I can not seem to garner a response. I've checked console on Microsoft Edge, Internet Explorer, and Chrome but there's no indication of anything happening past connecting to the latest library (3.4.1). My HTML and JavaScript code are below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
</head>
<body>
<form name="ourform" id="ourform" action=''>
<select name="salute">
<option>Mr.</option>
<option>Mrs.</option>
</select>
<br>
First Name: <input type="text" name="firstname"/>
Last Name: <input type="text" name="lastname"/>
<br>
<select name="region" multiple="multiple">
<option>North</option>
<option>South</option>
<option>East</option>
<option>West</option>
</select>
<br>
<textarea rows="6" cols="20" name="comment">
</textarea>
<input type="submit" name="g" value="submit" id="g"/>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
Any help you could provide would be greatly appreciated.
Edit: Since it seems you want to disable the default submit behavior for the button, adding the type="button" attribute removes the need to cancel the default behavior.
When you are including your own javascript within <script> tags you don't need the src attribute (this was causing the 404)
updated jsfiddle
...
<button id="g" name="g" value="submit">Submit</button>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#g').click(function(event) {
//event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
The $ is undefined is caused by jquery failing to load, which is caused by misspelling 'javascript' in
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
You can't include an src attribute and have data in the tag - if you have src, your script tag must be empty.
Simply use two separate ones:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
Here is a short form for selecting language for a webpage, There are two languages one is marathi and another is english actually what I want is like: when a user select english language and submit the form english.html page should open and
when user select marathi language marathi.html page should open.
<html>
<head>
<title>Select Language</title>
<link rel="icon" href="hen.png">
<form>
<center>
<p id="p1">
Language:<select>
<option id="English" >English</option>
<option id="Marathi" >Marathi</option>
</select>
</p>
<input type="submit" id="button" value="Open" >
</center>
</form>
</html>
You can use this as a reference, considering english.html and marathi.html as your targeting pages, you can change them accordingly
<html>
<head>
<title>Select Language</title>
<link rel="icon" href="hen.png">
<script>
$('#button').click(function() {
var selected = $('#language option:selected');
window.location.href = selected + ".html"
})
</script>
</head>
<body>
<form>
<center>
<p id="p1">
Language:
<select id="language">
<option id="English">English</option>
<option id="Marathi">Marathi</option>
</select>
</p>
<input type="submit" id="button" value="Open">
</center>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
I think its obviously, but please do not repeat it at production:
<input type="submit" id="button" onclick="window.locaton.href='lol/'+$('select').val()+'.html'" value="Open" >
Here is easy way;
<select name="forma" onchange="location = this.value;">
<option value="english.html">English</option>
<option value="marathi.html">Marathi</option>
</select>
if you want to create this using simple Javascript then use location.href = "yourPageAddress";
here is the sample code i have written for the same:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript">
function MyFunction(){
var getValue = document.getElementById("language");
//console.log(getValue);
var getIndexValue = getValue.options[getValue.selectedIndex].value;
//console.log(getValue.selectedIndex);
//console.log(getIndexValue);
if(getValue.selectedIndex == 1){
//console.log("English")
location.href = "http://www.google.com";
}
else if(getValue.selectedIndex == 2){
//console.log("Marathi");
location.href = "http://www.yahoo.com";
}
else{
console.log("Wrong Option Selected.");
}
}
</script>
</head>
<body>
Language:
<select name="language" id="language">
<option>Select..</option>
<option value="https://www.google.com" id="english">English</option>
<option value="https://www.yahoo.com" id="marathi">Marathi</option>
</select>
<br>
<button name="submit" id="submit" onclick="MyFunction()">Submit</button>
</body>
</html>
This is just the one way where you can redirect the user to selected page, there are many different ways also to execute the same operation.
You may find some console.log statement marked comment, which was just used for debugging purpose.
basically i have a form which inside that form i have a textbox and a submit button, now what i want is to output text box value into console when a user type something, i found this link https://codepen.io/jnnkm/pen/WxWqwX?editors=1111 which works just perfect but when i copied the html and script code and putted it my editor and ran it trough my browser, it doesn't works at all,
here is how i tried it out:
<!DOCTYPE HTML>
<html>
<head>
<script src="JquerySock.js"></script>
<script>
function postUsernameToServer() {
console.log('executed function')
var username = $("#Registeration_Username_box").val();
console.log(username);
}
$('#Registeration_Username_box').on('input', function() {
console.log('excuted input');
postUsernameToServer();
});
</script>
</head>
<body>
<div id="Registeration_Div" class="Registeration_Div">
<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">
<div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
<input type="text" id="Registeration_Username_box" class="Registeration_Username_box" placeholder="" name="UserName" maxlength="30" />
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="Submit" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" />
</div>
</form>
</div>
</body>
</html>
you can try it yourself too, but it didn't worked for me.
okay i found what the problem was, first i had to specify
$(document).ready(function() {
and then input my ajax code, i mean fully it was suppose to be this way
<!DOCTYPE HTML>
<html>
<head>
<script src="JquerySock.js"></script>
<script>
function postUsernameToServer() {
console.log('executed function')
var username = $("#Registeration_Username_box").val();
console.log(username);
}
$(document).ready(function() {
$('#Registeration_Username_box').on('input', function() {
console.log('excuted input');
postUsernameToServer();
});
});
</script>
</head>
<body>
<div id="Registeration_Div" class="Registeration_Div">
<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">
<div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
<input type="text" id="Registeration_Username_box" class="Registeration_Username_box" placeholder="" name="UserName" maxlength="30" />
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="Submit" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" />
</div>
</form>
</div>
</body>
</html>
now it works perfect!
I use this code for validation:
<html>
<head>
<script>
function validateNew() {
var x1 = document.forms["register"]["firstname"].value;
if (x1 == null || x1 == "") {
alert("Please enter your first name.");
return false;
}
}
</script>
</head>
<body>
<form name="register" method="POST" onsubmit="return validateNew()">
<label id="fname_lbl" class="">First Name
<input type="text" name="firstname">
<input type="submit" value="Submit">
</form>
But I want to do something a little different. I had this code a while back, but I cant remember where I put it. Basically, instead of a pop up window, I want the validate to conditionally trigger code in the html, which will accomplish the goal of preventing the submission, but show, let's say, text above the field that says, in red, "Required Field".
The pseudo-code:
<html>
<head>
<script>
function validateNew() {
var x1 = document.forms["register"]["firstname"].value;
if (x1 == null || x1 == "") {
$trigger = for label id('fname_lbl') class=="require";
return false;
}
}
</script>
</head>
<body>
<form name="register" method="POST" onsubmit="return validateNew()">
<label id="fname_lbl" class="<? $trigger ?>">First Name
<input type="text" name="firstname">
<input type="submit" value="Submit">
</form>
Where the class named "require" will turn the font color of 'First Name' to red.
So on the validation, when the code finds out there is no first name, it then, using a trigger variable, modifies that variable, which is read inside the quotes of 'class'.
I know my pseudo-code is way off. I just remember being able to do something like that a couple years ago.
EDIT
I found that code snip
<head>
<script>
$(document).ready(function (){
$("#b_down").change(function() {
if ($(this).val() < 20 ) {
$("#pmi").show();
}else{
$("#pmi").hide();
}
});
});
</script>
</head>
<body>
<select name="b_down" id="b_down">
<option value=""></option>
<option value="1">1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>
<? if ($row['b_down']<2) { ?>
<span id="pmi" style="display;" class="dropt">PMI:
<? } else { ?>
<span id="pmi" style="display:none;" class="dropt">PMI:
<? } ?>
Basically, on the change event, it either shows or hides a particular input. Not sure how to apply it to my project.
You could use this:
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.normal {
color: #0f0;
}
.required {
color: #f00;
}
</style>
</head>
<body>
<form name="register" method="POST" onsubmit="return validateNew();">
<label id="fname_lbl" class="normal">First Name</label>
<input type="text" name="firstname">
<input type="submit" value="Submit">
</form>
</body>
<script>
function validateNew() {
var x1 = document.forms["register"]["firstname"].value;
if (x1 == null || x1 == "") {
document.getElementById("fname_lbl").className = "required";
return false;
}
}
</script>
This question already has answers here:
jQuery Ajax POST example with PHP
(17 answers)
Closed 7 years ago.
what i am trying is to fetch a data from my php page using javascript,but it seems that the javascript is not working properly.in this when click my submit button the datas should be sent to the action page,but i dont want to go to the php page and the result in php page should be displayed in the intial page(in this at div id:result)
view of the page
enter image description here
this is my index page,this is just example view
register.html
<!DOCTYPE>
<html>
<head>
<title>REGESITER</title>
<script src="script/jquery-1.11.2.min.js" type="text/javascript"></script>
<script>
$("sub").click( function() {
$.post($("#myform").attr("action"),
$("#myform :input").serializeArray(),
function (data) {
$("#res").empty();
$("#res").html(data);
});
$("#myform").submit( function() {
return false;
});
});</script>
</head>
<body>
<form id="myform" action="helper.php" method="post">
FIRSTNAME:<input type="text" name="txtfname" id="fname">
<br><br>
LASTNAME:<input type="text" name="txtlname" id="lname">
<br><br>
AGE:<input type="text" name="txtage" id="age">
<br><br>
<button id="sub">SUBMIT</button>
</form>
<div id="res">Result</div>
</body>
</html>
this is my php file,from where the echoed result is to fetched
helper.php
<?
$fname=$_POST['txtfname'];
$lname=$_POST['txtlname'];
$age=$_POST['txtage'];
$con=mysql_connect('localhost','root','');
if ($con)
{
$db=mysql_select_db('register',$con);
}
if ($db)
{
$q1=mysql_query("insert into regdb(firstname,lastname,age) values('$fname','$lname','$age')",$con);
echo"inserted into database";
}
else
{
echo "error in query";
}
?>
complete working html code:-
<!DOCTYPE>
<html>
<head>
<title>REGESITER</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$( document ).ready(function() {
$( "#sub" ).click(function(event) {
$.post('helper.php',
$("#myform :input").serializeArray(),
function (data) {
$("#res").empty();
$("#res").html(data);
});
});
});
</script>
</head>
<body>
<form id="myform" action="" method="post">
FIRSTNAME:<input type="text" name="txtfname" id="fname">
<br><br>
LASTNAME:<input type="text" name="txtlname" id="lname">
<br><br>
AGE:<input type="text" name="txtage" id="age">
<br><br>
<input type="button" id="sub" value="Enter" />
</form>
<div id="res">Result</div>
</body>
</html>