Member Avatar for accra

Hi to all,
am having problem doing this.
i want to show a link and not a button.when the link is clicked,then the <form></form> content is echoed for the user to make a choice,this should not open a new window,all this should take place on the same page.another problem i have is that it do not work in firefox and opera,it only work once or twicw in windows explower.
if anyone can help,i will be if anyone have another code that can do the samething,you are welcome.

<?php
function action()
{
echo "<form action='' method='post'>
<select id='select3' name='select3' class='bodytxt'>
                              
<option selected='selected' class='bodytxt'>&nbsp;&nbsp;&nbsp;-- Customise --</option>
                              <option>Anyone</option>
                              <option>Only Females</option>
                              <option>Only Males</option>
                              <option>Alumni</option>
                              <!--when the user select Alumni 4fm the list,a list of all the alumni will show up, and the user will pick one,from which pics willappear-->
                            </select>
							</form>";
}
echo "<input type='button' name='Release' onclick= action(); value='Click Here' class='bodyTxt'>";
?>
  • 2 Contributors
  • 2 Replies
  • 185 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by accra

Dani AI

Generated

Short summary and a few robust fixes for (and expanding on ’s correct point): PHP runs on the server and cannot be invoked directly by a browser click. The cross‑browser flakiness described is usually caused by malformed HTML emitted by the server (unquoted attributes, missing tags) or by name collisions (for example using function names that clash with form properties or element names). The reliable approaches are (A) insert or reveal a prebuilt form in the page with JavaScript, or (B) fetch the form HTML from the server on demand (AJAX). Both keep everything on the same page.

Unobtrusive, multiple‑link pattern (no server roundtrip):

<a href="#" class="show-form" data-target="1">Customize A</a>
<a href="#" class="show-form" data-target="2">Customize B</a>

<div id="form-area-1" style="display:none"></div>
<div id="form-area-2" style="display:none"></div>

<script>
document.addEventListener('click', function(e){
  var t = e.target;
  if (!t.classList || !t.classList.contains('show-form')) return;
  e.preventDefault();
  var id = t.dataset.target;
  var box = document.getElementById('form-area-' + id);
  if (!box.dataset.loaded) {
    box.innerHTML = "<form method='post'><label>Choice: <select name='choice'><option value='all'>All members</option><option value='members'>Members only</option></select></label><button type='submit'>OK</button></form>";
    box.dataset.loaded = '1';
  }
  box.style.display = box.style.display === 'none' ? '' : 'none';
});
</script>

AJAX pattern (load fragment from server when needed):

<a href="/form-frag.php?id=1" class="load-form" data-target="form-area-1">Customize</a>

<script>
document.querySelectorAll('.load-form').forEach(function(link){
  link.addEventListener('click', function(e){
    e.preventDefault();
    var tgt = document.getElementById(link.dataset.target);
    fetch(link.getAttribute('href'), {credentials:'same-origin'})
      .then(function(r){ if (!r.ok) throw r; return r.text(); })
      .then(function(html){ tgt.innerHTML = html; })
      .catch(function(err){ console.error(err); });
  });
});
</script>

Quick checklist and cautions: always quote attribute values in server output, avoid duplicate IDs, avoid naming a JS function the same as a form property (e.g., action), inspect the browser console for errors, and return only an HTML fragment from AJAX endpoints (not a full page). For security, sanitize server output and include CSRF protection for any form that performs state changes.

Recommended Answers

All 2 Replies

Member Avatar for dcdruck

PHP is server-side code. It gets executed in its entirety on the server before the user's browser sees anything. Therefore, you cannot call a PHP function the way you're doing it, with in onClick event. What you want to do is make action() a JavaScript function instead. You can create an empty div on the page, like <div id="contentGoesHere"></div> and then have your JavaScript action() function change the content of that div.

Another [more complicated] option would be to use an AJAX request when the user clicks the button and pull in the HTML code from a separate PHP file.

Edited by dcdruck because: Re-read the initial post and answered my own question.
Member Avatar for accra

PHP is server-side code. It gets executed in its entirety on the server before the user's browser sees anything. Therefore, you cannot call a PHP function the way you're doing it, with in onClick event. What you want to do is make action() a JavaScript function instead. You can create an empty div on the page, like <div id="contentGoesHere"></div> and then have your JavaScript action() function change the content of that div.

Another [more complicated] option would be to use an AJAX request when the user clicks the button and pull in the HTML code from a separate PHP file.

My problem with the avascript is that i just found out i can not user more than one link onthe same page.

do you have any examples of AJAX ?
pls. let me know.

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.