Any Ideas of what can I do to show some options

Beginners - Learning PHP
#1

Hello, I want to do something like a live input email match and depending on that show options.

Read the live input and determinate options for it. Read the “@hotmail.com” part

example

User with hotmail <select<options: 1,2,3,4,5,6

The rest of emails not from hotmail <select<options: 7,8,9

I’ve tried to do something with Javascript but I barely know how to read it,I don’t think I can go any further there.

Any ideas of what can I implement in php??

Some way of just filtering. have a long list and when u insert your email just showing the options that correspond to it.

Thanks

#2

Well, you first should not double-post on the same problem. I just answered your previous one.
First, this post explains what you require unlike your previous post.

You can use the on-change functions in JS and alter hiding and showing of other fields based on input data.
One way would be to hide all of the select’s and then just show the one that corresponds to the one selected.
( Depends on how many you are using. ) Here is example from StackOverflow that does this:

$("#option").change(function(){
   $("select").not("#option").hide();
   $("#"+$(this).val()).show();
});

But, it would depend on your needs and you would need to alter the option to check for the email input instead of just when it changes. Here is another StackOverflow example on how to check if an input is from a list of valid ones. You could alter it to handle hiding/showing of dropdowns if in the list or not.

var legalDomains = {
    "-yahoo.com": true,
    "-gmail.com": true,
    "-hotmail.com": true,
    "-msn.com": true
};

var matches = reg_email.match(/@(.*)$/);
if (matches) {
    // matches[1] is the part after the @ sign in the email address
    if (("-" + matches[1]) in legalDomains) {
        // found the domain in the permitted list
    }
}

This will give you a starting place. Curious on why you want to do this. What possible options would be different from Gmail / Hotmail / etc… Do not understand why you would need this.

#3

Thanks a lot, I know I should not double post. Sorry about that, I just thought abandoning the js part and try with php. I’ll erase that post. And thanks for your answers.

#4

No problem! Just giving you ideas how to do this. Remember that PHP is SERVER-SIDE only and JS/JQuery is CLIENT-SIDE only. Therefore, you need to think out the logic of what you are trying to do and how the webpage interacts. Good luck.

#5

No problem! Just giving you ideas how to do this. Remember that PHP is SERVER-SIDE only and JS/JQuery is CLIENT-SIDE only. Therefore, you need to think out the logic of what you are trying to do and how the webpage interacts. Good luck

Well thanks for this, this helped me clear a lot of things in the way and how I’m trying to learn more.

Heres the solution in case someone needs something similar

js:

$(".email").on("keyup change", function() {
  if ($(this).val().match(/@emailtomatch/i)){
    $(".groupa").show();    
    $(".groupb").hide();
  } else {
    $(".groupa").hide();
    $(".groupb").show();
  }
});

css:

.groupa, .groupb{
display: none;
			}
#6

Glad you solved it. Good work!

#7

Well I did, and at the same time I created a new one. It works for one input with one select box that is already created. But If append more rows with js I cant make it work. I’ve red something about binds I think that is the problem but I’m not sure. Any thing I can read that gives more and idea of what is happening??

#8

Well, not sure what you mean. Can you explain what you mean by append more rows with js?
Show the code with appended rows so we can see the difference in your two versions with/without more rows. Then, we might be able to tell you where it is failing… Hard to guess what you added.

#9

I’m using a button to add more email input boxes and more selects.

I’ts adding rows ok, but now I wanted to add the options select to the new input boxes.

  var i = 1;
$("#addbutton").click(function () {
    $("#usertable").append('<tr>'+
    '<td><input class="form-control input-lg email'+i+'" type="email" name="mail[]" required /></td>'+
    '<td>'+
      '<select class="form-select" name="role[]" required>'+
       '<option value=""></option>'+
       '<optgroup Class="groupa'+i+'" label="grupa">'+
          '<option value="option1">option1</option>'+
          '<option value="option2">option2</option>'+
          '<option value="option3">option3</option>'+
          '</optgroup>'+
        '<optgroup class="groupb'+i+'" label="groupb">'+
          '<option value="option4">option4</option>'+
          '<option value="option5">option5</option>'+
          '</optgroup>'+
        '</select>'+  
      '</td>'+
    '<td><button type="button" class="removebutton" title="Remove this row">X</button></td></tr>').find("input").each(function () {
});
i++;
});;

$(document).on('click', 'button.removebutton', function () {
    $(this).closest('tr').remove();
    return false;
});

$(".email"+i).on("keyup change", function() {
  if ($(this).val().match(/@example/i)){
    $(".groupa"+i).show();    
    $(".gruopb"+i).hide();
  } else {
    $(".groupa"+i).hide();
    $(".groupb"+i).show();
  }
});
#10

Well, I am attempting to set up a test page to work on this for you.
This is all you have shown for the table section:

