.click() function doesn't work javascript / jquery - javascript

UPDATE:
Somehow the just work fine after I tried it..
UPDATE
I'm using .click() function on my javascript, but it doesn't work.
Here is my JS code:
src="jquery.js";
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
var institutionID, acadCareerID;
$(document).ready(function(){
getInstitution();
institutionID = $( "select#institution option:checked" ).val();
if(institutionID == null){
institutionID = 1;
}
getAcadCareerByInstitution(institutionID);
acadCareerID = $( "select#acadCareer option:checked" ).val();
if(acadCareerID == null){
acadCareerID = 1;
}
getPeriodByAcadCareerAndInstitution(acadCareerID);
getDepartmentByAcadCareer(acadCareerID);
$("select#institution").change(function(){
institutionID = $( "select#institution option:checked" ).val();
getAcadCareerByInstitution(institutionID);
})
$("select#acadCareer").change(function(){
acadCareerID = $( "select#acadCareer option:checked" ).val();
getPeriodByAcadCareerAndInstitution(acadCareerID);
getDepartmentByAcadCareer(acadCareerID);
})
$("div#search").click(function(){
alert("The paragraph was clicked.");
console.log("abc");
});
});
all functions like getInstituion(), getAcadCareerByInstitution(institutionID) etc are ajax call.
Here is my HTML code:
<form action="doInsertSchedule" method="POST" enctype="multipart/form-data">
{{csrf_field()}}
<div class="form-group">
<label for="institution">Institution</label>
<select name="institution" class="form-control" id="institution">
</select>
</div>
<div class="form-group">
<label for="acadCareer">Academic Career</label>
<select name="acadCareer" class="form-control" id="acadCareer">
</select>
</div>
<div class="form-group">
<label for="period">Period</label>
<select name="period" class="form-control" id="period">
</select>
</div>
<div class="form-group">
<label for="department">Department</label>
<select name="department" class="form-control" id="department">
</select>
</div>
<div class="form-group">
<label for="date">Deadline Date</label>
<input type="date" class="form-control" id="deadline" placeholder="Deadline Date" name="deadline">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<div id="search" class="btn btn-default">Search</div>
</form>
I already put jquery for my Master Layout (Laravel 5)
<head>
<link rel="stylesheet" type="text/css" href="{{url()}}/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{url()}}/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="{{url()}}/js/tools.js"></script>
<script src="{{url()}}/js/bootstrap.min.js"></script>
<title>BINUS - #yield('title')</title>
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
I want the Search Button / Div to do something when I click. I can't see what's wrong here.
I already tried <div> to <button> but it just will work like submit. I also already tried to put event.preventDefault() at my JS code, but it didn't work too.

Maybe you can try with event delegation...
$(document).ready(function(){
$("body").on("click", "#search", function(){
alert("The paragraph was clicked.");
console.log("abc");
});
});

You code works OK. You need to write the jquery library in the final, just before of </body>
...
<script type="text/javascript" src=".../jquery.js"></script>
</body>
Example it works ok!: Example Jsfiddle

<button type="submit" class="btn btn-default">Submit</button>
<div id="search" class="btn btn-default">Search</div>
This looks like it will render on the page as two buttons. Your ID here is attached to the div, not to the button, they should both appear to look like buttons providing bootstrap is loaded, but only the div with "search" as the content will do anything.
This is the only thing that appears odd, the only other problem is you are not loading your jquery as stated elsewhere.

I don't have the reputation to comment, but have you added a jquery library before your script?
Secondly, if you did and the items on the page are loaded after the document has loaded you will need to change your code up, for instance:
Give your form an id
<form action="doInsertSchedule" method="POST" enctype="multipart/form-data" id="postForm">
Then in your jquery script
<script>
$('#postForm').on('click', '#search', function(){
alert("The paragraph was clicked.");
console.log("abc");
});
</script>
The above will allow the javascript to run on items that are bought in after document load, however it is important you set it on a parent element that is avaiable at document load

Related

JQuery on('click') does not work when clicked

