Alternative Forms

[vizz]

I have 7 forms with different information to be stored in different tables.
User can choose any one form at a time. How to allow user to choose one form at a time and store those values in Mysql tables using?

[chrishea]

You need to clarify the information and your question. You say that the user can choose one form at a time. Does this mean that the user can choose to complete just one form or that he is required to complete more than one / all of them? Your question "How to allow..." implies that there is an issue with allowing the user to choose a form. It seems simple enough to provide the user with a list of forms and to let them click on a link to the page for that form. Is your issue that you don't know how to code this or is it something else?

[vizz]

Form1
Form2
Form3
Form4
Form5
Form6
Form7

All 7 Forms are on same page. User Click on link then form should appear to related that link.
All form have different fields.
Only one form should be displayed at a time.
I don't know how to code this.

Please reply

Thanks!

You need to clarify the information and your question. You say that the user can choose one form at a time. Does this mean that the user can choose to complete just one form or that he is required to complete more than one / all of them? Your question "How to allow..." implies that there is an issue with allowing the user to choose a form. It seems simple enough to provide the user with a list of forms and to let them click on a link to the page for that form. Is your issue that you don't know how to code this or is it something else?

[diafol]

You want a wizard / step-by-step form?
Should it be ajax or vanilla php?

[broj1]

I am not sure whether I understand your question but let me try.

Enclose each of your forms with a div that has a CSS display property set to none like this:

<div id="form1" style="display:none;">
<form>
...
...
</form>
</div>
<div id="form2" style="display:none;">
<form>
...
...
</form>
</div>

Then write a javascript function that toggles the display of a div like this

function toggleDiv(divId) {

    var el = document.getElementById(divId);

    if(el.style.display == 'none') {

        el.style.display = 'block';
    } else {

        el.style.display = 'none';
    }
}

Assign this javascript function to onclick event of each link like:

<a href="#" onclick="toggleDiv('form1');">Form 1</a>
<a href="#" onclick="toggleDiv('form2');">Form 2</a>
...

[Stefano Mtangoo]

make forms variables and ech time link is clicked echo the necessary variable!

[vizz]

Thanks it works.
But how to hide first form when clicked on second form?

I am not sure whether I understand your question but let me try.

Enclose each of your forms with a div that has a CSS display property set to none like this:

<div id="form1" style="display:none;">
<form>
...
...
</form>
</div>
<div id="form2" style="display:none;">
<form>
...
...
</form>
</div>

Then write a javascript function that toggles the display of a div like this

function toggleDiv(divId) {

    var el = document.getElementById(divId);

    if(el.style.display == 'none') {

        el.style.display = 'block';
    } else {

        el.style.display = 'none';
    }
}

Assign this javascript function to onclick event of each link like:

<a href="#" onclick="toggleDiv('form1');">Form 1</a>
<a href="#" onclick="toggleDiv('form2');">Form 2</a>
...

[broj1]

Which solution did you implement? Was it the javascript one or the one with forms as variables?

[broj1]

If you used the javascript to display a form you can enhance the function to first hide display of all forms and then open the selected one.

function toggleDiv(divId) {

    // number of forms (you can set that programatically)
    var numberOfForms = 7;

    // variable for storing each div's ID
    var fmDivId = '';

    // first loop through al forms and hide their divs
    for(var i= 1; i <= numberOfForms; i++) {

        // current form's ID
        // (suppose your divs have IDs like form1, form2...)
        fmDivId = 'form' + i.toString();

        // set display to none
        document.getElementById(frmDivId).style.display == 'none';
    }

    // then display the selected form as ususally

    var el = document.getElementById(divId);

    if(el.style.display == 'none') {

        el.style.display = 'block';

    } else {

        el.style.display = 'none';
    }
}

[vizz]

Thanks.
Now this is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"> </script>
<script type="text/javascript" >
function toggleDiv(divId) {

    var el = document.getElementById(divId);

    if(el.style.display == 'none') {

        el.style.display = 'block';
    } else {

        el.style.display = 'none';
    }
}
</script>

