1

I have a submit form for my customers to track their orders with a tracking code. I want to show the result of order status which is checking from the shipping company's website.

input[type=text],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 0px;
  margin-bottom: 5px;
  resize: vertical;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 14px;
  font-weight: bold;
}

input[type=submit] {
  background-color: #000;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
}

input[type=submit]:hover {
  color: #FFF;
  background-color: #dd0017;
}

input[type=submit]:active {
  box-shadow: inset 0px 0px 10px #000;
  color: #FFF;
  background-color: #dd0017;
}

.container {
  border-radius: 5px;
  background-color: rgba(241, 98, 114, 0.25);
  padding: 0px;
  margin-bottom: 20px;
}
<div class="container">
  <div align="left" style="background-color:rgba(241, 98, 114, 0.25);padding:15px 0px 15px 5px;border-radius: 5px; border:1px solid #ff60cd;"><img align="left" alt="Sürat Kargo Takip" src="image\PNGLER\surat-kargo-takip-icon-200x40.png" style="float:none;" /></div>

  <form action="http://www.suratkargo.com.tr/kargoweb/bireysel.aspx" align="left" onsubmit="window.open('','top','resizable=1, scrollbars=1,width=790,left=25,top=25')" target="top">&nbsp;
    <h2><label for="takipnoalani">Takip NO :</label></h2>
    <input id="takipnoalani" name="no" placeholder="Kargo Takip Numaranızı Yazınız..." type="text" />
    <input name="action" style="font-size:16px;float:right;" type="submit" value="Getir" />&nbsp;</form>
</div>

<div id="show_result" style="border:2px solid red;">
  I want to show the result of query here<br/>But I couldn't :( <br/> And it would be better if this red bordered div is not shown until the customer click the "Getir" button.
</div>

My code is opening it in a new page. However, I want to show it on the same page exactly under that form with a new (or existing but hidden) div. I don't know if it is possible or not. I looked at every question similar to this, but couldn't find a solution.

I would greatly appreciate it if someone could help me.

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
ironicskymoon
  • 11
  • 3
  • You could always post to the same page that the form is on, and then output the data based on a conditional inside the ASPX. – Obsidian Age Sep 04 '17 at 02:57
  • Thank you for your quick answer, @Obsidian Age . Sorry, I couldn't understand..."based on a conditional inside the ASPX". My website is based on opencart. And I am very new to programming. – ironicskymoon Sep 04 '17 at 03:19
  • Unfortunately I'm not too familiar with ASPX myself -- I just noticed the `.aspx` in your `
    `. In PHP, it would be something like `if (!empty($_POST)) { // show form }`. For further help, you may need to provide a bit more information about exactly how your code is structured and what exactly you have the ability to modify.
     – Obsidian Age Sep 04 '17 at 03:19
  • @Obsidian Age . You can assume me as a beginner :) I can only read and edit the codes for now. For my question, I am looking for something like here: https://stackoverflow.com/questions/31587326/how-to-show-hidden-div-after-hitting-submit-button-in-form – ironicskymoon Sep 04 '17 at 03:30

2 Answers2

0

I recommend you to use Ajax to load the content and show it in form. Note I commented out the part which I use Ajax to load the content from the action because the action is not available here but it should be pretty straightforward.

$(document).ready(function() {
  var result = "Result from your action.";
  
  $('#form1').on('submit', function(e){
     e.preventDefault();
     
     $('#show_result').html("Result will show up here").slideDown('slow');
     
     /*
     var $form = $(this);
     $.post($form.attr('action'), $form.serialize(), function(data){
        $('#show_result').html("Result will show up here").slideDown('slow');
     });*/
     
     return false;
  });
});
input[type=text],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 0px;
  margin-bottom: 5px;
  resize: vertical;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 14px;
  font-weight: bold;
}

input[type=submit] {
  background-color: #000;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
}

