2015-10-29 5 views
1

Я создаю страницу PHP, используя Javascript. Я создал HTML-форму и назвал PHP частью кода. Когда я показываю массив JSON, я вижу отображаемые элементы для миллисекунды, а затем страница обновляется до начальной страницы. Код работает, но я не хочу автоматического обновления. Как мне это сделать?Html страница автоматически обновляется

HTML:

<div data-role="collapsible"> 
    <h1>ADD INVNTORY</h1> 
    <form action='<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>' method="post"> 
    <fieldset> 
     <legend> 
     <span class="number">1</span> 
     Your basic info 
     </legend> 
     <label for="name">Name:</label> 
     <input type="text" id="name" name="product_name"/> 
     <label for="serial">Serial number:</label> 
     <input type="text" id="serial" name="serial"/> 
     <label for="amount">Amount:</label> 
     <input type="number" id="amount" name="amount"/> 
     <input type="submit" name="submit1" value="Submit"/> 
    </fieldset> 
    </form> 
</div> 
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post"> 
    <div data-role="collapsible"> 
    <h1>VIEW ALL</h1> 
    <fieldset> 
     <legend> 
     <span class="number">1</span> 
     Current Inventory list 
     </legend> 
     <input type="submit" name="submit2" value="Show all"> 
     <div data-role="popup" id="myPopup" class="ui-content"> 
     <h1 id="here"></h1> 
     </div> 
    </fieldset> 
    </div> 
    <div data-role="collapsible"> 
    <h1>VIEW INVENTORY DETAILS(GRAPH)</h1> 
    <fieldset></fieldset> 
    </div> 
    <button type="submit">Sign Up</button> 
</form> 

PHP:

<?php 
    if (isset($_POST['submit1'])) { 
    $nname = ""; 
    $sserial = ""; 
    $aamount = ""; 
    if ($_SERVER["REQUEST_METHOD"] == "POST") { 
     if (empty($_POST["product_name"])) { 
     { 
      echo "Name is required"; 
      break; 
     } 
     } else { 
     $nname = test_input($_POST["product_name"]); 
     } 
     if (empty($_POST["serial"])) { 
     { 
      echo "Serial code is required"; 
      break; 
     } 
     } else { 
     $sserial = test_input($_POST["serial"]); 
     } 
     if (empty($_POST["amount"])) { 
     { 
      echo "Amount is required"; 
      break; 
     } 
     } else { 
     $aamount = test_input($_POST["amount"]); 
     } 
     insertdata($nname,$sserial,$aamount); 
    } 
    } 
    function test_input($data) { 
    return $data; 
    } 
    function insertdata($nname,$sserial,$aamount) { 
    $servername = "localhost"; 
    $username = "root"; 
    $password = ""; 
    $dbname = "mydb"; 
    $conn = new mysqli($servername, $username, $password, $dbname); 
    if ($conn->connect_error) { 
     die("Connection failed: " . $conn->connect_error); 
    } 
    $sql = "INSERT INTO inventory_list (name, serialno, amount) VALUES ('$nname', '$sserial', '$aamount')"; 
    if ($conn->query($sql) === TRUE) { 
     echo "New record created successfully"; 
    } else { 
     echo "Error: " . $sql . "<br>" . $conn->error; 
    } 
    $conn->close(); 
    } 
    if (isset($_POST['submit2'])) { 
    $servername = "localhost"; 
    $username = "root"; 
    $password = ""; 
    $dbname = "mydb"; 
    $conn = new mysqli($servername, $username, $password, $dbname); 
    if ($conn->connect_error) { 
     die("Connection failed: " . $conn->connect_error); 
    } 
    $sql = "SELECT * from inventory_list"; 
    $result = $conn->query($sql); 
    $return_arr=array(); 
    if ($result->num_rows > 0) { 
     // output data of each row 
     while ($row=$result->fetch_assoc()) { 
     $row_array['name'] = $row['name']; 
     $row_array['serialno'] = $row['serialno']; 
     $row_array['amount'] = $row['amount']; 
     array_push($return_arr, $row_array); 
     }  
    } else { 
     echo "0 results"; 
    } 
    $conn->close(); 
    } 
?> 

^^ РНР части,

Javascript:

var arr = <?php echo json_encode($return_arr);?>, out = "<table>"; 

for (var i = 0; i < arr.length; i++) { 
    out += "<tr><td>" + 
    arr[i].name + 
    "</td><td>" + 
    arr[i].serialno + 
    "</td><td>" + 
    arr[i].amount + 
    "</td></tr>"; 
} 

out += "</table>"; 
document.querySelector("#myPopup #here").innerHTML = out; 
+2

нет никакого кода выше, что может обновить страницу –

+1

Вы trigging представления формы где-то за пределами коды вы предоставили? –

+0

Как говорит @Dagon, ничто здесь не может привести к описанному вами поведению. –

ответ

0

В зависимости от того, как связать форму с помощью JQuery , вы можете вернуть fal се, чтобы предотвратить форму от подачи/освежающим или использовать preventDefault()

http://api.jquery.com/event.preventDefault/

2

Авто-обновление от использования типа входного = «отправить». Кнопка или вход с типом, равным «отправить», будут автоматически обновляться при нажатии кнопки.

Чтобы устранить эту проблему, измените тип ввода на «кнопку» или используйте функцию jQuery preventDefault при нажатии кнопки.

документация для функции preventDefault: http://api.jquery.com/event.preventDefault/

Смежные вопросы