Change options depending on the URL - javascript

I'm doing a form with an input URL. I would like to know how do I if the URL is a Youtube video change the input values and the radio label text, if the Vimeo for example change the value and the label text and want to be your one more input radio.
<form method="post" id="form">
<label>URL: <input type="url" size="60px" name="url" ><br>
<div class="examplo">http://www.example.com/304005/name-video</div><br></label>
<b>Tamanho:</b>
<label><input type="radio" name="t" value="488" checked> 488 x 366px</label>
<label><input type="radio" name="t" value="400" > 400 x 300px</label>
<label><input type="radio" name="t" value="240" > 240 x 180px</label>
<label><input type="radio" name="t" value="180" > 180 x 135px</label>
<input type="submit" name="btn" id="buton" value="Submit" />
</form>

Just use String.prototype.startsWith e.g.
<label>URL: <input id="foo" type="url" size="60px" name="url" ><br>
With
const input = document.getElementById('foo');
const value = input.value;
const isYouTube = value.startsWith('http://www.youtube'); // for youtube

Related

Detecting the change in inputs (jQuery)

There are several inputs and I want it to detect the variability in the input and give it the result. Currently, it works statically, I want to make it dynamically detect the digit change in the inputs.
I can do this with only 1 input but how can I do it for multiple inputs?
var allHaveSameValue = $(".inputclass").toArray().every(function(input, index, inputs) {
return input.value === inputs[0].value;
});
console.log(allHaveSameValue);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
You can listen to the input event to run the check.
let $inputClass = $('.inputclass');
$inputClass.on('input', function(e){
let val = $(this).val();
let allHaveSameValue = $inputClass.toArray().every(input => input.value === val);
console.log(allHaveSameValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>

Set hidden value based on radio button selection

Cannot find an answer:
I have searched Stack Overflow, however, despite finding lots of similar posts — and more complicated situations — I still couldn't find an answer to the issue I am trying to solve.
Here's my issue:
I have four radio buttons, and one hidden field:
<!-- My HTML Document -->
<form action="/my-doc.html" method="post">
<!-- The 4 Radio Buttons-->
<input type="radio" name="game" value="1" checked> First
<input type="radio" name="game" value="2"> Second
<input type="radio" name="game" value="3"> Third
<input type="radio" name="game" value="4"> Fourth
<!-- The Hidden Field -->
<input type="hidden" name="criteria" value="1">
<!-- My Submit Button -->
<input type="submit" name="action" value="Go">
</form>
What I need to do is set the value of <input type="hidden" name="criteria" value="1"> so that it is 0
Like this: <input type="hidden" name="criteria" value="0">
...but only after the user selects either the first, or second, radio button. The value of the hidden field should remain as being equal to 1 if any other radio button is selected.
How does a person do this using JavaScript?
Requirements: "Looking for a VanillaJS answer."
you can try below option
In javascript
function setValue() {
var selectedRadio = '';
var games = document.getElementsByName('game')
for (var i = 0; i < games.length; i++) {
if (games[i].checked) {
selectedRadio = games[i].value;
}
}
document.getElementById("hdnSelectedRadValue").value = (selectedRadio == "1" || selectedRadio == "2") ? "0" : "1";
return false;
}
Changes to do in HTML side
<body style="background-color: #f2f2f2;">
<form action="some.htm" method="post">
<input type="radio" name="game" value="1" checked> First
<input type="radio" name="game" value="2"> Second
<input type="radio" name="game" value="3"> Third
<input type="radio" name="game" value="4"> Fourth
<input type="text" name="criteria" id="hdnSelectedRadValue">
<input type="submit" name="action" value="Go" onclick="setValue();">
</form>
</body>
var radios =
document.querySelectorAll('input[type=radio][name="game"]');
radios.forEach(radio => radio.addEventListener(
'change', () => {
document.getElementsByName("criteria")[0].value =
parseInt(radio.value, 10) > 2 ? '1' : '0';
}
));
<input type="radio" name="game" value="1" checked> First
<input type="radio" name="game" value="2"> Second
<input type="radio" name="game" value="3"> Third
<input type="radio" name="game" value="4"> Fourth
<input type="hidden" name="criteria" value="1">
<input type="submit" name="action" value="Go">
You can simply listen to "change" events on all of the radio buttons, then just set the value accordingly.
Here's the snippet code I have written and tested
(function(){
let hdfValue = document.getElementById("myhiddenfield")
let radioButtons = document.querySelectorAll('input[name="game"]');
let submitButton = document.querySelector('input[name="action"]')
radioButtons.forEach((input) => {
input.addEventListener('change', function(e){
let radioButtonValue = e.target.value
if(radioButtonValue == 1 || radioButtonValue == 2){
hdfValue.value = 0;
} else {
hdfValue.value = 1;
}
});
});
submitButton.addEventListener("click", function() {
console.log(hdfValue.value)
});
})()
<form>
<input type="radio" name="game" value="1" checked> First
<input type="radio" name="game" value="2"> Second
<input type="radio" name="game" value="3"> Third
<input type="radio" name="game" value="4"> Fourth
<input type="hidden" name="criteria" id="myhiddenfield" value="1">
<input type="button" name="action" value="Go">
</form>

select two radio buttons with the same name, id, value

On my page I have two radio buttons for yes and two for no.
How I can do it if I check yes in one place it check second yes button or if I check no the second no will check too.
Following is my code:
<fieldset>
<input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
how i can select two radios at the same time?
You can't have more than one button checked in the same radio group. You need to give the two sets different names. I used search_by_range_A and search_by_range_B. Also IDs have to be unix.
To make it automatically check the other button, use a .change() handler that gets the value and then selects the other checkbox with the same value and checks it.
$(":radio").change(function() {
var value = $(this).val();
$(":radio[value=" + value + "]").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<input checked="checked" id="search_by_range_A_no" name="search_by_range_A" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_A_yes" name="search_by_range_A" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_B_no" name="search_by_range_B" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_B_yes" name="search_by_range_B" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
And again...ID of every element on a webpage should be Unique!
Use classes instead.
But nevertheless, it is still possible to achieve that. The only thing you have to change in your code is the name of the radio button because all radio buttons with the same name are assumed to be a group, and the web-browser only allows selection of only one of them by default, and you cannot control that.
Therefore change the name to regroup the radio buttons into two different sets.
Then you can do this:
$("[id^='search_by_range']").change(function(){
$("[id='"+$(this).attr("id")+"']").prop("checked", "checked");
});
Here is the JSFiddle demo
you can use javascript for this problem
here i can give you hint how can you can do !
$('#search_by_range_yes').attr('checked','checked');
$('#search_by_range_yes').addAttr('checked');
this would help :)
thanks
In same group radio buttons you can't check more than one. I used two different groups for this.
Find the below code:
<fieldset>
<input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_no" name="search_by_range_second" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_yes" name="search_by_range_second" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
JS Code:
$(function() {
$(":radio").on("change", function() {
var val = $(this).val(), checked = this.checked;
var others = $(":radio[value='"+val+"']").not(this);
others.prop('checked', true);
});
});
You can find the working demo here: http://jsfiddle.net/26g5rxs6/
1.i understand your problem these happens because all radio button has same name.
2.Same name radio button has one group and select only in that group.
3.You can group radio button by 1. search by no 2. search by range. i updated your code by following code.
<fieldset>
<input checked="checked" id="search_by_range_no" name="search_by_no" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_no" name="search_by_no" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>

Append multiple variables(params) to url for ajax call

I am trying to append values from a checked checkbox to a url that later would be used for an ajax call. As mentioned I would only like to have the values appended to the url if checkbox is checked. If a user checks and then unchecks, this would indicate not to add the value to the url. Below I have some basic foundation code. How can I append multiple items to the url ?
<form>
<input type="checkbox" value="1" id="item1" />
<input type="checkbox" value="2" id="item2" />
<input type="checkbox" value="3" id="item3" />
<input type="submit" id="submitForm" value="Submit Form" />
<form>
<script>
$('#submitForm').click(function() {
$('checkbox').click(function() {
$.getJSON('www.mysite.com/mypage.php?id='+item1+item2+item3)
});
});
</script>
First give your checkboxes a specific name like;
<form name="checkbox_form" id="checkbox_form">
<input type="checkbox" value="1" id="item1" name="val1" />
<input type="checkbox" value="2" id="item2" name="val2" />
<input type="checkbox" value="3" id="item3" name="val3" />
<input type="submit" id="submitForm" value="Submit Form" />
<form>
And your js will be;
$('#submitForm').click(function() {
var url = "'www.mysite.com/mypage.php";
if ($("#checkbox_form").serialize().length > 0) {
url += "?" + $("#checkbox_form").serialize();
}
alert("Your ajax url will be: " + url);
$.getJSON(url)
});
Here is a working fiddle: http://jsfiddle.net/cubuzoa/UKV3r/2/
You can use JQuery method serialize() as follows:
var query = $('form').serialize()
and after:
$.getJSON('www.mysite.com/mypage.php?'+query );
Only necessary to provide the input field attribute "name":
<form>
<input type="checkbox" value="1" id="item1" name="item1"/>
<input type="checkbox" value="2" id="item2" name="item2"/>
<input type="checkbox" value="3" id="item3" name="item3"/>
<input type="submit" id="submitForm" value="Submit Form" />
<form>
and you get:
www.mysite.com/mypage.php?item1=1&item2=2&item3=3
if all checkboxes are selected.

serializing radio buttons

I have a group of radio buttons like this
<input type="radio" name="test" value="h" />
<input type="radio" name="test" value="g" />
<input type="radio" name="test" value="s" />
Now I am serialzing the form to save their values, next time from the saved serialized form values I want load these radio buttons correctly, but its not showing the selected radio button correctly.
I am showing the form's serialized values into the page like this
var obj = $('form').serializeObject();
for(var r in obj){
if(obj.hasOwnProperty(r)){
var nr = obj[r];
$('[name='+r+']').val(nr);
}
}
HTML:
<form id="foo">
<input type="radio" name="test" value="h" />
<input type="radio" name="test" value="g" />
<input type="radio" name="test" value="s" />
<button id="button">foo</button>
</form>
<form id="bar">
<input type="radio" name="test" value="h" />
<input type="radio" name="test" value="g" />
<input type="radio" name="test" value="s" />
</form>
Javascript:
(function() {
$('#button').click(function(e) {
e.preventDefault();
var foo = $('#foo').serializeArray();
for(var i in foo) {
if(foo.hasOwnProperty(i)) {
$('[name="'+foo[i]['name']+'"][value="'+foo[i]['value']+'"]').each(function() {
$(this).attr('checked', true);
})
}
}
})
})();

Categories

Resources