Hi to all,
please tell me any easy php code,
To 'show' and 'hide' a new form file
(may be called as "form1.php") on same current page
by click on radio buttons ?
Any suggession will be appreciated,
Thanks and Regards.
MSK 7 0 Newbie Poster
Ole Raptor 19 Posting Whiz in Training
diafol
MSK - that's really rude man. One guy posted a beautiful long piece of code for you (must have taken him ages) and you've just completely ignored it. Doubt anyone will help you here.
MSK 7 0 Newbie Poster
Great Thanks for your support & a precious one long piece of code & effort,
I hope this will definitely going to be help me in future.
But now as i am beginner I want a short & easy code so that i can understand the concepts easily.
please send your precious suggessions regularly in future
I hope that will definitely help me in many problems.
Thanks & Regards.
mschroeder 251 Bestower of Knowledge Team Colleague
If you're familiar with what AJAX is this is a great way to switch form using jQuery. If you're going to go down the road I highly suggest you look at jQuery or Prototype as both provide great functionality out of the box.
Now on to the code:
Put this in the <head></head> section of you page.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[id='formRadio']").click(function () {
var file = $(this).val() + '.html';
$.ajax({
url: file,
cache: false,
success: function(html){
$("#FormDiv").html(html);
},
error: function(){
alert( 'An Error Occurred' );
}
});
});
});
</script>and put this in the <body></body> section of your page
<div id="radioButtons">
<input type="radio" name="radio" id="formRadio" value="form1" /> Form 1<br />
<input type="radio" name="radio" id="formRadio" value="form2" />
Form 2<br />
<input type="radio" name="radio" id="formRadio" value="form3" />
Form 3<br />
<input type="radio" name="radio" id="formRadio" value="form4" />
Form 4<br />
<input type="radio" name="radio" id="formRadioFake" value="form5" />
Will not do anything<br />
</div>
<div id="FormDiv">
</div>so we have 2 divs, one with 4 radio buttons and the other is empty. Notice the only difference between the radio buttons is their value. I only use this to illustrate an example you can do a variety of more complex things.
What the first script line does is load up the jquery library from the google ajax library. This ensures it gets delivered using the same technology google uses to decide what servers your search request goes through.
In jQuery the $(document).ready(); ensures that the DOM is loaded and makes your code then executable even before the actual elements on the page have loaded fully, such as images etc.
the $("input[id='formRadio']").click(fuction() { line is really a thing of beauty.
What this does is listens for an onclick event on any input element where id="formRadio" so in the form example i provided above the 5th choice will not trigger anything but 1 - 4 will fire off an ajax request.
in the var file = ... line, this is simply grabbing the value of the element that was clicked on and appending .html to the end. so in this example creating form1.html form2.html etc but it can handled however you see fit.
The $.ajax call follows a very simple format documented here: http://docs.jquery.com/Ajax/jQuery.ajax#options What is does is fire off an ajax request for the file that we define in the file variable form1.html form2.html etc. Tells it not to cache the request, this is mainly for IE which caches GET requests. and then setups up two functions one for a successful ajax request and one for a failed ajax request.
On a successful request, it replaces the html in the element with the id FormDiv. In this case it is the empty DIV in the html i posted above. On failure it just throws an alert dialog so you know something went wrong.
The only thing left to do is create some dummy forms for the example.
form1.html
<form name="form1" method="post" action="">
Name:
<input type="text" name="textfield" id="textfield">
<br>
Password:
<input type="text" name="textfield2" id="textfield2">
<br>
<input type="submit" name="button" id="button" value="Submit">
</form>form2.html
<form name="form1" method="post" action="">
Name:
<input type="text" name="textfield" id="textfield">
<br>
Comment:
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
<br>
<input type="submit" name="button" id="button" value="Submit">
</form>As you notice these aren't designed to be functional simply to illustrate my example.
Now when we load the html page with the radio buttons and javascript, a click on form 1 will yield a username and password form. A click on form 2 will yield an email and comment form, a click on form 3 or form 4 will yield an alert saying that an error occurred because we have not created those forms and last but not least a click on "Will not do anything" does just that, nothing. (because it has a different id then the other 4 radio buttons )
Hopefully this all makes sense and I hope i have broken it down to a fine level of detail for you. Let me know if there is anything else I can explain.
death_oclock 103 Posting Whiz
I don't think AJAX would be the best choice, instead use javascript to change the button's style.display value. If you don't know how to do this, I suggest this javascript tutorial (it covers this topic directly). It is always better to actually learn something about a language instead of just getting someone else's code.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.