Point me in right direction - Page 2 - Computer Technical Help

Another approach you could try

It's a bare-bones example, but see what you think of the general concept and let me know if you would like further guidance.

Quote

12-25-2014 , 02:37 AM

#27

mutantdog

enthusiast

Join Date: Oct 2014 Posts: 78

If you prefer to try this in your browser (without jfiddle):

Cut and paste the following code into your editor and save as a file named (e.g.) "golf_strokes.html"...

then run it by typing the following into your browser's address bar:
file:///C:/Dev/golf_strokes.html
and hit return

If you do this in chrome you can use its nice debugging features to see what is happening as you make further changes... (hit F12 to open the debug console)

Code:

<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>

$(document).ready(function () {
    initialize();
});

function initialize() {
    var mainDiv = $("#golfShotForm");
    var titleDiv = $("<div/>").html("Shots for Hole 1:");

    var addShotButton = $("<button/>").html("Add Another Shot").click(function () {
        addNewShotInputDiv(mainDiv);
    });

    mainDiv.append(addShotButton);
    mainDiv.append(titleDiv);
    addNewShotInputDiv(mainDiv);
};

function addNewShotInputDiv(mainDiv) {
    var shotInputDiv = $("<div/>");

    var optionTypeTee = $("<option/>").html("Tee");
    var optionTypeFairway = $("<option/>").html("Fairway");
    var optionTypeRough = $("<option/>").html("Rough");
    var optionTypeSand = $("<option/>").html("Sand");
    var optionTypeGreen = $("<option/>").html("Green");

    var selectType = $("<select/>");
    selectType.append(optionTypeTee);
    selectType.append(optionTypeFairway);
    selectType.append(optionTypeRough);
    selectType.append(optionTypeSand);
    selectType.append(optionTypeGreen);

    var selectTypeLabel = $("<span/>")
        .attr("id", "selectTypeLabel")
        .html("Ball location: ");

    var inputDistanceFromHole = $("<input/>").attr("id", "inputDistance");
    var inputDistanceLabel = $("<span/>")
        .attr("id", "inputDistanceLabel")
        .html("Distance from pin: ");

    shotInputDiv.append(selectTypeLabel)
        .append(selectType)
        .append(inputDistanceLabel)
        .append(inputDistanceFromHole);

    mainDiv.append(shotInputDiv);
};

</script>

<style>
#titleDiv {
    color: black;
}

#inputDistance {
    width: 3.0em;
}

#inputDistanceLabel {
    margin-left: 1.0em;
}
</style>
</head>

<body>
    <div id="golfShotForm"/>
</body>

</html>

Quote

12-25-2014 , 02:42 AM

#28

mutantdog

enthusiast

Join Date: Oct 2014 Posts: 78

Sorry, I should have noted that when you type into your browser's address bar:

file:///C:/Dev/golf_strokes.html

the "Dev" part should be the folder you have saved the file to. "Dev" just happened to be the folder I had it in under my C: drive.

Quote

12-25-2014 , 02:52 PM

#29

NxtWrldChamp

Carpal \'Tunnel

Join Date: Feb 2008 Posts: 9,082

thanks for all of the input guys

mutantdog,
I quite like this approach as it allows the user the ability to see all of their shots before submission.

I think what I would like to do with it is have it automatically add a "new shot" if the latest location is not "hole".

Now I will have to figure out how to handle getting user input from dynamic forms, that seems like it could be very difficult for me.

Quote

12-26-2014 , 02:08 AM

#30

mutantdog

enthusiast

Join Date: Oct 2014 Posts: 78

Updated version

Just for an example, I changed it so when you type in a distance and hit Enter, it will add another shot, instead of having to press a button.

I added a button at the top to press when you are all done entering shots. It will then print a summary of the values entered. This gives an example of how you would get all the distance values when the entries for the hole are complete, so that you could insert them into a database or whatever. The same could be done for the shot locations.

Quote

12-26-2014 , 02:11 AM

#31

mutantdog

enthusiast

Join Date: Oct 2014 Posts: 78

Here is the self-contained non-jsfiddle version of the above code, as a web page displayable in your browser:

Code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
var shotNum = 1;
var mainDiv;

$(document).ready(function () {
    mainDiv = $("#golfShotForm");
    initialize();
    addNewShotInputDiv();
});

function initialize() {
    var headerDiv = $("<div/>").attr("id", "headerDiv");
    
    var titleDiv = $("<div/>")
        .attr("id", "titleDiv")
        .html("Shots for Hole 1:");
    headerDiv.append(titleDiv);

    var doneButton = $("<button/>")
        .attr("id", "doneButton")
        .html("Press When Done")
        .click(function() {
                showResults();
            });

    headerDiv.append(doneButton);
    mainDiv.append(headerDiv);
};

function addNewShotInputDiv() {
    var shotInputDiv = $("<div/>")
        .attr("id", "shotInputDiv" + shotNum);

    var optionTypeTee = $("<option/>").html("Tee");
    var optionTypeFairway = $("<option/>").html("Fairway");
    var optionTypeRough = $("<option/>").html("Rough");
    var optionTypeSand = $("<option/>").html("Sand");
    var optionTypeGreen = $("<option/>").html("Green");

    if (shotNum == 1) {
        optionTypeTee.attr("selected",true);
    } else {
        optionTypeFairway.attr("selected",true);
    }
    
    var selectType = $("<select/>")
        .attr("id", "selectType" + shotNum);
    
    selectType.append(optionTypeTee);
    selectType.append(optionTypeFairway);
    selectType.append(optionTypeRough);
    selectType.append(optionTypeSand);
    selectType.append(optionTypeGreen);

    var selectTypeLabel = $("<span/>")
        .attr("id", "selectTypeLabel")
        .html("Shot #" + shotNum + ": Location: ");

    var inputDistanceFromHole = $("<input/>")
        .attr("id", "inputDistance" + shotNum)
        .addClass("inputDistance")
        .change(function() {
                shotNum++;
                addNewShotInputDiv();
            });
    
    var inputDistanceLabel = $("<span/>")
        .attr("id", "inputDistanceLabel")
        .html("Distance left: ");

    shotInputDiv.append(selectTypeLabel)
        .append(selectType)
        .append(inputDistanceLabel)
        .append(inputDistanceFromHole);

    mainDiv.append(shotInputDiv);
};

function showResults() {
    $("#shotInputDiv" + shotNum).remove();
    shotNum--;

    var resultsText = "";
    var averageDistance = 0;
    for (shotIndex = 0; shotIndex < shotNum; shotIndex++) {
        var shot = shotIndex + 1;
        var shotDistance = $("#inputDistance" + shot).val();
        resultsText += "<br>Shot #" + shot + " distance was: " + shotDistance;
    }
    
    resultsText += "<br><br>Shots: " + shotNum;
    var resultsDiv = $("<div/>")
        .attr("id", "resultsDiv")
        .html(resultsText);
        
    mainDiv.append(resultsDiv);
};
</script>

<style>
#titleDiv {
    color: black;
    float: left;
}

#headerDiv {
    padding-bottom: 0.5em;
}

.inputDistance {
    width: 3.0em;
}

#inputDistanceLabel {
    margin-left: 1.0em;
}

#doneButton {
    margin-left: 1.0em;
    float right;
}

#resultsDiv {
    padding-top: 1.0em;
}
</style>
</head>

<body>
    <div id="golfShotForm" />
</body>

</html>