input[type=submit]:hover {
  color: #FFF;
  background-color: #dd0017;
}

input[type=submit]:active {
  box-shadow: inset 0px 0px 10px #000;
  color: #FFF;
  background-color: #dd0017;
}

.container {
  border-radius: 5px;
  background-color: rgba(241, 98, 114, 0.25);
  padding: 0px;
  margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div align="left" style="background-color:rgba(241, 98, 114, 0.25);padding:15px 0px 15px 5px;border-radius: 5px; border:1px solid #ff60cd;"><img align="left" alt="Sürat Kargo Takip" src="image\PNGLER\surat-kargo-takip-icon-200x40.png" style="float:none;" /></div>

  <form action="http://www.suratkargo.com.tr/kargoweb/bireysel.aspx" align="left" onsubmit="window.open('','top','resizable=1, scrollbars=1,width=790,left=25,top=25')" target="top" id="form1">&nbsp;
    <h2><label for="takipnoalani">Takip NO :</label></h2>
    <input id="takipnoalani" name="no" placeholder="Kargo Takip Numaranızı Yazınız..." type="text" />
    <input name="action" style="font-size:16px;float:right;" type="submit" value="Getir" />&nbsp;</form>
</div>

<div id="show_result" style="display:none;border:2px solid red;">
  
</div>
Alireza Noori
  • 14,961
  • 30
  • 95
  • 179
  • Thank you for your detailed answer. However, it opens a new blank page and it is only written "Result from your action." in the red bordered div. There is no results from shipping company. Any suggestions? – ironicskymoon Sep 04 '17 at 04:10
  • If it opens a blank page you've probably missed something in the code. Either you've forgotten to add the `id` for the form (I added that myself, your form didn't have an id) or there's something in your javascript. In the code above, I handle the `submit` of the form and tell it to don't submit and I get the content from the form via Ajax and show it on the box. – Alireza Noori Sep 04 '17 at 07:50
  • You're welcome. Let me know if you need help. If this has solved your problem make sure to set it as the solution by clicking the check mark next to vote – Alireza Noori Sep 05 '17 at 00:01
0

After I searched for hours, I found a similar question here:

Similar Question but opening a PHP file

And design it for my solution. Thanks to everyone. Here is my solution:

$('#kargotakip').submit(function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            $('#sonucgoster').html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;   
    margin-top: 0px;
    margin-bottom: 5px;
    resize: vertical;
    font-family:"Comic Sans MS", cursive,sans-serif;
    font-size: 14px;
    font-weight: bold;
}

input[type=submit] {
    background-color: #000;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
}

input[type=submit]:hover {
    color: #FFF;
 background-color: #dd0017;
}

input[type=submit]:active {
    box-shadow: inset 0px 0px 10px #000;
 color: #FFF;
 background-color:#dd0017;
}

.container {
    border-radius: 5px;
    background-color: rgba(241, 98, 114, 0.25);
    padding: 0px;
    margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div align="left" style="background-color:rgba(241, 98, 114, 0.25);padding:15px 0px 15px 5px;border-radius: 5px; border:1px solid #ff60cd;"><img align="left" alt="Sürat Kargo Takip" src="image\PNGLER\surat-kargo-takip-icon-200x40.png" style="float:none;" /></div>

<form id="kargotakip" method="GET" action="http://www.suratkargo.com.tr/kargoweb/bireysel.aspx" align="left" >&nbsp;
 <h2><label for="takipnoalani">Takip NO :</label></h2>
 <input type="text" id="takipnoalani" name="no" placeholder="Kargo Takip Numaranızı Yazınız..." />
 <input type="submit" name="action" value="Getir" style="font-size:16px;float:right;" />&nbsp;
</form>

</div>
<div id="sonucgoster" style="background-color:rgba(241, 98, 114, 0.25);border-radius: 5px; border:1px solid #ff60cd;"></div>
ironicskymoon
  • 11
  • 3