So I'm currently working on this project and I am stuck this problem. I tried looking at the console but it doesn't show anything when I clicked the button. What I'm trying to do is when I click the button, it will trigger the file input, but so far, when I clicked it, nothing happens, not even an error is shown.(The code is based on the answer in this question: Bootstrap form upload file layout) Can you guys help me find out what I did wrong
These are the codes
TabUploadDokumen.html
<script>
$(document).ready(function () {
/* Some code here */
});
$('#btn_IdentitasKTP/Paspor').on('click', function () {
$('#file_IdentitasKTP/Paspor').trigger('click')
});
$('#file_IdentitasKTP/Paspor').change(function () {
var file_name = this.value.replace(/\\/g, '/').replace(/.*\//, '');
$('#text_IdentitasKTP/Paspor').val(file_name);
});
</script>
<!--Some other code -->
<div class='form-group'>
<label class='control-label'>Nama Dokumen<br /><span style='font-weight:normal;'>Silahkan scan/foto dokumen Anda disini</span></label>
<div class='form-group'>
<label for="text_IdentitasKTP/Paspor" id="lbl_IdentitasKTP/Paspor" class="control-label">Identitas(KTP/Paspor)</label>
</div>
<div class="input-group">
<input type="file" id="file_IdentitasKTP/Paspor" name="name_file_IdentitasKTP/Paspor" accept="image/jpg,image/jpeg,application/pdf,image/png" style="display: none" />
<input type="text" class="form-control" id="text_IdentitasKTP/Paspor" readonly />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btn_IdentitasKTP/Paspor">Upload KTP/Paspor</button>
</span>
</div>`
</div>
<!-- Some other code -->
I'm using ASP.NET MVC 5 and Bootstrap version 3.00 and Jquery version jquery version 1.11.1 if it is any help.
Thanks in advance
Your selectors contain forward slashes that need to be escaped like this:
$("#btn_IdentitasKTP\\/Paspor'")
Ensure that your jQuery code is sat within your document.ready() function.
Escape the selectors that contain forward slashes (click here for more)
I would also replace
$('#btn_IdentitasKTP/Paspor').on('click', function () {
with
$('document').on('click','#btn_IdentitasKTP\\/Paspor', function () {
The on('click') function needs to run in the $(document).ready function, otherwise it will run before the DOM is ready and won't find the element it's supposed to bind to.
$(document).ready(function () {
$('#btn_IdentitasKTP\\/Paspor').on('click', function () {
$('#file_IdentitasKTP\\/Paspor').trigger('click')
});
});
(And escape the slashes as suggested in another answer)
it doesn't work because script tag is render before the html elements. it will work if you change the code as below,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Some other code -->
<div class='form-group'>
<label class='control-label'>Nama Dokumen<br /><span style='font-weight:normal;'>Silahkan scan/foto dokumen Anda disini</span></label>
<div class='form-group'>
<label for="text_IdentitasKTP_Paspor" id="lbl_IdentitasKTP_Paspor" class="control-label">Identitas(KTP/Paspor)</label>
</div>
<div class="input-group">
<input type="file" id="file_IdentitasKTP_Paspor" name="name_file_IdentitasKTP_Paspor" accept="image/jpg,image/jpeg,application/pdf,image/png" style="display: none" />
<input type="text" class="form-control" id="text_IdentitasKTP_Paspor" readonly />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btn_IdentitasKTP_Paspor" >Upload KTP/Paspor</button>
</span>
</div>`
</div>
<script>
$(document).ready(function () {
/* Some code here */
});
$('#btn_IdentitasKTP_Paspor').on('click', function () {
$("#file_IdentitasKTP_Paspor").click()
});
$('#file_IdentitasKTP_Paspor').change(function () {
var file_name = this.value.replace(/\\/g, '/').replace(/.*\//, '');
$('#text_IdentitasKTP_Paspor').val(file_name);
});
</script>
<!-- Some other code -->

jquery hide/show form elements, preventing slip of elements

I use the following code to show some forms, when a certain element is selected from the select input.
javascript:
$(document).ready(function() {
$( "#callback_url" ).hide();
$("#test-url").on("change keyup paste", function(){
//console.log($("#test-url").val());
//generate address
if ($("#test-url").val() == 0) {
console.log("true");
$( "#callback_url" ).hide();
$( "#api_key" ).show();
}
//payload
else{
console.log("else");
$( "#api_key" ).hide();
$( "#callback_url" ).show();
}
})
});
My HTML code looks like this (using bootstrap):
<div class="row">
<div class="col-md-4">
<div class="form-group">
<select class="form-control" id="test-url" size="5">
<option selected value="0">Generate new address</option>
<option value="1">Receive callback</option>
<option></option>
</select>
</div>
</div>
<div class="col-md-8">
<form id="test-form">
<div class="form-group" data-url="/api/receive?method=create">
<input type="text" id="api_key" class="form-control" name="api_key" placeholder="API-Key">
</div>
<div class="form-group test-specific-inputs" data-url="/api/receive?method=check_logs">
<input type="text" id="callback_url" class="form-control" name="callback_url" placeholder="Callback URL">
</div>
<div class="form-group">
<button type="submit" class="btn-info btn-lg">Send Request</button>
</div>
</form>
</div>
</div>
All in all I've got two questions:
1.) Is it good style to use javascript at the top of document ready to hide the element, when page is loaded? If not, what to use instead of?
2.) When I load the page the first time it looks like
Now when clicking "Receive callback" it looks like:
How is this caused, and how can I prevent the input form to "slip" down like it does, when changing the selected element?
1) Using $(document).ready waits for the page to load and this means that the javascript code inside that function will run once the HTML has finished loading and rendering. This is useful when you are working with HTML elements from your JS code. I would suggest using $(document).ready to make sure you can place all you script libraries in the <head> and know that there won't be a chance of an undefined element that was yet to be rendered.
2) I used your exact code with bootstrap 3.3.7 and it seems to work fine, so I think there is a problem with your parts of your HTML or CSS that you didn't include here. See for yourself:
$(document).ready(function() {
$( "#callback_url" ).hide();
$("#test-url").on("change keyup paste", function(){
//console.log($("#test-url").val());
//generate address
if ($("#test-url").val() == 0) {
console.log("true");
$( "#callback_url" ).hide();
$( "#api_key" ).show();
}
//payload
else{
console.log("else");
$( "#api_key" ).hide();
$( "#callback_url" ).show();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<select class="form-control" id="test-url" size="5">
<option selected value="0">Generate new address</option>
<option value="1">Receive callback</option>
<option></option>
</select>
</div>
</div>
<div class="col-md-8">
<form id="test-form">
<div class="form-group" data-url="/api/receive?method=create">
<input type="text" id="api_key" class="form-control" name="api_key" placeholder="API-Key">
</div>
<div class="form-group test-specific-inputs" data-url="/api/receive?method=check_logs">
<input type="text" id="callback_url" class="form-control" name="callback_url" placeholder="Callback URL">
</div>
<div class="form-group">
<button type="submit" class="btn-info btn-lg">Send Request</button>
</div>
</form>
</div>
</div>
Cheers

Cannot read property 'settings' of undefined when I click submit button

I don't know why I received this error when I changed the code to php (from html). when the extension of the file is html, the code is working fine.
<?php?>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/manual.css">
<!-- Optional theme -->
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<title>Register</title>
</head>
<body>
<nav class="navbar navbar-default" id="navBar">
</nav>
<div class="full">
<div class="col-xs-12">
<!--Side Bar-->
<div class="col-xs-3" id="navSide">
</div>
<div class="col-xs-6" id="signUpForm">
<h1>Register Page</h1>
<form role="form" id="signUpForm">
<div class="form-group">
<div class="form-inline spacer-12">
<input type="text" class="form-control" name="userFirstname" placeholder="First Name">
<input type="text" class="form-control" name="userLastName" placeholder="Last Name">
</div>
</div>
<div class="form-group ">
<input type="text" class="form-control"
name="userEmail"
placeholder="Email">
</div>
<div class="form-group ">
<input type="password" class="form-control" name="userPassword" placeholder="Password">
</div>
<div class="form-group ">
<input type="password" class="form-control" name="confirmPassword" placeholder="Password">
</div>
<div class="form-group ">
<label> Birthday* </label>
<input type="date" class="form-control" name="userBirthday" placeholder="Birthday">
</div>
<input type="submit" class="btn btn-info spacer-12" style="clear:both" >
</form>
</div>
</div>
</div>
<script src="js/startup.js"></script>
<script src="js/signup.js"></script>
</body>
</html>
<?php?>
then this is my jquery validation code
$(document).ready(function(){
$('#signUpForm').validate({
errorElement: "span",
errorClass: "help-block",
rules:{
userFirstName:{
required: true
},
userLastName:{
required: true
},
userEmail:{
required: true
},
userPassword:{
required: true
},
confirmPassword:{
required: true
},
userBirthday:{
required: true
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error').addClass('red-border');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success').removeClass('red-border');
}
});
});
This code causes error when I click the submit button (JQuery Validate Uncaught TypeError: Cannot read property 'settings' of undefined )
But the error is temporary and will vanish in a while.
You defined two ids with same name, whereas id should be unique.
<div class="col-xs-6" id="signUpForm">
<form role="form" id="signUpForm">
Try to remove id from <div class="col-xs-6" id="signUpForm">
If you use the rules() method, make sure to initialize the validation first.
var validator = $("#Form1").validate();
$('#field1').rules("add", {
min: 1
});
This error is normally caused by trying to validate an element that is not a form. In the OP's case, there are two elements with the same ID:
<div class="col-xs-6" id="signUpForm">
<form role="form" id="signUpForm">
jQuery searches a page from top to bottom, and the first element it finds with this ID is not a form.
The Validator.element() function (for validating single elements) can also cause this error, if attempting to validate an element that is outside the form.
NOTE two things
1. Define the Jquery function
include the function of jQuery !
(function( $ ) {
//Start Script
//endscript/
})( jQuery );
Change the Form Id because it's doing conflict between Form Id and Div Id
<form role="form" id="signUpForm1"> // include 1 in previous form id
And put this id into script
$('#signUpForm1').validate({ // put the Id in the script
Hope Your Task will be successful.
To add a small detail here, I ran into the same problem with jQuery UI time picker, and it also was due to the id being non-unique.
In my case, it's because I was grabbing the parent element from a template - duplicating it for a pop-up window. As a result, the contents of the window all had duplicate ids.
My normal workaround for that was to replace this:
$('#foo').bar();
with this:
myPopupWindow.find('#foo').bar();
That works quite well for most things, but not for the time picker. For that one, I wound up doing this:
myPopupWindow.find('#foo').attr('id', 'foo_' + someUniqueTag);
myPopupWindow.find('#foo_' + someUniqueTag).timepicker();
where someUniqueTag is a record id, random number or some other distinct string. This solved it quite nicely for me.

How to add text into a div using a html form?

Adding the insertion of input type text into the div title on the same screen. Attempted broken function to they turn the input into a variable and use it to fill in the div.
<body>
<div class="form">
Form <br><br>
<form name="input" action="javascript:alert(titleValue);">
Title: <input type="text" name="title" class="titleInsert">
<input type="submit" value="Submit">
</form>
</div>
<div class="offer_display">
<div class="title" id= title></div>
</div>
</body>
<script>
var titleValue="";
$('#titleInsert').on("change", function () {
titleValue=$(this).val();
$("#title h3").text("titleValue");
});
</script>
</html>
Another problem with you code is, that you have to use "input" event and not "change".
See working code on fiddle: http://jsfiddle.net/z037qv3n/
<body>
Form <br><br>
<form name="input" action="javascript:alert(titleValue);">
Title: <input type="text" name="title" id="titleInsert">
<input type="submit" value="Submit">
</form>
<div class="title" id="title"></div>
</body>
<script>
var titleValue="";
$('#titleInsert').on("input", function () {
titleValue=$(this).val();
$("#title").text(titleValue);
});
</script>
</html>
Change your code for $('div.title').html(titleValue);
Live Demo : JSFIDDLE
You have to include jQuery library in your head section like this
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
There are lot of mistakes in your code please see below:
First mistake you should put your jQuery inside ready function.
Second mistake there is no such id #titleInsert it is a class so you have to do .titleInsert
Third mistake there is no tag h3 in #title
Fourth mistake you should use .keyup event instead .change event
Replace your jQuery code with following :
<script type="text/javascript">
$(document).ready(function(){
var titleValue="";
$('.titleInsert').on("keyup", function () {
titleValue=$(this).val();
$("#title").text("titleValue");
});
});
</script>

How to prevent after submitting a form to revert back to the previous Tab

I have several tabs and each time I select a tab, the form is submitted sending a variable a different value (hidden from the user). If I go say from TAB1 to TAB2, variable99 will get a value of 2, TAB3 a value of 3 and so on.... Problem I am having is that when I select TAB2, I don't want the page to revert back to TAB1. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit a Form on Tab Click</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
</style>
<script>
$(function() {
$("#Main").tabs();
$('[id^=ui-id-]').click(function(){
var tabId = $(this).attr('id');
var tabNum = tabId.split('-')[2];
$('#form-' + tabNum).submit();
});
});
</script>
</head>
<body>
<div id="Main">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
<li>Tab6</li>
</ul>
<form id="form-1" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="1">
</form>
<form id="form-2" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="2">
</form>
<form id="form-3" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="3">
</form>
<form id="form-4" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="4">
</form>
<form id="form-5" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="5">
</form>
<form id="form-6" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="6">
</form>
<div id="Tab1">
<p>Tab1</p>
</div>
<div id="Tab2">
<p>Tab2</p>
</div>
<div id="Tab3">
<p>Tab3</p>
</div>
<div id="Tab4">
<p>Tab4</p>
</div>
<div id="Tab5">
<p>Tab5</p>
</div>
<div id="Tab6">
<p>Tab6</p>
</div>
</div>
</body>
</html>
Here is my code now, I removed some things, that didn't make since:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit a Form on Tab Click</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
</style>
<script>
$(function() {//Open function
$("#Main").tabs();
$('[id^=ui-id-]').click(function(){ //Open [id^=ui-id-]
if (tabId == 'ui-id-1')
{
doAjax('1');
}
else if (tabId == 'ui-id-2')
{
doAjax('2');
}
else if (tabId == 'ui-id-3')
{
doAjax('3');
}
function doAjaxSubmit(formID) { //Open doAjaxSubmin
$.ajax({
type: "POST",
url: "Tab_Click_v00.html",
data: "Nb_var99=" + formID,
})
} //Close doAjaxSubmin
}); //Close [id^=ui-id-]
});//Close function
</script>
</head>
<body>
<div id="Main">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
<li>Tab6</li>
</ul>
<div id="Tab1">
<p>Tab1</p>
</div>
<div id="Tab2">
<p>Tab2</p>
</div>
<div id="Tab3">
<p>Tab3</p>
</div>
<div id="Tab4">
<p>Tab4</p>
</div>
<div id="Tab5">
<p>Tab5</p>
</div>
<div id="Tab6">
<p>Tab6</p>
</div>
</div>
</body>
</html>
This is not working. It also killed the css style?? I'll keep on trying.
For what you want to do, there is no need to use <form>s and <input>s at all.
Just based on the tab that is clicked, you can send a 1 or a 2 or a 3 over to the desired HTML page, via AJAX.
The <form> construction is great when you have several fields and you wish to POST their data over to another server page for processing. However, in your case, it appears that you only wish to send a value to another page, and then return.
Here is one way to do it, using AJAX:
$(document).ready(function() {
$( "#Main" ).tabs();
$('[id^=ui-id-]').click(function() {
if (tabId == 'ui-id-1') {
doAjax('1');
}else if (tabId == 'ui-id-2') {
doAjax('2');
}else if (tabId == 'ui-id-3') {
doAjax('3');
}
}); //END ui-id-#.click fn
}); //END document.ready
function doAjaxSubmit(formID) {
$.ajax({
type: "POST",
url: "myphpprocessor.php",
data: "Nb_var99=" + formID,
})
.done(function( recd_from_PHP ) {
//No need to put ANYTHING in here, but for eg, you can do:
//AS AN EXAMPLE ONLY, display message sent from server side
alert("PHP side said: " + recd_from_PHP);
//AS AN EXAMPLE ONLY, click the third tab...
$('[id^=ui-id-3]').click();
});
}
Another way to send form data (using a <form> as it was intended) is to create a hidden <iframe> on your page, containing the Tab_Click_v00.html page inside it -- and then POST to that page.
Because the form's target is already on the page in an <iframe>, the current page should not refesh. And because the <iframe> is hidden, the user should not see anything unusual.
This answer also uses AJAX. I will post another example, addressing your request for more information regarding the hidden iframe idea.
Notice that as you click from Tab to Tab, the user remains on the tab.
Just copy/paste into two files:
index.php (or whatever you wish to name it), and
myphpprocessor.php (if change name of this file, must also change its name in AJAX code block)
index.php (or mytest.html, or whatever)
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<style>
#msg{width:30%;height:80px;padding:10px;margin-top:20px;background-color:wheat;}
.hidden{display:none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$( "#Main" ).tabs();
$('[id^=ui-id-]').click(function() {
var tabId = $(this).attr('id');
if (tabId == 'ui-id-1') {
doAjax('1');
}else if (tabId == 'ui-id-2') {
doAjax('2');
}else if (tabId == 'ui-id-3') {
doAjax('3');
}else if (tabId == 'ui-id-4') {
doAjax('4');
}else if (tabId == 'ui-id-5') {
doAjax('5');
}
}); //END ui-id-#.click fn
}); //END document.ready
function doAjax(formID) {
$.ajax({
type: "POST",
url: "myphpprocessor.php",
data: "Nb_var99=" + formID,
})
.done(function( recd_from_PHP ) {
//No need to put ANYTHING in here, but for eg, you can do:
//alert('In done fn...');
//AS AN EXAMPLE ONLY, display message sent from server side
//alert("PHP side said: " + recd_from_PHP);
$('#msg').html('<h2>Here is what the PHP side sent:</h2>' + recd_from_PHP);
//AS AN EXAMPLE ONLY, click the third tab...
//$('[id^=ui-id-3]').click(); //Warning, this will cause endless loop -- but just demonstrating
});
}
</script>
</head>
<body>
<div id="Main">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
<li>Tab6</li>
</ul>
<form id="form-1" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="1">
</form>
<form id="form-2" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="2">
</form>
<form id="form-3" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="3">
</form>
<form id="form-4" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="4">
</form>
<form id="form-5" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="5">
</form>
<form id="form-6" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="6">
</form>
<div id="Tab1">
<p>Tab1</p>
</div>
<div id="Tab2">
<p>Tab2</p>
</div>
<div id="Tab3">
<p>Tab3</p>
</div>
<div id="Tab4">
<p>Tab4</p>
</div>
<div id="Tab5">
<p>Tab5</p>
</div>
<div id="Tab6">
<p>Tab6</p>
</div>
</div>
<div id="msg"></div>
</body>
</html>
Server Side: myphpprocessor.php (MUST end in .php)
<?php
$id = $_POST['Nb_var99'];
if ($id == 4) {
$msg = "Return of the Tab Four";
}else{
$msg = 'PHP side receieved: ' .$id;
}
echo $msg;
Posting to a hidden <iframe>
I've never done this myself, and can see its a bit tricky. Here are some posts that discuss how to do it:
How do you post to an iframe?
Hidden iframe submit
Remember to specify the name= attr
Post form in an iframe
You will notice that this is considerably more complicated than simply doing a basic AJAX form submission, as suggested in my previous two answers.
I am not sure why the AJAX solution is not appealing in your situation, but I remember when AJAX and PHP were unknown commodities to me, and perhaps that is what you are struggling with.
If so, struggle no more. Both are much simpler than you realize.
For basic, FREE, from-the-ground-up 10-min tutorials in PHP:
phpAcademy.org
thenewboston.com
Next, here are some good posts for getting the basics of AJAX:
A simple example
More complicated example
Populate dropdown 2 based on selection in dropdown 1
My recommendation is to use the AJAX solution, but I do not understand what you are trying to achieve in the end. What is the file Tab_Click_v00.html going to do with the data it receives?
Perhaps if you provide more information (as a comment below this post) about the desired end result on the Tab_Click side, I can be of more help.
Given you're using the jQuery Tabs control, you can use the window.location.hash and bind to the load event (and show the appropriate tab using the active option):
$(window).load(function(){
if(window.location.hash){
$('#main').tabs('option','active',window.location.hash.substring(1));
}
});
Then redirect the user back using somepage.html#tabindex

Categories

Resources