I'm new to JQuery and trying to learn more since my work requires me to do a lot of JQuery and AJAX. Now i have this practice project that i use to play around with JQuery and i can't seem to figure out the cause of this problem.
Here's the structure of the website
- index html with an iframe in it containing several buttons
- several html files for each of the iframe
Index.html
<div style="width:750px; height:450px; overflow:hidden; margin: 0 auto; position:relative; margin-top:35px;">
<div id="btn1" style="float:left"> <p> About Us </p> </div>
<div id="btn2" style="float:left"> <p> Objective </p> </div>
<div id="btn3" style="float:left"> <p> Constrains </p> </div>
<div id="btn4" style="float:left"> <p> Modelling </p> </div>
<div id="btn5" style="float:left"> <p> Contact Us </p> </div>
<div id="btn6" style="float:left"> <p> Feedback </p> </div>
<div id="content" style="position:absolute"> <iframe id="main",name="main" frameborder=0 height=450 width=750></iframe> </div>
2.html -- where my textbox resides
<div id="content" style="width: 730px; height: 430px !important;">
<form id="Form_obj", action="index.html", method="post">
<table width="100%" border="1" cellpadding="0">
<tr>
<td>Objective Function:</td>
<td colspan="2"><label id="msg">Your Objective Function</label></td>
</tr>
<tr>
<td></td>
<td align="center", colspan="2"><input type="button", id="Subbutton", value="-", disabled=true><input type="button", id="Addbutton", value="+", disabled=true><input type="submit", value="Submit">
<input type="button", id="Btnclear", value="Clear">
</td>
</tr>
<tr>
<td>Enter Objective Function values:</td>
<td align="right"><input type="text",id="Obj_coef1", name="Obj_coef1", size="5"><input type="text", id="Var_name1",name="Var_name1", size="15"></td>
<td><input type="button", id="Add_var_button", value="Add Variables"></td>
</tr>
</table>
</form>
main.js
$(document).ready(function(){
$("#main").load(function(){
$("#main").ready(function(){
// now read contents
$("#main").contents().find("#Add_var_button").click(function(){
alert("button is clicked");
alert($("#main").contents().find("#Obj_coef1").val());
//alert($("#main").contents().find("#Obj_coef1").val());
//var coef = $("#main").contents().find("#Obj_coef1").val();
//var var_name = $("#main").contents().find("#Var_name1").val();
//var coef_element_name = $("#main").contents().find("#Obj_coef1").getAttribute("name");
//var var_element_name = $("#main").contents().find("#Var_name1").getAttribute("name");
//alert("coef = " + coef);
//alert("var = " + var_name);
//$("#main").contents().find("#msg").text("Jquery changed the text");
//$("#main").contents().find("#msg").append(" appended");
});
});
});
});
Everytime i click the button the alert appears and i can also append text to #msg(label)but for some reason, but when value of the textbox is always undefined even after i changed the value inside the textbox.
What am i missing here?
I figured it out.
Here's my script
var iframe = $("#main");
iframe.load(function(){
iframe.ready(function(){
alert("iframe ready");
// get textboxes and buttons
var btnClear = iframe.contents().find("#Btnclear");
var btnAddVar = iframe.contents().find("#Add_var_button");
var btnAdd = iframe.contents().find("#Addbutton");
var btnSub = iframe.contents().find("#Subbutton");
var msg = iframe.contents().find("#msg");
var obj_coef_input = iframe.contents().find("#Obj_coef1");
var var_name_input = iframe.contents().find("#Var_name1");
btnAddVar.click(function(){
alert("btn add clicked");
btnAdd.prop('disabled',false);
btnSub.prop('disabled',false);
});
btnClear.click(function(){
alert("btn add clicked");
obj_coef_input.prop('value', "");
});
});
});
Oh and don't forget to add $(document).ready(function(){}); to wrap the script
I don't think the find() method is working correctly. I would suggest just using a jQuery selector to get the value. Here's an example:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
var text = $('#blah').val();
alert(text);
})
});
</script>
</head>
<body>
<input type="text" id="blah" /><input type="button" value="button" id="button"/>
</body>
Related
I am trying to create a custom page in powerschool (test server). I have written some piece of code. Actually the problem is that the script is never getting triggered. i was thinking that script will get fired since the password textbox has the keyup event on it. Not sure that i am doing it right. I am new to web pages. Can anyone help?
<!DOCTYPE html>
<html>
<!-- start right frame -->
<head>
<title>Student Information</title>
</head>
<body>
<form id="StudentInformationForm" action="/admin/changesrecorded.white.html" method="POST">
<!-- start of content and bounding box -->
<div class="box-round">
<table border="0" cellspacing="0" cellpadding="3" class="linkDescList">
<colgroup><col><col></colgroup>
<td colspan="2"> </td>
</tr>
<tr class="headerRow">
<td colspan="2" class="bold">-Student Information</td>
</tr>
<tr class="Information">
<td>
<div>
<label>Student Email Address</label>
<input type="text" name="studentEmailAddress" />
</div>
<div>
<label>Student Password</label>
<input type="text" name="studentWebPassword" />
</div>
<div>
<label>Grade</label>
<label name="studentGrade">3<label/>
</div>
<div>
<button name="submit" type="button" disabled>Submit</button>
</div>
</td>
</tr>
</table>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$j(function(){
$j("body").on("keyup","input[name='studentWebPassword']",function(){
var current_password = $j("input[name='studentWebPassword']").val();
var studentGrade = $j("input[name='studentGrade']").val();
var password_valid = true;
var hasNumber = /\d/;
var hasSpeacialCharacters=/^[a-zA-Z0-9- ]*$/;
if(studentGrade>=6) //for the students in Grade 3 to 6
{
//password should be of 5 characters and must contain a number
if (current_password.length<5 && current_password>8 && !hasNumber.test(current_password))
{
password_valid=false;
}
}
if (password_valid && current_password!='') {
$j("#submit").show();
}
});
});
</script>
</body>
</html><!-- end right frame -->
jQuery is never assigned to $j.
You can either replace $j with $ or just add $j = $ in the beginning of the script.
Here's a jsFiddle with the added fix of $j = $
The issue with your script is that you are calling an id that doesn't exist $j("#submit") as <button name="submit" type="button" disabled>Submit</button> doesn't have an id. Additionally the show function doesn't remove the disabled attribute, you will want to use prop('disabled', false).
Here's a jsFiddle with the script fixed and $j = $ fixed as well.
My Code: "edited, added "var" in front of all variable, thanks. I tried removing the <form> but it wouldn't function when I did.
<head>
<title>Calculator</title>
<script language="javascript">
function calculate()
{
var v=parseInt(document.forms[0].txt1st.value);
var w=parseInt(document.forms[0].txt2nd.value);
var x=parseInt(document.forms[0].txt3rd.value);
var y=703;
var z = (v/w/x*y).toFixed(3);
document.getElementById("display").innerHTML=z;
}
</script>
</head>
<body>
<form name="cal" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="txt1st" type="text" id="txt1st"></td>
<td><input name="txt2nd" type="text" id="txt2nd"></td>
<td><input name="txt3rd" type="text" id="txt3rd"></td>
<td>x 703</td>
</tr>
</table>
<button onclick="calculate()">Calculate</button>
<div id="display"></div>
</body>
When I click the "Calculate" button the result displays in the div, but only for a split second then disappears. Keep in mind I'm very new to JavaScript. Any help appreciated, thanks.
You are submitting the form and so the page is refreshing.
Add return false; to the end of your calculate function to prevent the form submission.
I have create a form, and I want to insert image when I click on the button "tester".
This is my code :
<table id="table">
<tr>
<td id="col1">
<form>
<p><label for="text"> your text</label>:<input type="text" id="text"></input></p>
<input type="submit" value="tester" onclick="addImage()" />
</form>
</td>
<td id = "img"></td>
</tr>
</table>
<script>
function addImage(){
document.getElementById("img").innerHTML = "<img src='newWatermark.png'/>"
}
</script>
<style>
#table{width:100%}
#col1{width:50%}
</style>
It's work but just half a time ... And just during a few second ...
I don't understand why
Moreover I think that when I click on the button I refresh the page.
In the URL I have : /watermark.html at the beginning and /watermark.html?your+text= when I click on the button.
But I just want to add an image on the same page. How can I do this?
You submitting Your form.
Change type of input from submit to button.
To avoid page refresh use input type button not submit
function addImage(){
document.getElementById("img").innerHTML = "<img src='newWatermark.png'/>"; //This will overwrite previous image
}
function appendImage(){
document.getElementById("img").innerHTML += "<img src='newWatermark.png'/>"; //This will append image
}
#table{width:100%}
#col1{width:50%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr>
<td id="col1">
<form>
<p><label for="text"> your text</label>:<input type="text" id="text"></input></p>
<input type="button" value="tester" onclick="addImage()" />
<input type="button" value="Append" onclick="appendImage()" />
</form>
</td>
<td id = "img"></td>
</tr>
</table>
I'm looking for some code that will allow me to click a button (Button with value "Next") which will then replace some of the code I have on my page with new code. This is my current code, I need to replace everything after the score counter. Apologies for the sloppy code, I'm pretty new to this.
<body>
<p>Score: <span id="counter">0</span></p><br/>
<p>1) What colour is this?</p><br />
<p><img style= "margin: 0 auto;" src="colour1.png" width="70%"></p><br /><br />
<p><button id="none" onClick="showDiv01()">Almond White</button><br>
<button id="score" onClick="showDiv02(); this.disabled = 'true';">Raspberry Diva</button><br>
<button id="none" onClick="showDiv01()">Melon Sorbet</button><br>
<button id="none" onClick="showDiv01()">Gentle Lavender</button><br></p>
<div id="answer1" style="display:none;" class="wronganswer">✗</div>
<div id="answer2" style="display:none;" class="rightanswer">✓</div>
<p><input type="button" name="next2" value="Next" onClick="showDiv2()" /></p>
</body>
try the below fiddle i am not sure its perfect u want or not but just tried
<body>
<p>Score: <span id="counter">0</span></p><br/>
<div id="div1">
<p>1) What colour is this?</p><br />
<p><img style= "margin: 0 auto;" src="colour1.png" width="70%"></p><br /><br />
<p><button id="none" onClick="showDiv01()">Almond White</button><br>
<button id="score" onClick="showDiv02(); this.disabled = 'true';">Raspberry Diva</button><br>
<button id="none" onClick="showDiv01()">Melon Sorbet</button><br>
<button id="none" onClick="showDiv01()">Gentle Lavender</button><br></p>
</div>
<div id="div2" hidden>
1) What car is this?</p><br />
<p><img style= "margin: 0 auto;" src="colour1.png" width="70%"></p><br /><br />
<p><button id="none" onClick="showDiv01()">abc</button><br>
<button id="score" onClick="showDiv02(); this.disabled = 'true';">def</button><br>
<button id="none" onClick="showDiv01()">rtrt</button><br>
<button id="none" onClick="showDiv01()">xyz</button><br></p>
</div>
<div id="answer1" style="display:none;" class="wronganswer">✗</div>
<div id="answer2" style="display:none;" class="rightanswer">✓</div>
<p><input type="button" id="btn" name="next2" value="Next" onClick="showDiv2()" /></p>
</body>
$('#btn').click( function() {
$("#div1").hide();
$("#div2").show();
});
http://jsfiddle.net/uxyQG/
If you want to replace the text on button click. I checked you button have an onClick="showDiv2()"
So try like this (for an example)
function showDiv2 () {
document.getElementById('counter').innerHTML = ""; //empty the value
}
Here is example fiddle, I have create when you click next the counter will be replaced.
What you want to do here is place all the content you want to replace inside a <div>.
then you will want to give that div an id attribute.
e.g.
<div id="yourID">
HTML CONTENT HERE
</div>
Then in javascript, you would need to create a function that would fire on an onclick event.
Markup:
<input type="button" onclick="changeContent('yourID', '<div>OtherHTML</div>')" value="NEXT" />
when you have these 2 components, you will want to make a script that will execute your function.
<script type="text/javascript">
function changeContent(id, html) {
//Get the element that needs it's contents replaced.
var container = document.getElementById(id);
//insert new HTML onclick.
container.innerHTML = html;
}
</script>
This is a simple example of what you need.
You could externalize this javascript in a seperate file.
If you want to do this, you will need to include the script in the <head> of your html document.
<script type="text/javascript" src="path/to/js.js"></script>
Because this will load before any of the DOM will have been loaded, you will get errors.
To solve this, the new contents of the file will be:
js.js
window.onload = function() {
function changeContent(id, html) {
//Get the element that needs it's contents replaced.
var container = document.getElementById(id);
//insert new HTML onclick.
container.innerHTML = html;
}
}
This should work for you in this scenario.
Hope this helped
‐ Sid
My Code: "edited, added "var" in front of all variable, thanks. I tried removing the <form> but it wouldn't function when I did.
<head>
<title>Calculator</title>
<script language="javascript">
function calculate()
{
var v=parseInt(document.forms[0].txt1st.value);
var w=parseInt(document.forms[0].txt2nd.value);
var x=parseInt(document.forms[0].txt3rd.value);
var y=703;
var z = (v/w/x*y).toFixed(3);
document.getElementById("display").innerHTML=z;
}
</script>
</head>
<body>
<form name="cal" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="txt1st" type="text" id="txt1st"></td>
<td><input name="txt2nd" type="text" id="txt2nd"></td>
<td><input name="txt3rd" type="text" id="txt3rd"></td>
<td>x 703</td>
</tr>
</table>
<button onclick="calculate()">Calculate</button>
<div id="display"></div>
</body>
When I click the "Calculate" button the result displays in the div, but only for a split second then disappears. Keep in mind I'm very new to JavaScript. Any help appreciated, thanks.
You are submitting the form and so the page is refreshing.
Add return false; to the end of your calculate function to prevent the form submission.