Guardar información en la página HTML sin usar variables

So I'm trying to create a webpage where the user puts in there course information. There is an add button on the page, that adds another text field for them if they need more fields.

Once the Add button is pressed, the page is reset and all of the information that has been previously entered is gone. I could save the information in an array, and when or if the the add button is pressed save the information into an array, and re populate the fields using what was stored in the array.

My question is: Is there a way to refresh a page, and keep the information in the text fields, without taking the long process mention above, is there some attribute that I can use that will not delete information that has been previously entered into ?

preguntado el 21 de septiembre de 13 a las 07:09

Do you have to refresh the page when they click the add button? Try using javascript - change the input from submit to button, and add an onclick handler. If each item is the same as the one previous, you can do a clone of the previous item, erasing the value before you append it to the HTML document, and changing the name fields where required. -

3 Respuestas

If you code HTML5, you can use almacenamiento local with a fallback to cookies. Also, if the information should be removed after session end, then you may use sessionStorage instead.

Respondido el 21 de Septiembre de 13 a las 08:09

You can use ajax i think...it runs in background no page reload is done.

Respondido el 21 de Septiembre de 13 a las 07:09

Please do an example sir - harry sarshogh

Asumiendo este HTML:

<form id="course-info-form" action="submit-course-info.php" method="post">
    Professor name: <input type="text" name="professor"><br>
    Additional info:<br>
    <input type="text" name="additional0"><br>
    <input type="submit" value="Submit">
</form>
<br>
<button id="add-button">Add Field</button>

<!-- Use jQuery for DOM manipulation -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

With JavaScript / jQuery:

var courseInfoForm = $('#course-info-form');
var addButton = $('#add-button');

// Keep track of how many fields there are, so each can have a unique "name" attribute
var additionalFieldsAdded = 1;

// Whenever "Add Field" is clicked, create another input field
addButton.on('click', function() {
    var newInput = $("<input>", {
        type: "text"
        name: "additional" + additionalFieldsAdded
    });
    courseInfoForm.append(newInput, "<br>");
    additionalFieldsAdded += 1;
});

I'm not very good at PHP. In your PHP script, make a while loop that checks to see if isset($_POST['additional0']), and additional1, additional2, etc, until you are sure that there were no more additional fields passed. Then store all those additional details into an array, and handle it how you see fit.

As for your original question, I recommend using my solution instead. It's better to avoid unnecessarily reloading the page, if all you're doing is simply adding a new form each time.

I suppose you could capture the information that was "tentatively-submitted" when the "Add Field" button is clicked, and then in your PHP script loop through all the additional fields and create 1 more input element each time another field is added, and set the value attribute of each "old" input element to whatever was "tentatively-submitted."

So, to answer your question, you can set the default value of an input field (server-side) with:

// add-course-information.php
<?php
    $addingField = false;

    // Check for the optional "?do=addfield" parameter
    if (isset($_POST['do']) && $_POST['do'] == 'addfield') {
       $addingField = true;
       $fields = array();
       $nextField = 'additional' . count($fields);

       // Get each piece of POSTed field data
       while (isset($_POST[$nextField]) && $_POST[$nextField] != '') {
           array_push($fields, $_POST[$nextField]);
           $nextField = 'additional' . count($fields);
       }
    }
?>

<!-- Silly HTML! -->

<?php
    // If adding a field, recreate and repopulate all previous fields
    if ($addingField) {
        for ($i = 0; i < count($fields); i++) { ?>
            <input type="text" name="additional<?= $i ?>" value="<?= $fields[$i] ?>">
<?php   } ?>
        <input type="text" name="additional<?php echo count($fields) + 1 ?>">
<?php }
    // Otherwise, show the default additional field
    else { ?>
        <input type="text" name="additional0">
<?php } ?>

<!-- More awesome HTML! -->

Esa podría work... (Currently untested.)

What that page is supposed to do (if it works) is:

  1. On default, give the user his initial setup, with just 1 additional input field, "additional0".
  2. When the user clicks "Add Field," ?do=addfield should be POSTed to add-course-information.php (you can write that part), and when this page receives the do=addfield parameter, then it knows to loop through all the submitted additional fields, and store them each into an array, and then afterwards output all the submitted data back into another loop's-worth of dynamically generated <input> elementos.

But I think that that would be much more complicated, and unnecessarily increase the processing your server has to do. It could even be abused if someone was to hammer the "Add Field" button hundreds of thousands of times a minute, eventually making your for-loops iterate millions of times... (Unless you imposed a limit on the maximum number of fields, which would be easy.)

However, you might as well leverage the client's processing power if it's available.

Respondido el 21 de Septiembre de 13 a las 18:09

First off: Thanks for the input I really appreciate it. The PHP method is the method that I was talking about,but I really like the javascript way, I will try that one out before I take the PHP route. - ssturges

If you go the JavaScript route, you can adapt the first half of my PHP script ($fields, $nextField and the while-loop) in order to process the n additional fields that were added client-side. - Jackson

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.