How to get a submit button to over-ride the AJAX call

JavaScript
1

I have a dynamic search button that works very well.

Users type text and database of books and search results are shown.

I also have a search for “new arrivals” where the user has to type “qqq”. This also works without any problems.

To be more intuitive I would like to replace the “qqq” with a submit button link that pretends the user input was “qqq”.

I have tried numerous JavaScript calls but none will even open the PHP search routine file. Hopefully, once the PHP file is open and active I should be able to use MySql to search and display the “new arrivals”.

AJAX Call:

    // ESSENTIAL: URL AND NOT PATH
    xmlhttp.open("GET","incs/_dbResults-QQQ.php?q="+str,true);

Form Input to activate AJAX search Routine

  <label> Book Search: </label>
  <input
    id    = "bufferedInput"
    class = "fsn"
    type  = "text"
    size  = "42"
    name  = "search"
    value = "" 
    <?php  $onKeyUp = 'onkeyup = "showResult(this.value)"'; ?>
  />

   &nbsp;&nbsp;
  <input 
    class ="bgy p42 rad" 
    type  ="submit" 
    name  ="search" 
    value ="New arrivals"
    onsubmit="showResult(this.value)"
  />
2

Well, if your script is expecting “qqq”, and you send it “New arrivals”…
Surely you can just…

?

Oh, but it’s a SUBMIT button. You SURE thats what you want it to do? Your form field is triggering onkeyup. If you’re SUBMITTING the form, your script will run, and then the form will submit… what’s the action on the form?

3

May I try again :slight_smile:

I am totally confused with the Ajax call and would like to replace the user’s input with a SUBMIT button:

Here is a link to the test page :slight_smile:

https://this-is-a-test-to-see-if-it-works.tk/?

4

this is the part that confuses me.

Are you saying you want to replace the action that triggers the search? Or completely remove the input and only search via a button?

Your AJAX appears to be fine, it’s just “take input string, pass to script”. So it’s about manipulating the input string.

5

I want to replace the user’s qqq input with the New Arrivals submit button:

I forgot to show the hidden AJAX/JavaScript:

  <div class="w88 mga">
    <form action="?" method="get">
      <div>
        <br>
        <label>Book Search: &nbsp; </label>
        <input
          id    = "bufferedInput"
          class = "fsn"
          type  = "text"
          size  = "24"
          name  = "search"
          value = "" 
          <?php
            # ONLY USE andres
            # IF AND ONLY IF ISSET($_GET['andres'])
              $onKeyUp = 'onkeyup = "showResult(this.value)"';
              # $andres  = $_GET['andres'] ?? $onKeyUp;
          ?>
        />
        &nbsp;&nbsp;
        <input 
        	class ="bgy p42 rad" 
        	type 	="submit" 
        	name 	="search" 
        	value ="New arrivals"
        	<?php $onKeyUp = 'onkeyup = "showResult(' ."qqq" .')"';?>
        />
      </div>
    </form>
  </div>
6

Well that doesn’t echo out your string, so your submit button will be missing its trigger.

7

I tried onsubmit and a few other JavaScript functions and none worked.

8

Right, but…

Okay. I don’t think that one sunk in.

    <input 
    	class ="bgy p42 rad" 
    	type 	="submit" 
    	name 	="search" 
    	value ="New arrivals"
    	<?php $onKeyUp = 'onkeyup = "showResult(' ."qqq" .')"';?>
    />
  </div>

Start Script Evaluation.
PHP processes. Sets $onKeyUp to the value given. Does nothing with it.
Resulting HTML:

        <input 
        	class ="bgy p42 rad" 
        	type 	="submit" 
        	name 	="search" 
        	value ="New arrivals"
        />
      </div>

Hands HTML to browser.
Browser says "There’s a form. And a submit button. When someone pushes submit button, stringify inputs for URL addition, and run form.
… Javascript looks at it, says “Okay, it’s a button. Nothing for me to do.”

9

What does the resulting HTML code look like after the PHP has executed?

10

@Paul_Wilkins, Try the this link:

https://this-is-a-test-to-see-if-it-works.tk/?

11

<input class="bgy p42 rad" type="submit" name="search" value="New arrivals">

This button has no javascript in it. You need to echo out the string in PHP so that it becomes part of the HTML.

1 Like
12

A KLUDGE I could do is to create another page/function and virtually duplicate all the PHP Search results and hard-code the SQL:

SELECT 
   `*`
FROM TABLE 
   `Books`
WHERE 
 `qqq` = "qqq";
13

I think that the current recommendation is to replace $onKeyUp = with just echo

14 
<form action="?" method="get">
  <div>
    <br>
    <label>Book Search: &nbsp; </label>
    <input
      id    = "bufferedInput"
      class = "fsn"
      type  = "text"
      size  = "24"
      name  = "search"
      value = "" 
      <?php
        # I Dont Know what you're trying to do here.
          $onKeyUp = 'onkeyup = "showResult(this.value)"';
          # $andres  = $_GET['andres'] ?? $onKeyUp;
        echo $onKeyUp;
      ?>
    />
    &nbsp;&nbsp;
    <input 
    	class ="bgy p42 rad" 
    	type 	="submit" 
    	name 	="search" 
    	value ="New arrivals"
    	<?php $onKeyUp = 'onsubmit = "showResult(' ."'qqq'" .')"; return false;'; echo $onKeyUp; ?>
    />
  </div>
</form>
15

@Paul_Wilkins, I tried the following and it did not work:

   <input 
        	class ="bgy p42 rad" 
        	type 	="submit" 
        	name 	="search" 
        	value ="New arrivals"
        	<?php 
            // $onKeyUp = 'onkeyup = "showResult(' ."qqq" .')"';
            $onKeyUp = 'onkeyup = "qqq"'
          ?>
16

That is nothing at all like what I suggested. Bed time.

1 Like
17

Whoops, I thought that was what you meant :frowning:

18

@m_hutley, I do not know the correct way to solve the problem so hard-coded another PHP file and called it if SUBMIT was pressed:

  <div id="livesearch" class="w88 mga">
    <?php 
      if( isset($_GET['KLUDGE']) && 'New arrivals'===$_GET['KLUDGE']):
        require '../incs/_dbResults-QQQ-KLUDGE.php';

      else:  
        echo $jb->tableGetInfo(tBOOKS);

        echo '<div class="w88 mga XXXbgs bd1 bgd fg3 p42">';
          $jb->Blurb($BLURB);
            echo $BLURB;

          $table = tBOOKS;
          $aTypes = $jb->groupByType($table);
          echo $jb->groupByTypesDisplay($aTypes);
        echo '</div>';  

        # UPDATE
          $update = isset($_GET['update']) ? $_GET['update'] : NULL;
          if('db033614625035'===$update):
            echo '<iframe 
                    class="w88 mga p42 bgs bd1 p42" style="height:42em;" 
                    src="check6update.php" 
                    name="iframe_a">'
                 .'</iframe>';
          endif;#if(0):
      endif;  
    ?>
  </div>

Sometimes a KLUDGE is necessary in order to move on :frowning:

20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.