Nieuws:

Welkom, Gast. Alsjeblieft inloggen of registreren.
Heb je de activerings-mail niet ontvangen?

Pagina's: [1]   Omlaag

Auteur Topic: [OPGELOST] - [HTML][JS] <form> laden onclick  (gelezen 2547 keer)

Offline schwarzproductions

  • Lid
    • Open Bron Blog
[OPGELOST] - [HTML][JS] <form> laden onclick
« Gepost op: 2010/08/13, 08:04:27 »
Hallo,

ik ben op zoek naar een manier waarop ik bij een onclick een zoekformulier inlaad in een table
Code: [Selecteer]
CATALOGUS    |    DSPACE    |    WoK     |
-------------+--------------+------------|
PUBMED       |    GScholar  |    EBSCOh  |
                                         |
aangeklikte form laden         |
-----------------------------------------|

Als dus een van bovenstaande namen aangeklikt wordt zou onderaan het juiste zoekformulier geladen moeten worden.
Nu kan dit niet zo moeilijk zijn, maar ik vind niet direct hoe het moet.

Kan iemand mij helpen?

mvg Lennert

/*UPDATE
vergeten te vermelden wat ik al bedacht had.
Volgens mij moet is dus van elke form een functie maken, en die dan met een nclick moet inladen in de onderste rij.

De forms zien er zo uit :

Code: [Selecteer]
<form target="_blank" action="https://uhdspace.uhasselt.be/dspace/simple-search" method="GET">
<table width="400" border="0" align="center" style="background-color: rgb(255, 255, 255);">
<tbody><tr>
<td><a href="https://uhdspace.uhasselt.be/" target="_blank"><img alt="zoeken in de Document Server" title="zoeken in de Document Server" src="UHasselt.jpg" /></a></td>
</tr>
<tr>
<td>
<input type="text" name="query" size="50" maxlength="255">
</td>
<td>
<input type="submit" value="Ga" name="submit">
</td>
</tr>
</tbody></table>
</form>
[/code

sommige maken al gebruik van functies, maar ik denk niet dat dit problemen zal geven?
De forms zoals ze er nu uitzien kun je hier vinden: http://www.uhasselt.be/snelzoeken
« Laatst bewerkt op: 2010/08/13, 13:07:11 door schwarzproductions »
Meld dit bericht aan de moderator   Gelogd

Offline Anco

  • Lid
Re: [HTML][JS] <form> laden onclick
« Reactie #1 Gepost op: 2010/08/13, 08:24:01 »
Eh, als zo zie moet aan javascript denken en dan innerhtml.
zie bv http://users.skynet.be/javascript/DHTML/innerHtml.htm
Meld dit bericht aan de moderator   Gelogd
Linux user #485563

Offline schwarzproductions

  • Lid
    • Open Bron Blog
Re: [HTML][JS] <form> laden onclick
« Reactie #2 Gepost op: 2010/08/13, 08:29:31 »
Bedankt, daar zal ik eens mee spelen. Ik zie dat als ik de onmouseover verander door onclick dat het werkt, dus waarschijnlijk zal het zo werken
Meld dit bericht aan de moderator   Gelogd

Offline Ronnie

  • Lid
    • ronnie.vd.c
Re: [HTML][JS] <form> laden onclick
« Reactie #3 Gepost op: 2010/08/13, 08:37:25 »
Ik weet de normale JS niet zo precies uit mijn hoofd, maar je zou iets kunnen maken als dit:

De link van de catalogus
<td onclick="javascript:showForm(CATALOGUS);">CATALOGUS</td>

HTML form van de catalogus
<form class="showHideForm" id="CATALOGUS">....</form>

Javascript
Code: [Selecteer]
function showForm(id)
{
    // Hide the previous shown forms
    forms = document.getElementsByClass("showHideForm");
    for each (var form in forms) form.style.display = "none";
   
    // Show the form that is clicked on
    document.getElementById(id).style.display = "block";
}

Dan moet je er nu wel voor zorgen dat de andere forums weer verdwijnen.
Edit: Extra hide code toegevoegd
« Laatst bewerkt op: 2010/08/13, 08:41:50 door Ronnie »
Meld dit bericht aan de moderator   Gelogd
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Documentatie Terminal

Offline schwarzproductions

  • Lid
    • Open Bron Blog
Re: [HTML][JS] <form> laden onclick
« Reactie #4 Gepost op: 2010/08/13, 09:49:05 »
met innerHTML zal het niet lukken want iets dergelijks kan hij blijkbaar niet interpreteren:
Code: [Selecteer]
<td><a href="#" onclick="wijzigTekst('<form target='_blank' action='https://uhdspace.uhasselt.be/dspace/simple-search' method='GET'><input type='text' name='query' size='50' maxlength='255'><input type='submit' value='Ga' name='submit'></form>')">tekst 1</a></td>  
<update>
 innerHTML kan dus wel werken maar dan zo :
Code: [Selecteer]
<td><a href="#" onclick="wijzigTekst('<form target=\'_blank\' action=\'https://uhdspace.uhasselt.be/dspace/simple-search\' method=\'GET\'><input type=\'text\' name=\'query\' size=\'50\' maxlength=\'255\'><input type=\'submit\' value=\'Ga\' name=\'submit\'></form>')">tekst 1</a></td>
dom dat ik die vergeten was... Maar toch geloof ik dat de oplossing die Ronnie voorstelt een betere manier is.
Ook is een van de zoekwidget bijna 300 regels met daar ook javascript in, dus betwijfel ik of dat goed zal samengaan met innerHTML
</update>
 
Nu probeer ik jouw antwoord te begrijpen Ronnie. Dit lijkt me de beste methode.
Heb je wat meer uitleg erbij aub? Want ik snap het niet volledig :)
« Laatst bewerkt op: 2010/08/13, 09:54:18 door schwarzproductions »
Meld dit bericht aan de moderator   Gelogd

Offline schwarzproductions

  • Lid
    • Open Bron Blog
Re: [HTML][JS] <form> laden onclick
« Reactie #5 Gepost op: 2010/08/13, 11:07:49 »
Ik snap het blijkbaar niet :)

Heeft iemand een idee hoe ik de code werkend krijg.
Ik raak momenteel niet verder dan:
Code: [Selecteer]
<html>
<head>
<title>sn3lz03k3n</title>
</head>
<body>

<div>
<a href="#" onclick="showForm(catalogus);">cat</a><br />
<a href="#" onclick="showForm(dspace);">dspace</a><br />
<a href="#" onclick="showForm(wok);">WoK</a><br />
<a href="#" onclick="showForm(pubmed);">PubMed</a><br />
<a href="#" onclick="showForm(scholar);">GScholar</a><br />
<a href="#" onclick="showForm(ebscohost);">EBSCOhost</a>
</div>

<div>
kies hierboven een databank om te doorzoeken
<script type="javascript/text">
function showForm(id)
{
    // Hide the previous shown forms
    forms = document.getElementsByClass("showHideForm");
    for each (var form in forms) form.style.display = "none";
   
    // Show the form that is clicked on
    document.getElementById(id).style.display = "block";
}
</script>

<form class="showHideForm" id="catalogus">a</form>
<form class="showHideForm" id="dspace">b</form>
<form class="showHideForm" id="wok">c</form>
<form class="showHideForm" id="pubmed">d</form>
<form class="showHideForm" id="scholar">e</form>
<form class="showHideForm" id="ebscohost">f</form>
</div>
</body>
</html>
Maar dat doet dus niets...
Meld dit bericht aan de moderator   Gelogd

Offline Ronnie

  • Lid
    • ronnie.vd.c
Re: [HTML][JS] <form> laden onclick
« Reactie #6 Gepost op: 2010/08/13, 11:34:29 »
Bij de onclick moet nog het stukje javascript bij. Dus
<a href="#" onclick="javascript:showForm(catalogus);">cat</a><br />

In ik denk dat je het script zelf in de HEAD moet zetten
Meld dit bericht aan de moderator   Gelogd
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Documentatie Terminal

Offline schwarzproductions

  • Lid
    • Open Bron Blog
Re: [HTML][JS] <form> laden onclick
« Reactie #7 Gepost op: 2010/08/13, 11:42:07 »
oeps, per ongeluk javascript: weggeveegd.
maar ook met het script in de head werkt het niet.
Hij geeft gewoon

a
b
c
d
e
f
 weer
Meld dit bericht aan de moderator   Gelogd

Offline Ronnie

  • Lid
    • ronnie.vd.c
Re: [HTML][JS] <form> laden onclick
« Reactie #8 Gepost op: 2010/08/13, 12:53:08 »
Zelf doe ik het meeste Javascript met jQuery. Hiezo de oplossing (getest)

Code: [Selecteer]
<html>
<head>
<title>sn3lz03k3n</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.showHideForm').hide();
            $('.showForm').click(function(){
                $('.showHideForm').hide();
                $('#' + this.name).show();
            });
        });
    </script>
</head>

<body>

<div>
<a class="showForm" href="#" name="catalogus">cat</a><br />
<a class="showForm" href="#" name="dspace">dspace</a><br />
<a class="showForm" href="#" name="wok">WoK</a><br />
<a class="showForm" href="#" name="pubmed">PubMed</a><br />
<a class="showForm" href="#" name="scholar">GScholar</a><br />
<a class="showForm" href="#" name="ebscohost">EBSCOhost</a>
</div>

<div>
kies hierboven een databank om te doorzoeken
<form class="showHideForm" id="catalogus">a</form>
<form class="showHideForm" id="dspace">b</form>
<form class="showHideForm" id="wok">c</form>
<form class="showHideForm" id="pubmed">d</form>
<form class="showHideForm" id="scholar">e</form>
<form class="showHideForm" id="ebscohost">f</form>
</div>

</body>
</html>
Meld dit bericht aan de moderator   Gelogd
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Documentatie Terminal

Offline schwarzproductions

  • Lid
    • Open Bron Blog
Re: [HTML][JS] <form> laden onclick
« Reactie #9 Gepost op: 2010/08/13, 13:06:53 »
w00t :)
Het werkt :)
Heel hartelijk bedankt, nu ben ik bezig met de <forms> in te voegen en te zorgen dat het een beetje mooi op de site zal overkomen.

Ik zet het topic op opgelost - ik laat weten wanneer het online staat :)
Meld dit bericht aan de moderator   Gelogd

Offline Ronnie

  • Lid
    • ronnie.vd.c
Re: [OPGELOST] - [HTML][JS] <form> laden onclick
« Reactie #10 Gepost op: 2010/08/13, 13:10:05 »
Als aanvulling: je kunt $('#' + this.name).show(); ook vervangen door slideDown() of slideDown('slow') om een mooi effect te creëren.

Voor meer info zie: http://api.jquery.com/slideDown/
Meld dit bericht aan de moderator   Gelogd
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Documentatie Terminal

Offline schwarzproductions

  • Lid
    • Open Bron Blog
Re: [OPGELOST] - [HTML][JS] <form> laden onclick
« Reactie #11 Gepost op: 2010/08/13, 14:50:52 »
> de code staat online: zie http://www.uhasselt.be/snelzoeken :)
Meld dit bericht aan de moderator   Gelogd

Offline akjssdk

  • Lid
Re: [OPGELOST] - [HTML][JS] <form> laden onclick
« Reactie #12 Gepost op: 2010/08/14, 13:19:18 »
Wat je mss nog kan doen is dat de de muis direct naar het zoek form springt. Dit kan in jQuery met .focus().  Voeg gwn de volgende regel toe:
Code: [Selecteer]
$('#' + this.name).focus()
Meld dit bericht aan de moderator   Gelogd

Offline schwarzproductions

  • Lid
    • Open Bron Blog
Re: [OPGELOST] - [HTML][JS] <form> laden onclick
« Reactie #13 Gepost op: 2010/08/15, 14:29:15 »
Goede tip. Bedankt:)
Meld dit bericht aan de moderator   Gelogd

Offline schwarzproductions

  • Lid
    • Open Bron Blog
Re: [OPGELOST] - [HTML][JS] <form> laden onclick
« Reactie #14 Gepost op: 2010/09/07, 13:46:56 »
Net nog een regeltje aan het javascript toegevoegd:

Code: [Selecteer]
$('.hideForm').click(function(){
                $('.showHideForm').hide();
            });

en dan bij het formulier:

Code: [Selecteer]
<a class="hideForm" href="#">(x)</a>

Zo kunnen de formulieren ook gewoon verborgen worden.
« Laatst bewerkt op: 2010/09/07, 13:51:19 door schwarzproductions »
Meld dit bericht aan de moderator   Gelogd
Pagina's: [1]   Omhoog