Is it possible to split an input field with javascript?

[qwikad.com]

I'd like to split an input filed using javascript. How would I go about it?

The actual input field:

<input name="area" type="text" size="50" class="input" maxlength="50" value="<?php echo $data['area']; ?>">

This is how it looks now:



I'd like it to look something like this:



Thanks!

Note: I don't want to do a php array or stuff like that, I just want the field to have 2, 3 or more different sections (yet function like it is still one field).

[Beverleyh]

I'm not sure that would be a good idea - I mean that I think it would be difficult to setup and the results would probably be unpredictable.

It would make more sense to use 3 separate input fields but then join the inputs back together, in whatever format you desire, via the server-side processing script.

It depends what the 3 fields are being used for though, for example, if they are being used to divide a date input (day, month, year) there might be better ways to do it using drop down selects, a pre-made jQuery/Mootools/Prototype plugin or HTML5's new date input fields - more info here: http://html5doctor.com/html5-forms-input-types/

I guess we need more info though. How are you using the form? What information are you gathering and what do you want to do/how are you processing the data? Lastly, what DOCTYPE and server-side code are you using?

[Beverleyh]

Oh, I see that you're echoing data into the input field.

Again, its probably going to be easier/more reliable to split the data using PHP first and then echo into each input field separately (and then join the inputs back together server-side afterwards).

What data is it? Do you have a common delimiter (boundary markers) in the data string to split the data at the required breakpoints?

Please provide more information about the kind of data you're processing.

[qwikad.com]

Beverleyh, the thing is I do not want to make changes serverside (mainly because I am not really flexible in that). I tried to split the field using an array:

<input name="area[]" type="text" size="40" class="input" maxlength="50" value="<?php echo $data['area'][0]; ?>">
<input name="area[]" type="text" size="40" class="input" maxlength="50" value="<?php echo $data['area'][1]; ?>">
<input name="area[]" type="text" size="40" class="input" maxlength="50" value="<?php echo $data['area'][2]; ?>">

It didn't work, all it did was it displayed either "Array" or "Array Array Array" when I called it out.

Then I tried something like this:

var_dump($data['area']);
<input name="area[]" type="text" size="40" class="input" maxlength="50" value="<?php echo $data['area']; ?>">

Still no result.

So I figured, if I could just make it "look" like it is split and yet it will still be the same field, it should work. The question is how. Here's how I want to use it for, let's say, car for sale ads:



What will show will look like this: $10000 Honda Used


Easy, right?

[qwikad.com]

PS, I don't really want to split the field, I just want to MAKE it look like it is split (if it makes sense).

[Beverleyh]

Im still not sure why you want to fake a split with JavaScript (assumption made from the forum you posted in) when the easiest thing, since you are echoing with PHP anyway, would be to divide the data with PHP and then display the resulting pieces as individual strings (echo'd into separate input fields)

So assuming that $data['area'] contains a string formatted exactly as "$10000 Honda Used" when it is brought into the page, you could explode the parts like this;

<?php
list($price, $make, $cond) = explode(" ", $data['area']); // use the space as the delimiter
echo $price;
echo '<br/>';
echo $make;
echo '<br/>';
echo $cond;
?>

And then echo the separate prices wherever you want in the page. This would be the most reliable way to handle things using the data sample you provided.

[qwikad.com]

Sorry, I can't explain it better as to why I want to "fake-split it". It's not that I am fake-splitting it, I just want to make it easier for the users to enter what I want them to enter. For that I need 2, 3, 4 etc. separate fields.

If I understand what you're saying, it's pretty much impossible to do this with javascript (and/or maybe css)?

[traq]

It's not "impossible," just ...contrived.

<input name="area" id="area" value="$10000 Honda Used">
<script>
var area = {};
area.input = document.getElementById( 'area' );
area.input.setAttribute( 'hidden' );
area.value = area.input.value;
area.split_value = area.value.split( ' ',3 );
area.split_value.forEach(
    function( v,i,a ){
        var splitInput = document.createElement( 'input' );
        splitInput.setAttribute( 'name','splitInput_'+i );
        splitInput.setAttribute( 'value',v );
        document.body.insertBefore( splitInput,area.input );
    }
);
</script>

But then, you'd have to keep track of the new inputs and re-combine their values and update the original input. When you submit the form, you'd have to make sure to ditch the "fake" inputs first (because they're not really "fake"). There's a lot more development time, greater possibility of mistakes, and no clear advantage.

I understand your desire to "make it easier for the users." It is entirely appropriate, and splitting the input is the way you should be doing things for many other reasons as well. But doing it in PHP is much more efficient and robust.