</head>

<body>
<a href="#" onclick="toggleDiv('form1');">Form 1</a>
<a href="#" onclick="toggleDiv('form2');">Form 2</a>

<div id="form1" style="display:none;">
<form >
Name<input type="text" />
</form>
</div>
<div id="form2" style="display:none;">
<form>
Surname<input type="text" />
</form>
</div>
<br />
</body>
</html>

But How to hide form1 when clicked form2 and how to hide form2 when clicked form1?
By default both are hidden

If you used the javascript to display a form you can enhance the function to first hide display of all forms and then open the selected one.

function toggleDiv(divId) {

    // number of forms (you can set that programatically)
    var numberOfForms = 7;

    // variable for storing each div's ID
    var fmDivId = '';

    // first loop through al forms and hide their divs
    for(var i= 1; i <= numberOfForms; i++) {

        // current form's ID
        // (suppose your divs have IDs like form1, form2...)
        fmDivId = 'form' + i.toString();

        // set display to none
        document.getElementById(frmDivId).style.display == 'none';
    }

    // then display the selected form as ususally

    var el = document.getElementById(divId);

    if(el.style.display == 'none') {

        el.style.display = 'block';

    } else {

        el.style.display = 'none';
    }
}

[Stefano Mtangoo]

Thanks.
Now this is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"> </script>
<script type="text/javascript" >
function toggleDiv(divId) {

    var el = document.getElementById(divId);

    if(el.style.display == 'none') {

        el.style.display = 'block';
    } else {

        el.style.display = 'none';
    }
}
</script>

</head>

<body>
<a href="#" onclick="toggleDiv('form1');">Form 1</a>
<a href="#" onclick="toggleDiv('form2');">Form 2</a>

<div id="form1" style="display:none;">
<form >
Name<input type="text" />
</form>
</div>
<div id="form2" style="display:none;">
<form>
Surname<input type="text" />
</form>
</div>
<br />
</body>
</html>

But How to hide form1 when clicked form2 and how to hide form2 when clicked form1?
By default both are hidden

Suppose user have JS disabled!

[broj1]

I have added some new code to the toggleDiv() javascript function. This code hides dispplay of all divs on the page - either diplayed or hidden(see my previous post).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"> </script>
<script type="text/javascript" >
function toggleDiv(divId) {

    // ***** NEW CODE *****

    // number of forms (you can set that programatically)
    var numberOfForms = 2;

    // variable for storing each div's ID
    var fmDivId = '';

    // first loop through al forms and hide their divs
    for(var i= 1; i <= numberOfForms; i++) {

        // current form's ID
        // (suppose your divs have IDs like form1, form2...)
        fmDivId = 'form' + i.toString();

        // set display to none
        document.getElementById(frmDivId).style.display == 'none';
    }

    // ***** END OF NEW CODE *****

    var el = document.getElementById(divId);

    if(el.style.display == 'none') {

        el.style.display = 'block';
    } else {

        el.style.display = 'none';
    }
}
</script>

</head>

<body>
<a href="#" onclick="toggleDiv('form1');">Form 1</a>
<a href="#" onclick="toggleDiv('form2');">Form 2</a>

<div id="form1" style="display:none;">
<form >
Name<input type="text" />
</form>
</div>
<div id="form2" style="display:none;">
<form>
Surname<input type="text" />
</form>
</div>
<br />
</body>
</html>

[broj1]

My solution was using javascript. If user has javascript disabled the other solution is by submitting a page and using $_GET or $_POST. The bad side is that the page gets refreshed each time the form gets submitted and ylso you have to store intermediate results. The safest way would be to have both options available:

1. check if javascript is enabled/supported
2. if yes use javascript
3. if not revert to submitting forms or let know the user that he can not participate

[TySkby]

Suppose user have JS disabled!

I personally don't support non-JS browsers most of the time, and I'd agree with broj1's 3rd suggestion ("let know the user that he can not participate").

