Hi all, please anyone who knows and can help me with my problem. As you can see. I have a html where there are 2 buttons. (one hidden and one visible) This happens with the style tag and with the javascript in the body which switch the forms that are included in the divs. Until this point everything works great. But I want a 2nd javascript on the head which takes the form1 or form2 and then wokrs in a way to show the result of different php files inside the page(without refreshing or going to another page) This script in a simple page(without the first javascript which switches the cases) works totally fine and show the results inside the same page.
But what is happening with that? I am feeling desperate. Where is the point that prevent javascript function (head) from working?? Really, please help me guys!!
<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
/ Document ready function of jquery. /
$(document).ready(function(){
$("#form1").submit(function(){
var str = $(this).serialize();
$.post("new5.php",
str,
function(data,status){
$("#mydata").html(data);
$("#mydata").show();
/$("#mystatus").html(status);
$("#mystatus").show();/
}
)
})
$("#form2").submit(function(){
var str = $(this).serialize();
$.post("factoryquery.php",
str,
function(data,status){
$("#mydata").html(data);
$("#mydata").show();
/$("#mystatus").html(status);
$("#mystatus").show();/
}
)
})
}
);
</script>
</head>
<style type="text/css">
.hidden {
display: none;
{
.visible {
display: block;
}
</style>
<button id="query1_Btn">View Query 1</button>
<button id="query2_Btn">View Query 2</button>
<div class="visible" id="query1">
<form id ="form2" method="post" action="javascript:void(0);">
Factories with greater productivity:
<input name="count" type="radio" value="0" checked >At least one product
<input name="count" type="radio" value="1">More than one
<input name="count" type="radio" value="2">More than two
<br>
<p><input type ="submit" value="Submit"</p>
</div>
<div class="hidden" id="query2">
<form id="form1" action="javascript:void(0);" method="post">
Query2
<input type="text" name="user" placeholder="enter a text" />
<input type="submit" value="submit" />
</form>
</div>
<script type="text/javascript">
var query1Div = document.getElementById('query1');
var query2Div = document.getElementById('query2');
var query1Btn = document.getElementById('query1_Btn');
var query2Btn = document.getElementById('query2_Btn');
query1Btn.onclick = function() {
query2Div.setAttribute('class', 'hidden');
query1Div.setAttribute('class', 'visible');
};
query2Btn.onclick = function() {
query1Div.setAttribute('class', 'hidden');
query2Div.setAttribute('class', 'visible');
};
</script>
</body>
</html>
