Import Jquery into codeigniter 2.X - javascript

I'm trying to import Jquery into codeigniter 2.X without exit. I put the link to the library and I saw in the debugger that it load it without errors, but , when I use the Docuemtn ready function it doesn't work. Can anybody help me?
This is the code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="javascript">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
<title>Hardware Deal</title>
</head>
<body>
<div id='header'>
<h1> Hardware deal </h1>
</div>
<div id='body'>
<form action='' method = 'post'>
Customer Name:<input type='text' name='Cname' id='CName'/><br>
Adress:<input type='text' name='CAddress'/><br>
Existing Customer? yes<input type='radio' name='existing' value='yes'> no<input type='radio' name='existing' value='no'><br>
Printer Contition: <select name='PCondition'/>
<option value=''></option>
<option value='New Press'>New Press</option>
<option value='Second Hand'>Second Hand</option>
</select>
</form>
Link
</div>
</body>

You're missing the http: from the source of the first script. Change the first script tag to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
The type of the second script tag is wrong. Change the second script to:
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>

Related

Why am I not getting a response from serialize()?

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>

Open window which user select language

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.

field enable disable javascript not working

I have two radio button, and I want to show some value on my html page according to value which a user selects in the radio button.
my html file:
<form action="">
<input type="radio" name="calenders" value="calendar_details_b2b">B2B
<br>
<input type="radio" name="calenders" value="calendar_details_b2c">B2C
</form>
<div id="calendar_details_b2c" >
content of B2C
</div>
<div id="calendar_details_b2b">
content of B2B
</div>
here is the JS fiddle which is working fine: https://jsfiddle.net/0b0xp5xm/9/
Now when I change the Id's , it is not working, https://jsfiddle.net/vjLnou8h/1/
EDIT
I have added this code in my rails application _form.html.erb which i am rendering on new.hrml.erb page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('input[type=radio][name=calenders]').change(function () {
$('#calendar_details_b2b').css("display","none");
$('#calendar_details_b2c').css("display","none");
console.log($(this).val());
var fieldToShow = $(this).val();
$("#" + fieldToShow).css("display","block");
});
});
</script>
But It is still not working.
Once you add the JQuery reference, it works just fine.
https://jsfiddle.net/vjLnou8h/2/
<html>
<head>
<style>
#data_Analysis,
#study_Design {
display: none;
}
</style>
</head>
<body>
<form action="">
<input type="radio" name="calenders" value="study_Design">B2B
<br>
<input type="radio" name="calenders" value="data_Analysis">B2C
</form>
<div id="study_Design">content of B2B</div>
<div id="data_Analysis" >content of B2C</div>
<!-- It's generally better to put your scripts just before the <body> tag closes
because by the time the browser gets that far, the DOM has been read. Also,
it can speed up page load times. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('input[type=radio][name=calenders]').change(function () {
$('#study_Design').css("display","none");
$('#data_Analysis').css("display","none");
console.log($(this).val());
var fieldToShow = $(this).val();
$("#" + fieldToShow).css("display","block");
});
</script>
</body>
</html>

Display calendar format for date

Script for date
<link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#ui-datepicker').datepicker();
});
</script>
View
<form method="post" action="">
<select class='form-control' name='route_to' id='member' onchange='selectPackage()'>
<option value='packageSelect'>SELECT PACKAGE OPTION ....</option>
<option value='manakamanaPackage'>Mana</option>
</select>
<div id="displayForm3">
</div>
<script type="text/javascript">
function selectPackage() {
if (document.getElementById("member").value == "manakamanaPackage") {
document.getElementById("displayForm3").innerHTML = "<input type='text' id='ui-datepicker' class='form-control' />";
}
}
</script>
Explanation
If we use type="date" in the input field then it works only in google chrome browsers.
That's why to display calendar for all browsers we defined the script with id='ui-datepicker' , it works fine if we use for input field which will be normal input tag (such as :: < input type="date" />.
But it does not work for input field which is displayed inside of javascript function {selectPackage() as displayForm3}
The issue is because you're appending the element after the DOM loads. You need to instantiate the datepicker library on the new element, right after you create it. Try this:
<form method="post" action="">
<select class="form-control" name="route_to" id="member">
<option value="packageSelect">SELECT PACKAGE OPTION ....</option>
<option value="manakamanaPackage">Mana</option>
</select>
<div id="displayForm3"></div>
</form>
<script type="text/javascript">
$(function() {
$('#member').change(function() {
if (this.value == 'manakamanaPackage') {
$('#displayForm3').html('<input type="text" id="ui-datepicker" class="form-control" />');
$('#ui-datepicker').datepicker();
}
});
});
</script>
Note that I also amended your code to use an unobtrusive event handler as the on* event attributes are now considered outdated.

HTML form select option triggers text field

I'm trying to get a text field to appear when the user selects a certain option in a form select. I found exactly what I need at http://jsfiddle.net/0ak3b3z1/
However, when I copy this exact code into an html document, it doesn't work. Can anyone tell me where I'm going wrong.
Here is the HTML code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
$('#industry').on('change',function(){
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#SaaSMeetings").toggle($(this).val()=="SaaS");
});
</script>
</head>
<body>
<label for="">Industry?</label>
<select id="industry">
<option value="Telesales">Telesales</option>
<option value="Media">Media/Advertising</option>
<option value="SaaS">SaaS</option>
<option value="Insurance">Insurance</option>
<option value="Automobile">Automobile</option>
</select>
<!-- Show Metric Input based on Industry Selection -->
<input type="text" id="telesalesCalls" placeholder="How many calls?" style="display:none">
<input type="text" id="SaaSMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="MediaMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="InsuranceCalls" placeholder="How many calls?" style="display:none">
</body>
</html>
Need to include jQuery. Plus you must place the javascript at end (after DOM elements are defined).
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<label for="">Industry?</label>
<select id="industry">
<option value="Telesales">Telesales</option>
<option value="Media">Media/Advertising</option>
<option value="SaaS">SaaS</option>
<option value="Insurance">Insurance</option>
<option value="Automobile">Automobile</option>
</select>
<!-- Show Metric Input based on Industry Selection -->
<input type="text" id="telesalesCalls" placeholder="How many calls?" style="display:none">
<input type="text" id="SaaSMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="MediaMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="InsuranceCalls" placeholder="How many calls?" style="display:none">
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
$('#industry').on('change', function () {
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#SaaSMeetings").toggle($(this).val() == "SaaS");
});
</script>
</body>
</html>
The dollar sign is used with the jquery library, and you're not including this library.
So just add jquery library before the js code.
Just Include this code:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
You need to include this line in your code.
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'> </script>

Categories