Many (most) sites are incredibly dependent on javascript to function properly, even if they do offer 'graceful degradation'. While that should almost always be something to strive toward, let's be realistic- who is browsing your site with javascript disabled? If someone knows enough to disable javascript in their browser, they probably know enough to turn it back on when it's necessary. It's easy enough to have a message telling a user that they must have javascript enabled to use a site, or a part of a site.

Javascript is at the point where it really is a necessity for browsing the web. I wouldn't worry about a user having javascript disabled- it's unlikely in the first place, and it's silly to spend time offering workarounds for something that really is a basic part of web technology.

Just an opinion, but one I feel is worth considering.

[vizz]

Thanks

I personally don't support non-JS browsers most of the time, and I'd agree with broj1's 3rd suggestion ("let know the user that he can not participate").

Many (most) sites are incredibly dependent on javascript to function properly, even if they do offer 'graceful degradation'. While that should almost always be something to strive toward, let's be realistic- who is browsing your site with javascript disabled? If someone knows enough to disable javascript in their browser, they probably know enough to turn it back on when it's necessary. It's easy enough to have a message telling a user that they must have javascript enabled to use a site, or a part of a site.

Javascript is at the point where it really is a necessity for browsing the web. I wouldn't worry about a user having javascript disabled- it's unlikely in the first place, and it's silly to spend time offering workarounds for something that really is a basic part of web technology.

Just an opinion, but one I feel is worth considering.

[diafol]

Javascript is at the point where it really is a necessity for browsing the web. I wouldn't worry about a user having javascript disabled- it's unlikely in the first place, and it's silly to spend time offering workarounds for something that really is a basic part of web technology.

I can see loads of guys jumping up and down at that! :)

I would like to share those sentiments - it would make our lives a lot easier. However, having tested some jquery-enabled apps of mine on certain smartphones and mobiles, the degree of js support seems to vary - especially when css styles depend on js! So, to my mind, if the js is not critical to usage, I would encourage the use of 'progressive enhancement'. My ajax queries are thus enhanced, so if js is not enabled, I get a good old traditional request. It's not as nice, but at least it works and gets your users coming returning.

If js is disbaled, the worse that should happen is that all forms are shown in order below one another. That wouldn't be a disaster. However, if you style all forms to be invisible as default, you may have a problem.

[Stefano Mtangoo]

The solution I would propose to JS problem is having legacy view for the same controller/Model. If it is disabled use legacy view. But it requires MVC

[vizz]

Then without js how to code?

I can see loads of guys jumping up and down at that! :)

I would like to share those sentiments - it would make our lives a lot easier. However, having tested some jquery-enabled apps of mine on certain smartphones and mobiles, the degree of js support seems to vary - especially when css styles depend on js! So, to my mind, if the js is not critical to usage, I would encourage the use of 'progressive enhancement'. My ajax queries are thus enhanced, so if js is not enabled, I get a good old traditional request. It's not as nice, but at least it works and gets your users coming returning.

If js is disbaled, the worse that should happen is that all forms are shown in order below one another. That wouldn't be a disaster. However, if you style all forms to be invisible as default, you may have a problem.

[diafol]

I'd use prog. enhancement to make a 2-in-1 (no js and js-enabled) for the same pages. Unfortunately, I'm busy at the mo. I'm just picking into DW ever couple of hours with quick posts.

[broj1]

One way of doing it:

1. On your entry page set up a javascript function that redirects to the page with javascript function hidding and displaying the form divs. If javascript is enabled the visitor will be redirected there and do the quiz.

2. If javascript is not enabled in the visitor's browser he will remain on the entry page which will be the page with no javascript.

The no-javascript page can be done in at least two ways:

1. All the questions are part of one form. The visitor has to pick the answers and at the end submit all of them.

2. Each question can be a separate page and the visitor has links to other questions. You can store intermediate results in a session variable (array) or directly in a database.