#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2018
    Posts
    6
    Rep Power
    0

    Javascript: Trouble With User Input


    Hello all, fairly new here.

    Got a text-field-input table that is not running the output in the other field-boxes.W hen utilizing the on-click method
    it skips the other two methods in the .js and activates the third, which is opposite of what the button is suppose to do and is for the other one.

    The ID's are named correctly, but it is not accepting the first method that has another method contain in its statement at the bottom. So while
    getting a .reset() clear, its not displaying user-input in the other boxes.

    javascript Code:
    var fullname;
    var memberid;
    var dropdown;
    var delivery;
    var cselect;
    var displaydelivery;
    var resetme;
     
     
    function acceptInput() {
        fullname=document.getElementById('fname');
        var rfullname=document.getElementById('fname2');
        fullname.value=rfullname.value;
        memberid=document.getElementById('mid1');
        var memberid2=document.getElementById('mid2');
        memberid.value=memberid2.value;
        //Gets group container ID of shirt.Sets to text
        dropdown=document.getElementById('shirts');
        var tselection=}
            'sm': 'Small',
            'me': 'Medium',
            'la': 'Large',
            'xl': 'X-Large',
            'xxl': 'XX-Large',
            'xxxl': 'XXX-Large'
        }
        //sets id to value.
        'sm'.value='size';
        'me'.value='size';
        'la'.value='size';
        'xl'.value='size';
        'xxl'.value='size';
        'xxxl'.value='size';
        //ID of delivery options
        delivery=document.getElementById('dh');
        displaydelivery=document.getElementById('dw');
        //ID of color options
        cselect=document.getElementById('w','s','r','b');
        var colorselection = {
            'w': 'White',
            's': 'Silver',
            'r': 'Red',
            'b': 'Blue'
        }
        'w'.value='cr';
        's'.value='cr';
        'r'.value='cr';
        'b'.value='cr';
     
        displayResult()
    }
     
    function displayResult()
    {
        if(delivery==0)
        {
            displaydelivery.document.getElementById('dh2').value="Home";
            {
                if(delivery==1)
                {
                    displaydelivery.document.getElementById('dw2').value="Work";
                }
            }
        }
    }
     
    function resetMe() {
        if ('reset'&& resetme ===1) {
            document.getElementById("tableOne").reset();
        }
    }
    Last edited by requinix; September 15th, 2018 at 04:15 AM. Reason: please use [highlight=javascript] tags when posting Javascript
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2018
    Posts
    6
    Rep Power
    0
    Also got a bot-like response from last post. Hopefully there will be some answers here
  4. #3
  5. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,896
    Rep Power
    9646
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2018
    Posts
    6
    Rep Power
    0

    Exclamation


    The HTML code is posted below with 2 tables with 1 table displaying output to the other. Also, can only see a blue box and what looks like the highlight of a Format button in the response field on this page.
    Apologies if there's a text render, but it looks like the [-code] tags work in the preview.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
      <head>
        <meta charset="UTF-8">
        <title>Activity 1:Table</title>
        <link rel="stylesheet" href="radioalignment.css">
        <script type="text/javascript" src="tshirt1.js"></script>
      </head>
    
      <body>
        <table id="tableOne" border="1">
          <tr>
            <th>
              Full Name:
            </th>
            <td width="147.9">
              <input type="text" name="FullName" id="fname">
            </td>
          </tr>
          <tr>
            <th>
              Member ID:
            </th>
            <td>
              <input type="text" name="MemberID" id="mid1">
            </td>
          </tr>
          <tr>
            <th>
              <img src="TShirts.jpg" alt="Tshirt">
            </th>
            <td>
              <select>
                <option value="small" id="sm">Small</option>
                <option value="medium" id="me">Medium</option>
                <option value="large" id="la">Large</option>
                <option value="xlarge" id="xl">X-Large</option>
                <option value="xxlarge"id="xxl">XX-Large</option>
                <option value="xxxlarge" id="xxxl">XXX- Large</option>
            </select>
            </td>
          </tr>
          <tr>
            <th>
              You Choose:
            </th>
            <td>
              <input type="text" name="youchoose" id="co" value="">
            </td>
          </tr>
          <tr>
            <th>
              Color:
            </th>
            <td>
              <input type="radio" name="Color" id="w" value="White">
              <label for="w">White</label>
              <input type="radio" name="Color" id="s" value="Silver">
              <label for="s">Silver</label>
              <input type="radio" name="Color" id="r" value="Red">
              <label for="r">Red</label>
              <input type="radio" name="Color" id="b" value="Blue">
              <label for="b">Blue</label>
            </td>
          </tr>
          <tr>
            <th>
              Delivery Option
            </th>
            <td>
              <input type="checkbox" onclick='' name="Ddeliver" id="dh">Delivered To Home<br>
              <input type="checkbox" name="Ddeliver" id="dw">Delivered to Work
            </td>
          </tr>
        </table>
        <button id="pushme" onclick='inputAccept();'>Confirm Your Order!</button>
        <button id="reset" onclick='resetMe(); return false'>Reset</button>
        <br>
        <br>
        <table id="resultTable" border="1">
          <tr>
            <th>
              Name:
            </th>
            <td>
              <input type="text" name="FullName2" id="fname2" readonly>
            </td>
          </tr>
          <th>
            Member ID:
          </th>
          <td>
            <input type="text" name="MemberID2" id="mid2">
          </td>
          <tr>
            <th>
              Size:
            </th>
            <td>
              <input type="text" name="Size" id="size" value="" readonly>
            </td>
          </tr>
          <tr>
            <th>
              Color:
            </th>
            <td>
              <input type="text" name="ColorR" id="cr" readonly>
            </td>
          </tr>
          <th>
            Delivery Option:
          </th>
          <td>
            <input type="text" name="Deliver" id="dh2" readonly>
          </td>
        </table>
        <p id="uinput" name="dmessage"></p>
      </body>
    </html>
  8. #5
  9. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,896
    Rep Power
    9646
    There are many other problems in there besides the one about the button not working correctly.

    Take a look at this. Don't just copy it but actually look and see what it's doing. Then try using it and see what it does.

    Code:
    <form id="f">
    	<table border="1">
    		<tr>
    			<th>Full Name:</th>
    			<td width="147.9"><input type="text" name="FullName"></td>
    		</tr>
    		<tr>
    			<th>Member ID:</th>
    			<td><input type="text" name="MemberID"></td>
    		</tr>
    		<tr>
    			<th><img src="TShirts.jpg" alt="Tshirt"></th>
    			<td><select name="Size">
    				<option value="small">Small</option>
    				<option value="medium">Medium</option>
    				<option value="large">Large</option>
    				<option value="xlarge">X-Large</option>
    				<option value="xxlarge">XX-Large</option>
    				<option value="xxxlarge">XXX-Large</option>
    			</select></td>
    		</tr>
    		<tr>
    			<th>You Choose:</th>
    			<td><input type="text" name="youchoose"></td>
    		</tr>
    		<tr>
    			<th>Color:</th>
    			<td>
    				<label><input type="radio" name="Color" value="White"> White</label>
    				<label><input type="radio" name="Color" value="Silver"> Silver</label>
    				<label><input type="radio" name="Color" value="Red"> Red</label>
    				<label><input type="radio" name="Color" value="Blue"> Blue</label>
    			</td>
    		</tr>
    		<tr>
    			<th>Delivery Option:</th>
    			<td>
    				<label><input type="checkbox" name="DeliverHome"> Delivered To Home</label>
    				<label><input type="checkbox" name="DeliverWork"> Delivered To Work</label>
    			</td>
    		</tr>
    	</table>
    	<button name="submit">Confirm Your Order!</button>
    	<button type="reset">Reset</button>
    	<br>
    	<br>
    	<table border="1">
    		<tr>
    			<th>Full Name:</th>
    			<td width="147.9"><input type="text" name="FullNameConfirm" readonly></td>
    		</tr>
    		<tr>
    			<th>Member ID:</th>
    			<td><input type="text" name="MemberIDConfirm" readonly></td>
    		</tr>
    		<tr>
    			<th><img src="TShirts.jpg" alt="Tshirt"></th>
    			<td><input type="text" name="SizeConfirm" readonly></td>
    		</tr>
    		<tr>
    			<th>Color:</th>
    			<td><input type="text" name="ColorConfirm" readonly></td>
    		</tr>
    		<tr>
    			<th>Delivery Option:</th>
    			<td><input type="text" name="DeliverConfirm" readonly></td>
    		</tr>
    	</table>
    </form>
    
    <script>
    (function() {
    	var f = document.getElementById("f");
    	f["submit"].addEventListener("click", function() {
    		f["FullNameConfirm"].value = f["FullName"].value;
    		f["MemberIDConfirm"].value = f["MemberIDConfirm"].value;
    		f["SizeConfirm"].value = f["Size"].value;
    		f["ColorConfirm"].value = f["Color"].value;
    
    		if (f["DeliverHome"].checked && f["DeliverWork"].checked) {
    			f["DeliverConfirm"].value = "Home and Work";
    		} else if (f["DeliverHome"].checked) {
    			f["DeliverConfirm"].value = "Home";
    		} else if (f["DeliverWork"].checked) {
    			f["DeliverConfirm"].value = "Work";
    		} else {
    			f["DeliverConfirm"].value = "";
    		}
    	});
    })();
    </script>
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2018
    Posts
    6
    Rep Power
    0
    From what it looks like in the script portion there's some syntax configuration that may have been missed on the front-end side. The table in <HTML> renders, but raido-tags have been set with the same
    name to be part of a group.

    I see a ( in front of the opening header function method body, and a variable assigned to the other function following afterward.
    Then a global variable being assigned to a local variable's value/data, with a true && statement, with another function followed with a [ referring to a unwritten value.

    Usually with other methods their written as either public int method() { //statements } or function method(){//statements}. What purpose does the [ do out of curiosity? A specific container for opening functions
    in Javascript?
  12. #7
  13. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,896
    Rep Power
    9646
    First, a small correction. Rename the Confirm button:
    Code:
    <button name="confirm">Confirm Your Order!</button>
    Code:
    f["confirm"].addEventListener("click", function() {
    Anyway, not sure if you have the terminology mixed up or are confused about the various values.

    The return value from getElementById (like f above) is an object. It's a type of HTML element object. Depending on exactly what that object is, there are different members of it you can access. For example, when you did getElementById to get a text field, you did .value to get the value of the field.
    Here, f is the <form> which has a different set of members. Like it doesn't have a .value. It does have other things, such as a way to access all the named form fields (like FullName and MemberID). That way you don't have to do a lot of IDs and getElementsById to get to them - you can just start with the form and access them by name. Saves you from using a lot of variables too.

    In Javascript, objects and arrays are very similar. [] is array syntax but it also works for objects. In your original code you had stuff like fullname.value and that could also be written as fullname["value"]. Same thing. Normally you should use the dot syntax with objects but sometimes there are cases where the array syntax is more convenient.
    f.FullName and f["FullName"] will both access the FullName <input>. I used the array syntax because that's what I prefer for form elements, but you could change everything to dot syntax if you wanted.
    Code:
    var f = document.getElementById("f");
    f.confirm.addEventListener("click", function() {
    	f.FullNameConfirm.value = f.FullName.value;

IMN logo majestic logo threadwatch logo seochat tools logo