<table>
    <tr>
		<td>
			<input class="form-control input-lg email" type="email" name="mail[]" required />
		</td>
		<td>
			<select class="form-select" name="role[]" required>
				<option value=""></option>
					<optgroup Class="groupa" label="grupa">
					<option value="option1">option1</option>
					<option value="option2">option2</option>
					<option value="option3">option3</option>
				</optgroup>
				<optgroup class="groupb" label="groupb">
					<option value="option4">option4</option>
					<option value="option5">option5</option>
				</optgroup>
			</select>
		</td>
		<td>
			<button type="button" class="removebutton" title="Remove this row">X</button>
		</td>
	</tr>
</table>

Can you post the html for it or perhaps make a very small test page for it. Just the form, table and JS?
Hard to help you without seeing how the JS is called and where.

#11

I made a fiddle

https://jsfiddle.net/exeqs/exqp0ca2/1/

the first row works like I want, the rest no. I know i have to identify the added rows but i left the example untouch to not mess up.

Basically added rows should work like the first one, type @gmail, or something else in te first one.

#12

This is a common issue. The dynamically added elements don’t exist at the time the $(".email").on("keyup change", function() { is executed, so this event handler is not attached to them.

You can do a web search on how to solve this, but the following should work -

$(document).on('keyup change', '.email' , function() {
#13

Thanks for your answer, and I will search more about this.

#14

Okay, I took the fiddle code and put it into a live page so I can play with it. Or in the fiddle.

Now, you wanted this:
User with hotmail <select<options: 1,2,3,4,5,6
The rest of emails not from hotmail <select<options: 7,8,9

To do that, you would just need to check the value in the JS and load the OPTIONS based on the value.
But, it is tricky. First, remove the CSS to hide the optgroups.
Add hidden to the first one since you want all but Gmail to be the others.
Add hidden to the new input code to make sure the new buttons also hide the Gmail options.
Change the input to use .keypress instead of on. Here is a sample of how that might work:

<ul id="result">
</ul>
<input id="text" type="text"/>
<script>
var value = "";
$("#text").keypress(function(e) {
    value += String.fromCharCode(e.which);
    $("#result").html("value changed! now it's: " + value);
})
</script>

This will show whatever you type in. So, you can alter it to hide or show as needed.
Not sure any of this helps. This weekend I have more time free and will try to make it work for you!
Good luck!

1 Like
#15

Phdr, if he does not HIDE them on load, then, they exist in the browser.
If they are hidden, then, he can load them dynamically as needed. Change does not always work till the cursor moves off the input field. keypress would work better as he can check each time for the value.
Not sure…

#16

After you make the change I posted above, which will get the keyup change event to work for the dynamically added table rows, you then need to show/hide the correct groupa/groupb class elements in the corresponding row.

To do this, you will use a similar method to the removebutton javascript. You would go up to the closest ‘tr’, then find the .groupa or .groupb class. Here’s a working version of that section of code (you will also need to remove the 1’s from the end of the dynamically built groupa1 and groupb1 markup) -

$(document).on('keyup change', '.email' , function() {
  if ($(this).val().match(/@gmail/i)){
	$(this).closest('tr').find('.groupa').show();
    $(this).closest('tr').find('.groupb').hide();
  } else {
  	$(this).closest('tr').find('.groupa').hide();
    $(this).closest('tr').find('.groupb').show();
  }
});
#17

This is what I came up to, with the first solution.

  for(let i = 1; i <= 20; i++)
{
$(document).on("keyup change", ".email"+i, function() {
  if ($(this).val().match(/@gmail./i)){
    $("#groupa"+i).show();    
    $("#groupb"+i).hide();
  } else {
    $("#groupa"+i).hide();
    $("#groupb"+i).show();
  }
});
}

I’m going thank you guys for your answers, I’ve learned a lot the past days searching for questions, answers and reading you. And I will try your last solutions also, so I learn more.

I also want to say that sometimes one is so desperate for solutions, and dosen’t take time go outside take some air and read properly

I saw this in some javascript documents web when I started looking for what to do with content dynamically created.

$(document).on('keyup change', '#Id' , function() {

when phdr gave me his solution, i knew it was going to work since he already had answered some of my questions that lead to investigating and finding a solution.

But I already have seen the solution but was running all over the web not reading properly.

So much respect for everyone that is a part of this forum, I know it takes time to read, answer and come up with solutions. Sometimes one just goes to forums dumping questions, and doesn’t take the time to thank members helping disinterestedly, so thank you again.

.

#18

The code I posted is simple, general-purpose and will work for the first instance of the markup, for the dynamically added sections, and for any number of added sections, all without using a series of numbered ids.

Also, when I do dynamically added sections, to avoid repeating the markup inside the javascript, I simply put a <div></div> around the first instance of the markup in the document, making it a ‘template’, then get a copy of that, add the remove button markup, then append that to the document for each dynamically added section. This allows any change made to the markup to only need to be made in one place, resulting in DRY (Don’t Repeat Yourself) code.

1 Like
Sponsor our Newsletter | Privacy Policy | Terms of Service